ayeongjin 님의 블로그

📚 자바스크립트의 Map과 Object알고리즘 문제를 풀이하다 Map과 Object의 차이에 대해 궁금해져서 둘을 비교하고, 언제 어떤 걸 써야 할지 정리해봤다. ✅ 1. 키(Key)의 타입 구분ObjectMap허용되는 키 타입문자열(String), 심볼(Symbol)모든 값 (숫자, 객체, 함수 등 포함) const map = new Map();map.set(1, "number");map.set("1", "string");console.log(map.get(1)); // "number"console.log(map.get("1")); // "string"const obj = {};obj[1] = "number";obj["1"] = "string";console.log(obj[1]); //..

🤔 useState는 const인데 왜 값이 변할까?React를 사용할 때 가장 기본적으로 만나게 되는 훅이 useState이다.아래와 같은 코드는 익숙하게 보이지만, 자바스크립트을 더 자세히 공부하면서 의문이 생겼다. const [count, setCount] = useState(0); 분명히 const는 상수인데, 어떻게 count의 값이 계속 바뀔 수 있는 걸까?이 글에서는 이 궁금증을 React 상태 관리의 흐름과 JavaScript의 const 개념을 중심으로 풀어봤다. ✅ let, const, var의 기본적인 차이우선 자바스크립트에서 let, const, var의 차이를 간단히 정리해보면var함수 스코프(function-scoped)이며, 호이스팅되고 중복 선언이 가능하다. ..

Webpack(웹팩)이란?웹팩(Webpack)은 모듈 번들러(Module Bundler)로, 여러 개의 자바스크립트 파일을 하나의 번들 파일로 묶어주는 도구입니다.웹 개발에서는 HTML, CSS, JavaScript, 이미지, 폰트 등 다양한 파일이 사용되는데, 웹팩을 활용하면 이를 효율적으로 관리하고 최적화할 수 있습니다. 1. 웹팩이 필요한 이유✅ 여러 개의 파일을 하나로 번들링웹 애플리케이션이 커질수록 JavaScript 파일, CSS 파일, 이미지 등이 많아지는데, 이를 효율적으로 관리하기 위해 웹팩이 사용됩니다. 웹팩을 사용하면 여러 개의 파일을 하나로 묶어 네트워크 요청을 줄이고 성능을 향상시킬 수 있습니다.✅ 최신 JavaScript 문법을 지원ES6 이상의 문법을 지원하지 않는 브라우저가 ..

자바스크립트의 클래스클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법 // 사용 전 : 코드 중복let studentA = { name: "이정환", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },};let studentB = { name: "홍길동", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },}; 1. 클래스 선언하기 1-1) 클래스 선언class Student {} 1-2) 필드..

자바스크립트의 변수 자바스크립트의 변수 선언var, let, constvar는 함수 스코프와 호이스팅의 특성을 가지며, 글로벌 객체의 속성으로 추가된다.let과 const는 블록 스코프를 가진다.const는 재할당과 재선언이 불가능하다. 1. varES6 이전에 주로 사용되던 변수 선언 키워드로, 함수 스코프를 가진다.(이는 var로 선언된 변수가 함수 내에서만 지역 변수로 작동하고, 함수 외부에서는 전역 변수로 작동한다는 것을 의미)var로 선언된 변수는 글로벌 객체의 속성으로 추가된다.브라우저 환경에서는 window 객체가 글로벌 객체이며, var로 선언된 변수는 window 객체의 속성으로 추가된다.(이는 var로 선언된 변수가 전역 스코프에서 접근 가능하다는 것을 의미) 2 let & constE..

호이스팅(hoisting)프로그램에서 변수나 함수를 호출하거나 접근하는 코드가 함수 선언 코드보다 위에 있음에도 불구하고, 마치 선언 코드가 위에 있는 것처럼 동작하는 자바스크립트만의 기능 이 코드에서 함수 선언문이 함수 호출보다 아래에 있지만 오류가 발생하지 않는다.func();function func() { console.log("hello"); // hello} 호이스팅이 발생하는 이유자바스크립트는 코드를 실행하기 전에 준비 단계를 거치는데 준비 단계에서 중첩 함수가 아닌 함수들은 모두 찾아 미리 생성해 둔다.자바스크립트 코드는 이런 준비 단계를 거친 다음에 실행되므로 함수 선언 코드를 호출보다 늦게 작성해도 자연스럽게 호출할 수 있다.자바스크립트의 독특한 특징의 하나인 호이스팅은 코드 내에서 ..