FrontEnd

JavaScript는 ES6 이후 큰 변화가 있었습니다. 기존의 var 키워드를 사용한 함수 레벨 스코프에서 let과 const가 도입되며 블록 레벨 스코프를 지원하게 되었죠. 함수 레벨 스코프 vs 블록 레벨 스코프 📌 함수 레벨 스코프(Function-level Scope)기존 JavaScript는 함수 단위로 변수를 관리했습니다. 즉, var 로 선언된 변수는 함수 내부에서만 유효하며, {} 같은 블록 내부에서는 영향을 받지 않았습니다.var i = 10;for (var i = 0; i  블록 레벨 스코프를 지원하는 프로그래밍 언어에서는 for 문에서 반복을 위해 선언된 i 변수가 for 문의 코드 블록 내에서만 유효한 지역 변수지만, var 키워드로 선언된 변수는 블록 레벨 스코프를 인정하지 않..

JavaScript를 비롯한 여러 프로그래밍 언어에서 함수 스코프와 클로저는 매우 중요한 개념입니다. 이 글에서는 스코프가 무엇인지, 클로저가 어떻게 생성되고 활용되는지 정리해 보겠습니다.  스코프(scope)란? 🔹 함수 스코프스코프는 말 그대로 '유효범위'라는 의미를 가지고 있으며함수 스코프는 함수 내부에서 선언된 변수들은 해당 함수 내부에서만 유효하다는 개념입니다.즉, 함수 외부에서는 내부에서 선언한 변수에 접근할 수 없습니다.function add(x, y) { console.log(x, y); // 3, 5 return x + y; }add(3, 5);console.log(x, y); // ReferenceError 위의 예시에서 첫번째 콘솔과 두번째 콘솔에는 다른 값들이 찍힙니다.이처럼 ..

⇨ useEffect와 useLayoutEffect의 차이를 알기 전,render : Dom Tree를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정paint : 실제 스크린에 Layout을 표시하고 업데이트하는 과정 useEffectuseEffect는 컴포넌트들이 render와 paint 된 후 실행 ⇨ 비동기적(asynchronous)이 훅은 브라우저가 화면을 그린 후에 실행 즉, 모든 DOM 업데이트가 완료된 후 비동기적으로 실행되기 때문에, 화면에 그려진 내용에 영향을 주지 않아 성능 저하를 최소화 할 수 있습니다. 다만, 이 때문에 화면에 깜빡이는 현상이 발생할 수 있습니다. 예를 들어, 컴포넌트가 화면에 렌더링된 후에 useEffect 내부에서 상태를 업데이트하면, 업데이터된 상태를..

기존의 뷰포트 단위 : vh와 vw 모바일 브라우저에서 `100vh`를 사용하면 종종 자동으로 스크롤이 생기는 문제가 발생 : 이는 모바일 브라우저가 주소창이나 탭 바 같은 UI 요소들을 고려하지 않고 전체 화면 높이를 "100vh"로 계산 위의 문제를 해결하기 위해 제안된 새로운 CSS 단위 dvh와 dvw (Dynamic Viewport Units) 모바일 UI 요소들의 변화를 실시간으로 반영하여, 실제로 사용 가능한 뷰포트의 높이와 너비를 동적으로 계산 결과적으로, 사용자가 브라우저의 UI 요소들 때문에 화면의 일부가 가려지는 것을 방지할 수 있음 svh와 svw (Small Viewport Units) 사용자의 화면 기준으로 가장 짧은 뷰포트 값을 가져옴 주소 표시줄이 없어져도 기존 주소표시줄의 ..