전체 글

`Virtual DOM(Document Object Model)`은 실제 DOM을 JavaScript 객체로 메모리 상에 복제한 가상 DOM입니다. 실제 DOM 조작은 브라우저의 `리플로우`와 `리페인트` 과정을 거치기 때문에 비용이 많이 드는 작업입니다. React와 같은 프레임워크는 이 Virtual DOM을 활용하여 UI를 효율적으로 관리합니다. Virtual DOM은 실제 DOM 요소의 가벼운 복사본으로, 상태 변경 시 전체 UI를 Virtual DOM에 먼저 렌더링합니다. 컴포넌트의 `상태(State)`가 변경될 때마다 새로운 Virtual DOM을 생성하고, 이전 Virtual DOM과 `비교(Reconciliation)`하여 변경된 부분만 실제 DOM에 한 번에 `반영(Batch Update..

1. 코드 스플리팅2. 레이지 로딩3. 파일 포맷 변환4. 캐싱5. 비동기, 지연 로딩1. 코드 스플리팅자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.const MyComponent = React.lazy(() => import('./MyComponent')); 2. 레이지 로딩페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그 때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 ..

`이벤트 전파`에는 DOM(Document Object Model)에서 이벤트가 발생했을 때, 그 이벤트가 어떠한 방식으로 전파되는지를 설명하는 개념입니다.이벤트 전파에는 크게 세 단계로 나눌 수 있습니다.캡처링(Capturing)타겟(Target)버블링(Bubbling) 클릭! 1. 캡처링(Capturing)`캡처링`은 이벤트가 DOM 트리의 최상위 요소(document 또는 window)에서 시작해, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계입니다. 즉, 부모에서 자식으로 아래로 내려가며 이벤트가 전파되는 단계를 `캡처링`이라고 합니다.// 캡처링 예시element.addEventListener('..

`CommonJS`와 `ES Module(ESM)`은 자바스크립트에서 모듈을 관리하는 로드하는 방식입니다. CommonJS`CommonJS`는 Node.js 환경에서 사용되며, 모듈을 동기적으로 로드하는 역할을 합니다. 모듈이 전부 로드될 때까지 다음 코드가 실행되지 않는 방식입니다. `require`키워드를 사용해 모듈을 가져오고, `module.exports`를 통해 모듈을 내보냅니다.주로 서버 측에서 사용됐지만, 클라이언트 환경에서도 번들러를 통해 사용할 수 있습니다.// CommonJS 방식// 모듈 내보내기module.exports = { add: function(a, b) { return a + b; }};// 모듈 가져오기const math = require('./ma..

단위 테스트(Unit Test)특정 조건에서 어떻게 작동해야 할지 정의한 것 (기능을 테스트)Input에 따라 계산한 결과를 Output으로 반환하는 것 (`함수`)단위 테스트 3단계1. 준비(arrange) : Input을 준비하는 단계2. 실행(act) : Input을 전달받아 함수를 실행하는 단계3. 단언(assert) : 결과를 검증하는 단계이러한 단위 테스트를 통해 `테스트 주도 개발(TDD)`을 할 수 있다. 테스트 주도 개발(Test Driven Development)적색(Red), 녹색(Green), 리팩터(Refactor) 순환테스트하기 쉬운 코드관심사의 분리🔍 적색(Red), 녹색(Green), 리팩터(Refactor) 순환적색(Red) : 실패하는 테스트 작성녹색(Green) : 테..

지난번에 CI/CD를 구축하고 나서 정적 페이지를 호스팅까지 했었다.오늘은 AWS의 CDN(Content Delivery Network) 서비스인 CloudFront를 이용해 정적, 동적 콘텐츠를 배포하고자 한다.[CI/CD 구축] / [CloudFront 정리]1. CloudFront 생성`원본 도메인`을 선택하고, `원본 엑세스`를 원본 엑세스 제어 설정으로 선택하고 `OAC(Origin Access Control)`을 생성한다.*OAC(Origin Access Control) 목적S3 버킷에 대한 직접 접근을 차단CloudFront를 통해서만 S3 콘텐츠에 접근 가능하도록 제한뷰어 프로토콜은 선택사항이지만, HTTPS만 사용하기 위해서 HTTP 요청을 HTTPS로 리다이렉트하도록 설정한다.`기본값 ..

CSS의 `position` 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.`static`, `relative`, `absolute`, `fixed`, `sticky`와 같은 속성을 사용해 요소를 배치할 수 있습니다.각 속성은 아래와 같은 특징이 있습니다.`static` : 요소를 일반적인 문서 흐름에 따라 배치합니다. 이는 기본값으로, 모든 요소는 별도 position 값을 지정하지 않으면 static이 적용됩니다.`relative` : static의 특성을 가지면서 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용할 수 있습니다. 다른 요소들에는 영향을 주지 않고 해당 요소만 이동됩니다.`absolute` : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가..