[JS] let, var, const(+호이스팅, TDZ...)

📌 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..

• format_list_bulleted HTML,CSS,JS
• · 2025. 1. 17.
• textsms

[CSS] CSS 가상요소 선택자(::before, ::after)

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

• format_list_bulleted HTML,CSS,JS
• · 2025. 1. 15.
• textsms

[JS] Map, Set(객체? 배열?)

📌 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..

• format_list_bulleted HTML,CSS,JS
• · 2024. 12. 8.
• textsms

[CSS] RequestAnimationFrame

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

• format_list_bulleted HTML,CSS,JS
• · 2024. 10. 8.
• textsms

[JS] Array와 Array 메소드

❗️ 자바스크립의 배열(인척 하는 객체)- 일반 배열같은 데이터 타입으로 이루어짐배열의 각 요소가 동일한 크기의 메모리 공간을 차지함 메모리 공간이 빈틈 없이 연속적으로 나열되어 있음이런 배열을 밀집 배열(dense array)라고 한다.  - 자바스크립트의 배열다양한 타입의 요소들이 저장될 수 있음배열의 요소들이 동일한 크기의 메모리 공간을 가지지 않음메모리 공간이 연속적으로 이어져 있지 않을 수도 있음이런 배열을 희소 배열(sparse array)라고 한다. 결론적으로 자바스크립트의 배열은 배열의 동작을 흉내 낸 특수한 객체이다. 이러한 특성 때문에 인덱스로 접근하면 일반 배열에 비해 느리지만특정 요소를 탐색하거나 요소를 삽입/삭제 하는 경우에는 일반 배열보다 빠르다.🤔 어떻게 하나의 배열에 여러 ..

• format_list_bulleted HTML,CSS,JS
• · 2024. 8. 26.
• textsms

[JS] Class

자바스크립트의 Class 문법은 ES6에 추가된 문법이다.추가되기 전에도 생성자 함수와 프로토타입을 통해 상속을 구현할 수 있었는데 굳이 추가된 이유가 뭘까?👀 Class가 나오게 된 배경프로토타입 체인을 이용해서 클래스 방식을 모방할 수 있지만, 구현이 복잡하고 어렵다.또한 기존 객체지향 프로그램 언어들과 달라서 개발자들이 어려움을 느꼈다. 결론적으로 개발자들의 편의를 위해 도입되었다는 것이다!👀 Class vs 생성자 함수- new 연산자생성자 함수는 new 연산자를 붙이지 않고 객체를 생성해도 오류가 발생하지 않지만,class는 new 연산자를 붙이지 않고 객체를 생성하면 오류가 발생한다. 생성자 함수에서 오류가 발생하지 않을뿐, 의도했던 동작과는 다르게 단순 함수 호출로 처리된다. - exte..

• format_list_bulleted HTML,CSS,JS
• · 2024. 8. 13.
• textsms