전체 글

[Frontend] 웹 애플리케이션의 성능을 최적화할 수 있는 방법들에 대해서 아는대로 설명해주세요.

웹 애플리케이션 성능 최적화에는 여러 가지 방법이 있습니다. 우선, 코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다. 또한, 레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 있습니다. 이미지에 대해서는 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하..

[Frontend] 이벤트 전파(event propagation)에 대해서 설명해주세요.

이벤트 전파는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 개념입니다. 이벤트 전파는 크게 세 단계로 나뉘는데, 캡처링(Capturing), 타겟(Target), 그리고 버블링(Bubbling)입니다. 첫 번째로 캡처링 단계에 대해서 설명 드리겠습니다. 이벤트가 DOM 트리의 최상위 요소(document)에서 시작하여, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계입니다. 이 과정에서 상위 요소들에 이벤트 리스너가 있으면 그 순서대로 실행될 수 있습니다. 두 번째로는 타겟 단계입니다. 이벤트가 실제로 발생한 타겟 요소에 도달하는 단계입니다. 타겟 요소에 등록된 이벤트 리스너가 이 시점에 실행됩니다. 마지막으로 버블링 단계입니다. 타겟 요소에서 이벤트가 발생한..

[Frontend] CommonJS와 ES Module의 차이점에 대해서 설명해주세요.

CommonJS와 ES Module(ESM)은 자바스크립트에서 모듈을 관리하고 불러오는 두 가지 주요 방식입니다. 먼저 CommonJS는 주로 Node.js 환경에서 사용되며, 모듈을 동기적으로 불러옵니다. 즉, 모듈이 로드될 때까지 다음 코드가 실행되지 않는 방식입니다. CommonJS는 require 키워드를 사용해 모듈을 가져오고, module.exports를 통해 내보냅니다. 이 방식은 주로 서버측에서 사용됐지만, 클라이언트 환경에서도 번들러를 통해 사용할 수 있습니다. 반면, ES Modules은 자바스크립트의 공식 표준 모듈 시스템으로, ECMAScript 2015(ES6)부터 도입되었습니다. ESM은 브라우저와 Node.js 환경에서 모두 사용할 수 있으며, 모듈을 비동기적으로 로드합니다. ..

[Frontend] script 태그에서 async와 defer의 차이점에 대해서 설명해주세요.

먼저, 두 속성 모두 스크립트를 비동기적으로 로드한다는 공통점이 있습니다. 하지만 실행 시점에서 중요한 차이가 있습니다. async 속성async 속성에는 다음과 같은 특징들이 존재합니다.스크립트를 비동기적으로 다운로드합니다.다운로드가 완료되면 즉시 실행됩니다.HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.defer 속성defer 속성에는 다음과 같은 특징들이 존재합니다.스크립트를 비동기적으로 다운로드합니다.HTML 문서 파싱이 완전히 끝난 후에 실행됩니다.DOMContentLoaded 이벤트 발생 직전에 실행됩니다.여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행됩..

[Frontend] 자바스크립트 함수에 대해서 아는대로 설명해주세요.

자바스크립트 함수에는 여러가지 특징들이 있습니다. 첫 번째 특징은 자바스크립트 함수는 일급 객체라는 점입니다.자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.const sayHello = functin(){ return 'Hello';};console.log(sayHello()); // 'Hello'const executeFunction = function(fn){ return fn();};console.log(executeFunction(sayHello)); // 'Hello' 이를 통해 매우 유연하게 코드를 작성할 수 있으며, 고차 함수를 포함한 다양한 패턴을 구현할 수 있습니다. 두 번째 특징은 익명 함수와 ..

[Frontend] 자바스크립트 배열에 대해서 설명해주세요.

자바스크립트의 배열(Array)은 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있습니다. 배열은 제로 인덱스 기반으로, 배열의 각 값은 인덱스를 통해 접근할 수 있습니다. 배열의 선언은 간단하며, 다양한 데이터 타입을 함께 저장할 수 있습니다.const array = [1,'apple',true,{key:'value'}]; 이 배열은 숫자, 문자열, 불리언, 객체 등 다양한 타입을 저장할 수 있으며, 배열의 첫 번째 요소는 array[0]으로, 두 번째 요소는 array[1]과 같이 접근할 수 있습니다. 자바스크립트 배열의 중요한 특징 중 하나는 동적 배열 이라는 점입니다. 이는 배열의 크기를 미리 지정하지 않아도 되고, 요소를 추가할 때마다 배열의 크기가 자동으로 조정됩니다.c..