비슷하게 생겨서 헷갈릴 수 있는, 그리고 약간은 생소한 문법을 짚고 넘어가보자!📌 ?. 문법(Optional Chaining)옵셔널 체이닝이란 undefined 또는 null 값이 들어갔을 때, 오류를 방지하기 위한 방법이다.오류를 띄우지 않고, undefined를 반환해준다. ⭐️ 사용하는 이유JS를 사용하다보면 객체를 다루는 일이 많고, API를 이용해서 통신하다 보면 데이터의 구조가 복잡해진다.const order = { orderId: "ORD123456", customer: { customerId: "CUST7890", name: "김철수", contact: { email: "chulsoo@example.com", phone: "010-1234-5678"..

📌 JSON(JavaScript Object Notation)웹 개발 시, 서버와 데이터를 교환할 때 사용하는 데이터 형식은 보통 JSON 형식으로 이루어져 있다.데이터를 외부에서 사용할 수 있게 변환하는 것을 직렬화라고 한다.JSON은 key:value 형식으로 이루어져있다.{ "name": "heedonguri", "age": 24, "friends": { "name": "friend1", "age": 25, }, "hobbies": ["코딩","쇼핑"],}데이터 교환을 위해 만들어졌기 때문에 언어에 종속되지 않는다는 장점이 있다. 🤔 어디서 많이 본 데이터 형식인데..?JS의 Object(객체)와 많이 닮았다.📌 JSON과 JS ObjectJSON은 객..

📌 let, var, constvar를 개선하기 위해 ES6에 등장한 것이 let과 const이다.var: 재선언 O, 재할당 Olet: 재선언 X, 재할당 Oconst: 재선언X, 재할당 Ovar a = 1;var a = 2; // 재선언a = 3; // 재할당let b = 1;let b = 2; // SyntaxError: Identifier 'b' has already been declaredb = 3;const c = 1;const c = 2; // SyntaxError: Identifier 'c' has already been declaredc = 3; // TypeError: Assignment to constant variable. ‼️ var이 가지는 문제점var myName = "h..

📌 가상요소 선택자(Pseudo Selectors)란?html에서 코드를 만들지 않고, css에서 스타일로만 요소를 추가하거나 제어할 때 사용하는 선택자이다.즉, html 문서에는 실제로 존재하지 않지만 실제 동작화면에는 존재하게 되는 것이다. 가상요소는 콜론(:)을 2개 연달아 표기해서 가상요소임을 나타낸다.콜론을 하나만 써도 적용이 되긴하지만, 가상요소임을 명확하게 구분하기 위해 콜론 2개를 붙이는 것을 권장한다.선택자::가상요소 { 속성: 속성 값;}위와 같은 형태로 작성한다.📌 왜 사용하는건데?실제 HTML을 조작하지 않기 때문에 HTML 구조에 영향을 미치지 않고 컨텐츠를 삽입할 수 있다.또한 의미는 없지만 어떤 장식을 추가하고 싶을 때, 굳이 div 태그를 추가하지 않고 만들 수 있다.어떤..

📌 Map이란?key:value 형태로 저장할 수 있는 자료구조이다. ⭐️ Map 특징key 값으로 다양한 자료형이 가능하다.삽입 순서를 기억하고(이터러블 객체), 삽입된 순서대로 순회한다.📌 Map vs 객체⭐️ 공통점key-value 형태로 저장한다.인덱스를 사용하지 않는다.key 값 중복을 허용하지 않는다. ⭐️ 차이점map은 key 값으로 다양한 자료형이 가능하지만, 객체의 key 값은 항상 string 형태이다.map은 삽입된 순서를 기억하지만, 객체는 삽입된 순서를 기억하지 않는다.📌 Map 메서드new Map() - 맵을 생성한다.map.set(key, value) - key:value 형태로 요소를 저장한다.map.get(key) - key에 해당하는 value 값을 반환한다. key..

브라우저 프레임초당 프레임(fps)는 1초에 몇 개의 프레임이 보여지는 가를 나타낸다.스크롤을 하거나 애니메이션 같은 것들이 화면에서 부드럽게 보이기 위해서는 60fps가 필요하다.1000ms/60 = 16.666ms 간격으로 프레임을 생성해야 된다.즉, 사용자에게 부드러운 애니메이션 느낌을 보여주기 위해서는 16.6ms마다 코드를 호출해야 하는 것이다.16.6ms보다 더 오래 걸리게 되면, 화면에서 끊김 현상이 발생한다.RequestAnimationFrame최적화를 해서 애니메이션을 효율적으로 실행해주는 함수이다.requestAnimationFrame은 브라우저가 애니메이션을 업데이트할 준비가 되면 호출된다.실제 화면이 갱신되는 주기에 맞춰서 콜백을 호출해주기 때문에 화면 끊김 현상을 방지한다. re..