삐제제의 개발 노트

const getarray = document.querySelectorAll("button"); console.log(getarray); const buttonclass = document.getElementsByClassName("btn"); console.log(buttonclass); Array.from(buttonclass).forEach((buttonclass) => { buttonclass.addEventListener("click", () => console.log("i have been clicked") ); }); 다음과 같은 코드가 있다. getarray 변수에는 querySelectorAll 이라는 메서드를 사용해서, HTML에 있는 button element 들을 모두 가져오고있다...

웹 애플리케이션을 만들다 보면 시간이 걸리는 작업들이 있다. 예를들면 서버 쪽 데이터가 필요할 때는 Ajax 기법을 이용하여 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 그리고 이 과정에서 해당하는 작업들을 비 동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수가 없다. (한 작업 끝나면 그다음 작업, 또 한 작업 끝나면 그다음 작업 이런 식으로 수행) 하지만 비 동기적으로 작업을 처리한다면 중지 상태가 되지 않기 때문에 동시에 ..

자바스크립트의 배열 메서드 중 splice() 메서드는 삭제, 삽입, 대체의 세 가지 기능을 수행 할 수 있다. - 삭제 : splice 메서드를 이용해 배열 데이터를 원하는 만큼 삭제할 수 있다. splice 메서드의 첫번째 매개변수로, 삭제할 데이터의 인덱스를 넣고, 두번째 매개변수에 첫번째 매개변수에 들어간 인덱스부터 삭제할 개수를 넣는다. let colors = ["red", "green", "blue"] let removed = colors.splice(0,1); // 제거한 데이터의 배열이 반환됨 alert(colors); // green, blue alert(removed); // red - 삽입 : 매개변수를 세 개 이상 넘기면 배열에 데이터를 삽입할 수 있다. 첫번째 매개변수에는 삽입할 ..

자바스크립트에서 함수 매개변수는 다른 언어의 매개변수와는 조금 다르게 동작한다. 자바스크립트에서 함수는 매개변수의 숫자를 따지지도않고, 데이터 타입도 체크하지 않는다. 그렇기때문에 매개변수를 두 개 받도록 함수를 만들어도, 꼭 두개를 넘겨야 하는건 아니다. 한개를 전달하거나, 세개를 전달, 그리고 아예 전달하지 않아도, 이를 에러로 간주하지는 않는다. 이렇게 되는 이유는 자바스크립트에서 함수 매개변수는, 내부적으로 배열로 표현되기 때문이다. 이 배열은 "항상" 함수에 전달되지만, 어떤 값이 들어있는지 체크하지않는다. 빈 배열이 들어와도 상관없고, 필요한 매개변수보다 더 많은 값이 들어와도 딱히 상관이 없다. 자바스크립트에서 함수는 기본적으로 arguments라는 객체를 하나 가지고 있는데, 이 객체를 통..

1. map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 let Array = ["Apple", "Banana", "Tomato"]; let mapArray = Array.map((fruit) => `Nice ${fruit}`); console.log(mapArray); 결과 : 2. filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 let Array = ["Apple", "Banana", "Tomato"]; let filterArray = Array.filter((fruit) => fruit.length > 5); console.log(filterArray); 결과 : 3. forEach : 주어진 함수를 배열 ..

이번에 리액트를 공부하고있는데, 자바스크립트에서 배열안에 있는 데이터들을 반환할 때, map 함수가 아주 유용하다는걸 느꼈다 map() 메서드 : callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. const numberArr = [1,2,3,4,5]; const result = numberArr.map((num) => num + 1); console.log(result); //결과 : [2,3,4,5,6] callback 함수에 들어가는 첫번째 매개변수는 순서대로 처리할 요소가 들어간다. (위 코드에서 num은 1,2,3,4,5 가 차례대로 불러져 num+1 하고 반환됨) const numberArr = [1,2,3,4,5]; const res..

* 미디어 쿼리를 안해서, 모바일로 보면 화면이 깨져요 * * 2021.08.15 모바일 전용 화면 만들었습니다 이제 안깨져요 * https://pjj186.github.io/genshin_MBTI/ Genshin Impact MBTI! 안녕! 나야 페이몬! 다들 타바트대륙 모험은 어때? 잘 하고있어? 오늘은 너의 성격유형이 내친구들중에서 누구의 성격유형이랑 비슷한지 알아볼꺼야! 어쩌면 조금 길어서 지루할 수도 있지만! pjj186.github.io 어제 잠이 안와서 토이프로젝트로 뭘 할까 고민하다가, 내가 요즘 즐겨하는 게임인 원신의 캐릭터를 주제로 MBTI를 만들어 봤다. 이 맛에 토이프로젝트 하나 싶다! 만들면서 뭔가 실력 올라가는 느낌이 쭉쭉 들었다. 로직을 생각하는건 금방 했는데, 질문지가 60..

html 요소를 id나 클래스, 태그를 통해 가져올 때 : // title 이라는 클래스를 가진 요소를 title 변수에 저장 const title = document.querySelector(".title"); // title 이라는 id를 가진 요소를 title 변수에 저장 const title = document.querySelector("#title"); // body 라는 태그를 가진 요소를 body 변수에 저장 const body = document.querySelector("body"); 가져온 요소를 이벤트 리스너를 통해 제어하는 방법 : // title 클래스를 가진 요소를 변수 title에 저장. const title = document.querySelector(".title"); //..

이번 포스팅에선.. 오늘 공부한 자바스크립트 함수의 정의에 대해서 글을 써보려고한다. 우선 자바스크립트에서 함수를 생성하는 방법은 3가지가 있다! 1. 함수 선언문 2. 함수 표현식 3. Function() 생성자 함수 요러케 세가지가 있다! 들어가기전에 함수 리터럴의 형태를 간단하게 살펴보자.. function add (x, y) { return x+y; } function : function 키워드이다. 자바스크립트 함수를 만들때 사용한다 ! add : 함수명이 오는 자리이다! 위 코드에 나온 함수의 이름은 add가 되겠죵? (x, y) : 매개변수가 오는 자리이다! 우리가 C 나 JAVA에서 사용했던 그 매개변수랑 비슷한데 차이점은 데이터 타입을 명시하지 않아도 된다는점! return x+y; : ..

자바스크립트에서 두 값이 같은지 확인할 때 사용하는 연산자는 == 연산자와 === 연산자가 있다! 이 비슷하게 생긴 두 연산자의 차이점은 다음과 같다. == 연산자는 비교하려는 피연산자의 타입이 다를 경우, 같은 타입으로 바꿔준 뒤 비교한다. 즉 1 == '1' 숫자 1과 문자열 1 을 비교하면 같은 타입으로 바꿔 준 뒤 비교하기때문에 결과가 true가 나온다! === 연산자는 타입 변환을 하지 않고 비교한다. 1 === '1' 을 했을때, 당연히 숫자 1 과 문자 '1' 은 다르기때문에 false 를 출력한다! js로 코딩할때 == 연산자로 비교하는 방법은 추천하지 않는다고한다. 그 이유는 == 연산자의 타입 변환에 따른 잘못된 결과를 얻을 수 있기 때문이란다.. 그래서 가급적이면 === 로 피연산자들..