자바스크립트에서 모듈을 관리하고 불러오는 방식에는 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) 에 ...