javascript

딴 거 공부하다 보면 자주 안 쓰는 거는 기억의 희미 해지다 보니 정리 겸 작성하게 되었다물론 뭐.. gpt한테 물어보면 금방 나오긴 하지만 공부할 겸 정리하였다1. 여러 개의 파일 선택하는 법 input태그에 multiple를 작성하면 파일을 선택할 때 여러 개를 선택할 수 있다.multiple를 선택 안 하면 여러 개를 클릭해도 하나만 선택하게 된다 2.input태그로 받은 파일 이벤트 처리 addEventListener('change')를 사용하면 input태그를 클릭 후 파일선택 한 뒤 열었을 때 이벤트 처리가 된다위에 코드를 실행하면 브라우저가 제공하는 전용 객체 타입 FileList안에 선택한 파일에 대해 적혀있다(객체이기 때문에 배열메서드를 바로 직접적으로는 못 사용함) ..

자바스크립트는 싱글 스레드로 동작하는 언어로 한번 할 때 하나의 작업만 처리되는 언어입니다async, await, promise 등 정리하기 전에 동기와 비동기에 대한 개념을 어느 정도 정리하고자 작성하였습니다1. 동기와 비동기 이해하기-동기(Synchronous)동기는 한 작업이 끝나야 다음 작업으로 실행되는 방식으로 코드가 위에서 아래로 순서대로 흐른다.작업이 끝날 때까지 다음 코드가 실행불가 하며 네트워크통신, 파일처리 같은 지연되는 작업에는 취약한 방식이다(중간에 오래 걸리는 작업이 있으면 그 뒤로는 멈춰짐)console.log("start");for (let i = 1; i 위에 예제코드를 보면 처음 start가 출력되고 for문을 50까지 다 돌아야 end가 출력된다 이런 흐름을 동기식이라고..

1.forEach 사용법forEach의 경우 함수를 받아 사용하며 반환값은 없다const fruit = [ "사과", "바나나", "오렌지", "포도", "키위", "망고", "복숭아", "수박", "딸기", "체리",];fruit.forEach((ele, index) => { console.log(ele, index);});forEach내부에 arrow function 넣고 함수의 매개변수를 받아 출력하게 됨 ele 매개변수를 통해 forEach가 배열에 있는 거를 받아 console.log로 출력하게 된다두 번째 매개변수인 index는 각 배열의 인덱스이며 출력하면 아래와 같이 나오게 된다//출력결과사과 0바나나 1오렌지 2포도 3키위 4망고 5복숭아 6수박 7딸기 8체리 9그리고..

자바스크립트에서 변수 선언은 var, let, const이 있다실제 동작 레벨에서 보면 호이스팅 타이밍, 초기화 방식, 스코프 결정 구조에서 차이가 크며프론트엔드 면접 질문으로도 많이 물어보는 것 같아 정리하게 되었다1.호이스팅(Hoisting)자바스크립트에서 코드는 실행되기 전에 변수 선언과 함수 선언이 먼저 메모리에 등록된다. 이 과정을 호이스팅이라고 부른다.즉, 변수 선언이 작성 위치와 상관없이 스코프의 최상단으로 끌어올려진 것처럼 동작한다.var → 선언과 동시에 초기값(undefined)까지 호이스팅let, const → 선언만 호이스팅, 초기화는 실행 시점에서 이루어짐console.log(a); // undefinedvar a = 10;console.log(b); // ReferenceErro..

웹사이트를 보다 보면 화면 스크롤을 내리면 특정 이미지나 글씨가 자연스럽게 나오는 애니메이션을 본 적 있을 것이다만드는 방법을 정리해 보겠다 대표적인 예시 영상이다 특정요소가 화면에 보이면 자연스럽게 애니메이션 하듯이 나온다 1. IntersectionObserver 관찰자 사용 치킨,피자,탕수육,짜장면 파이썬,자바스크립트,c언어 에스파,아이브,엔믹스,블랙핑크 애니메이션 할 html 요소를 queryselectorAll을 사용해서 변수에 담아주고div로 내가 감지하려고 하는 요소를 observe() 메서드 안에 넣어준다 2.threshold로 감지하기let observer =..

오늘은 자바스크립트의 객체 구조분해 할당등에 대해 공부하였다1. 객체 사용법자바스크립트는 객체 기반의 언어이며 객체는 키와 밸류 형태로 이루어져 있다{}대괄호를 사용하며 객체 안에 데이터, 함수 등이 들어갔다 보면 됨let abc = { a : 10, b :22} // a가 키 , 10이 벨류let data =20let obj = { data}키와 벨류 한쌍을 객체의 속성이라고 한다객체를 만든 거를 사용하는 방법이 다console.log(abc) // { a: 10, b: 22 } 대괄호 안에 형태가 나온다console.log(abc.a) // 10 객체 형태안에 a의 키값인 10이 출력된다 , abc.b는 22console.log(obj.data) // 202. 객체의 속성함수 (객체에..