
CommonJS와 ES Module(ESM) 차이점
자바스크립트에서 모듈을 관리하고 불러오는 방식에는 CommonJS와 ES Module(ESM)이 존재한다. 두 방식은 모두 코드의 구조화와 재사용성을 높이기 위한 목적을 가지고 있으나, 로딩 방식과 적용 환경에서 뚜렷한 차이를 보인다. CommonJS CommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템으로, 동기적 로딩(sync...

자바스크립트에서 모듈을 관리하고 불러오는 방식에는 CommonJS와 ES Module(ESM)이 존재한다. 두 방식은 모두 코드의 구조화와 재사용성을 높이기 위한 목적을 가지고 있으나, 로딩 방식과 적용 환경에서 뚜렷한 차이를 보인다. CommonJS CommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템으로, 동기적 로딩(sync...

<script> 태그의 async와 defer 속성은 스크립트를 비동기적으로 로드하여 페이지 로딩 속도를 향상시키는 데 사용된다. 하지만 두 속성은 실행 시점에서 중요한 차이를 가집니다. async 속성 async는 스크립트를 비동기적으로 다운로드하며, 다운로드가 완료되는 즉시 실행된다. <script src="example....

자바스크립트 함수에 대해서 아는대로 설명해주세요 ! 1. 함수는 일급 객체 (First-class Object) 자바스크립트에서 함수는 값처럼 취급됩니다. 즉, 변수에 담을 수 있고, 함수의 인자로 넘길 수도 있으며, 다른 함수의 반환값으로도 사용할 수 있습니다. const sayHello = function() { return 'Hello'; ...

자바스크립트의 배열(Array) 은 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있다. 배열은 제로 인덱스(0부터 시작) 기반으로 각 요소에 인덱스를 통해 접근할 수 있다. 📌 배열 선언과 접근 배열은 대괄호([])를 사용하여 선언하며, 다양한 타입의 데이터를 함께 저장할 수 있다. const array = [1,...

자바스크립트 호이스팅 (Hoisting) 호이스팅(Hoisting) 은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징을 말합니다. 이로 인해, 선언된 위치보다 상단에서 변수를 참조할 수 있는 것처럼 보이는 현상이 발생합니다. 변수 호이스팅 호이스팅은 선언만 끌어올리고, 값 할당은 끌어...

React가 화면을 그릴 때는 단순히 한 번에 모든 걸 처리하지 않는다. 렌더링 과정은 두 단계로 나뉘며, 이 구조 덕분에 React는 빠르고 유연하게 동작한다. 바로 render phase와 commit phase이다. 🧩 Render Phase: 변화된 UI를 “계산”하는 단계 먼저 render phase는 “무엇이 바뀌었는가?”...

리액트의 Strict Mode에 대해서 설명해주세요 ! StrictMode는 리액트에서 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위한 도구입니다. 1. 오래된 코드와 비권장 API 감지 리액트에서는 이제 사용하지 않는 메서드들이 있습니다. componentWillMount() componentWillReceive...

인터넷 창에 www.google.com를 입력하면 무슨 일이 일어나는지 설명해주세요 ! 1. DNS 조회 (도메인 이름 → IP 주소) 사람이 기억하기 좋은 주소 : www.google.com 컴퓨터가 이해하는 주소 : 142.250.206.36 (IP 주소) 사용자가 www.google.com을 입력하면, 브라우저는 먼저 이 도메인 ...

브라우저 렌더링 파이프라인에 대해서 설명해주세요 ! 웹 페이지가 화면에 보이기까지는 여러 단계를 거칩니다. 이 과정을 브라우저 렌더링 파이프라인이라고 부르며, 크게 6단계로 나눌 수 있습니다. 1. DOM 생성 (문서 구조 만들기) HTML 파싱 : 브라우저는 HTML파일을 파싱하여 DOM을 생성 DOM(Document O...

성능 최적화를 위해 적용할 수 있는 방법 리액트 애플리케이션이 커질수록 성능 저하가 발생하기 쉽다. 이런 경우, 불필요한 리렌더링을 줄이고 렌더링 비용을 최적화하기 위한 다양한 방법을 적용할 수 있다. 이번 글에서는 대표적인 성능 최적화 기법인 메모이제이션(memoization), 함수/값 최적화 훅, 코드 스플리팅(code splitting) 에 ...