분류 전체보기101 이벤트 루프 찍먹용 간단한 비동기 함수 동작원리 예시 코드 let num = 1; setTimeout(() => { num = 2; }, 0); num = 3; console.log(num); 🔖위 코드는 let 키워드로 num 변수에 1을 할당하고, setTImeout()과 단순 할당을 사용해 num의 값이 무엇일지 유추한다. ✅setTimeout의 delay 값을 0으로 설정하더라도, setTimeout과 같은 비동기 함수의 콜백은 결국 콜스택의 코드가 모두 실행된 후에 실행된다. ✅fetch()나 async/await, setTimeout/setInterval과 같은 비동기 동작 함수들은 기본적으로 콜스택에 들어있는 코드들이 모두 실행된 후에 콜스택에 들어가 실행된다. ➡️따라서 setTImeout의 콜백 함수가 실행되는 시점은 이미 consol.. 2024. 4. 8. HTTP 요청 메소드 HTTP 요청 메소드 🔖HTTP는 원하는 행동을 수행하는 각각의 메소드를 가지고 있다. (HTTP 동사라고 부르기도 함) 1. GET - 특정 리소스의 조회를 요청한다. 데이터 조회만 가능하다. - 멱등성의 개념을 가지고 여러번 조회 요청을 해도 변함이 없다. - 쿼리스트링을 통해 서버에 데이터를 전달하지만 무방비 상태로 노출되어 주의가 필요하다.2. POST - 새로운 리소스의 생성을 요청한다. - 데이터를 메세지 바디에 파라미터 형식으로 전달한다. (key, value 형식) - 멱등성이 보장되지 않아 여러번 요청하면 동일하지 않은 결과값이 나올 수 있다.3. PUT - 리소스를 덮어쓰기 형식으로 대체한다. - 클라이언트가 리소스를 식별할 수 있어 URI를 지정한다. - 멱등성을 지니며 부분적인 수정.. 2024. 4. 4. 이벤트 위임과 캡쳐 & 버블링 🔖DOM의 이벤트 흐름은 캡쳐링 단계 -> 타깃 단계 -> 버블링 단계 순서로 이루어진다. 이벤트 버블링 🔖이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 경우, 해당 이벤트가 더 상위(부모) 요소들로 전달되는 특성을 의미한다. ❗특정 태그 전체에 이벤트를 등록하고, 최하위 태그 요소의 이벤트를 동작하면 자식->부모 순서로 이벤트에 해당하는 코드가 실행된다. ✅특정 태그만 선택한 것이 아닌, 모든 태그를 선택하여 이벤트를 부여하고 특정 태그에 이벤트를 동작시키면 브라우저가 해당 태그의 모든 상위 태그에 이벤트를 전파시킨다. 이벤트 캡쳐링 🔖이벤트 버블링과 반대로 부모 요소에서 자식 요소로 이벤트가 전파되는 것을 의미한다. (자주 나오는 개념은 아니다.) const divs = document.que.. 2024. 4. 4. 모던 자바 스크립트 기본 개념 정리 Symbol과 BigInt 🔖ES6+ 이후 추가된 새로운 데이터타입 // Symbol 고유한 값을 만들 때 사용 const symbol = Symbol('this is a Symbol'); // 다른 어떤 값과 비교해도 무조건 false // BigInt JS가 안전하게 표기할 수 있는 최대 정수형을 넘어선 표현을 위해 사용 const bigint = 9007199254740993n; const bigint = BigInt(9007199254740993); // 소수 표현에는 사용 불가, 같은 타입끼리만 연산 가능! typeof 연산자 🔖변수의 데이터타입을 확인하기 위해 사용하는 연산자 // typeof 변수 or typeof(변수) 의 형태로 사용 typeof 'Codeit'.. 2024. 3. 27. 자바스크립트의 var, let, const 비교 중복 선언 허용에서의 비교 🔖기본적으로 var, let은 중복 선언을 허용하며, const는 허용하지 않는다. ❗중복 선언은 허용하되, let은 재선언을 허용하지 않는다. ❗const는 선언과 동시에 초기화 해주어야 한다. // var 키드드 var a = 'JavaScript'; var a = 'Python'; // 허용 a = 'JAVA'; // 허용 // let 키워드 let a = 'JavaScript'; let a = 'Python'; // 미허용 a = 'JAVA'; // 허용 // const 키워드 const a = 'JavaScript'; const a = 'Python'; // 미허용 a = 'JAVA'; // 미허용 ✅기존의 var 키워드는 중복 선언으로 인해 다양한 문제(버그, 출력값.. 2024. 3. 25. JS의 얕은 복사 & 깊은 복사 자바스크립트의 값 🔖기본적으로 자바스크립트의 값은 원시값과 참조값으로 나뉜다. 원시값 : Number, String, Boolean, Null, Undefined 참조값 : Object, Symbol ✅원시값은 복사한 값을 다른 메모리에 할당하여 기존 값에 영향을 끼치지 않는다. (깊은 복사) ✅참조값은 주소를 복사하기 때문에 복사한 값을 변경하면 기존 값도 변경된다. (얕은 복사) 얕은 복사(Shllow Copy) 🔖객체의 참조(주소)값을 복사하는 것 const a = { one : 'one', two : 'two', } const b = a; b.one = 1; console.log(a.one); // 1 ✅객체의 주소를 복사하여 변수에 할당하기 때문에, 변수의 값을 수정하면 기존 객체도 변경된다. .. 2024. 3. 25. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
