grace's dev_note

MSW MSW(Mock Service Worker)는 API Mocking 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 합니다. 따라서, MSW 라이브러리를 통하면 Mock 서버를 구축하지 않아도 네트워크 수준에서 Mocking 할 수 있습니다. MSW가 이러한 역할을 할 수 있는 이유는 Service Worker를 통해 HTTP 요청을 가로채기 때문입니다. Service Worker가 뭐에요? Service Worker는 웹 애플리케이션의 메인 스레드와 분리된 별도의 백그라운드 스레드에서 실행시킬 수 있는 기술 중 하나입니다. Service Worker 덕분에 애플리케이션의 UI Block 없이 연산을 처리할 수 있습니다. 이러한 특징으로 인해, Service Worke..

전체 개발 프로세스 중 요구 사항 분석 및 기획, 백엔드 개발, 프론트엔드 개발에 이르는 각각의 개발 과정은 크게 겹치지 않고 진행되는 것이 가장 이상적입니다. 왜냐하면, 개발 과정에서 도출되는 요구 사항이나 사용 가능한 인터페이스에 변경이 있으면 각 단계별 의존성에 따라 다시 작업해야 하는 경우가 발생하기 때문입니다. 따라서, 개발 과정이 다음과 같이만 진행된다면 요구 사항과 제공된 스펙에 따라 순조롭게 프론트엔드 개발을 진행할 수 있습니다. 하지만 현실적으로 프론트엔드와 백엔드가 병행하여 개발하게 되는 경우가 많습니다. 이때 프론트엔드에서 백엔드의 API를 활용해야 하는 것처럼, 백엔드 개발에 종속적인 부분이 있다면, 해당 부분이 완성되기 전까지는 프론트엔드 개발을 진행할 수가 없고 그 부분이 진행된..

URL을 통해 에셋 가져오기 정적 에셋을 가져오게 되면 에셋에 접근할 수 있는 URL이 반환됩니다. import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl 예를 들어, imgUrl 객체는 개발 시 /img.png 값으로 할당되지만, 실제 프로덕션 버전에서는 /assets/img.2d8efhg.png와 같은 값이 할당됩니다. Webpack의 file-loader와 비슷한데, 하나 차이점이 있다면 vite는 절대 경로와 상대 경로 둘 다 사용할 수 있습니다. url()로 참조되는 CSS의 경우 동일한 방식으로 동작합니다. 일반적인 이미지, 미디어, 폰트 파일 타입은 자동으로 에셋 목록에 포함됩니다. 물론 assetIncl..

vite는 몇 가지 추가적인 vite 전용 옵션과 함께 잘 설계된 rollup의 플러그인 인터페이스를 기반으로 하는 플러그인들을 사용하여 확장할 수 있습니다. 이는 vite 사용자가 필요에 따라 개발 서버나 SSR과 같은 기능들을 확장할 수 있는 것과 동시에, 검증된 rollup 플러그인 생태계에도 의존할 수 있음을 의미합니다. 플러그인 추가하기 플러그인을 사용하려면 프로젝트의 devDependencies에 플러그인을 추가하고, vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 합니다. 예를 들어, 레거시 브라우저에 대한 지원을 제공하기 위해 공식 플러그인 중 하나인 @vitejs/plugin-legacy를 사용하고자 한다면 다음과 같이 할 수 있습니다. // vit..

기본적으로 vite는 여타 정적 파일 서버와 크게 다르지 않습니다. 다만, vite는 네이티브 ESM 말고도 기존 번들러에서 제공하던 기능을 대부분 지원하다는 차이점이 있습니다. NPM을 이용한 디펜던시 import 그리고 사전 번들링 다음 코드는 네이티브 ES에서 정상적으로 실행되지 않습니다. import { someMethod } from 'my-dep' 모듈의 위치를 찾을 수 없기 때문인데, vite는 다음을 기준으로 모듈을 가져오기 때문에 위 코드 역시 정상적으로 실행됩니다. Vite를 통해 ESM 스타일로 사전에 번들링된 CommonJS 및 UMD(CommonJS와 AMD 스타일의 모듈을 둘 다 지원하는 형태) 모듈. 이 과정은 Esbuild를 통해 이루어지며, 자바스크립트 기반의 다른 번들러보..

들어가기 전에 Vite는 프랑스어로 빠르다를 의미합니다. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다. 개발시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다(HMR 같은). 번들링 시 Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게 하며, 미리 정의된 설정을 제공합니다. vite는 기본적으로 최적화된 설정을 제공하지만, Plugin API 또는 Javascript API를 사용할 수 있습니다. 물론, 타입스크립트도 지원합니다. 지원하는 브라우저 기본적으로 네이티브 ES 모듈, 네이티브 ESM의 동적 Import, 그리고 import.met..

이런 문제점이 있었어요 브라우저에서 ESM을 지원하기 전까지는, 자바스크립트 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 따라서 개발자들은 번들링이라는 우회적인 방법을 사용했습니다(Webpack 같은). 하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 자바스크립트 모듈의 개수도 극적으로 증가하고 있습니다. 심지어 대규모 프로젝트에서는 수천 개의 모듈이 존재합니다. 이러한 상황에서 자바스크립트 기반의 도구는 성능 병목 현상이 발생되었고, 종종 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 한다거나 HMR을 사용하더라도 변경된 파일이 적용될 때까지 수 초 이상 소요되곤 했습니다. 이와 같은 느린 피드백 루프는 개발자의 생산성에 큰 영향을 줄 수 있습니다. 💡HMR 브라우저를 새로..

정렬 정렬은 요소들을 일정한 순서대로 열거하는 알고리즘입니다. 정렬 기준은 사용자가 정할 수 있으며, 크게 비교식과 분산식 정렬로 나눌 수 있습니다. 대부분의 언어가 빌트인으로 제공해주며, 삽입, 선택, 버블, 머지, 힙, 퀵 정렬 등 다양한 정렬 방식이 존재합니다. 상황에 따라서 적합한 정렬 방식이 있기 때문에 절대적으로 빠르다라고 말할 수 있는 정렬 방식은 없습니다. 비교식 정렬 버블 정렬: 서로 인접한 두 요소를 검사하여 정렬하는 알고리즘입니다. O(n^2)를 가집니다. 선택 정렬: 선택한 요소와 가장 우선순위가 높은 요소를 교환하는 정렬 알고리즘입니다. O(n^2)를 가집니다. 삽입 정렬: 선택한 요소를 삽입 할 수 있는 위치를 찾아 삽입하는 방식의 정렬 알고리즘입니다. O(n^2)를 가집니다. ..

이진 탐색 여러분이 보통 탐색에 많이 사용하시는 방법은 선형 탐색입니다. 즉, 순서대로 하나씩 찾는 탐색 알고리즘을 말합니다. O(n)의 시간복잡도가 걸립니다. 하지만 효율성을 높이기 위해서 우리는 정렬 되어있는 요소들을 반씩 제외하며 찾을 수 있습니다. 이것을 이진 탐색이라고 합니다. 이진 탐색은 **O(log n)**만큼의 시간복잡도가 걸립니다. 이진 탐색은 반드시 정렬이 되어 있어야 사용할 수 있으며, 만약 정렬이 되어있지않다면 선형탐색보다 더 많은 시간이 걸릴 수도 있습니다. 배열 혹은 이진 트리를 이용하여 구현할 수 있습니다. 배열 배열에서 요소를 찾으려면 시작 지점을 left, 끝 지점을 right라고 두며 mid = (left+right)/2 로 중간 지점을 표현합니다. 중간지점과 탐색할 요..

시간 복잡도 실행 환경과 메모리 사용량에 따라 프로그램의 성능은 다르기 때문에 성능을 정확하게 측정하는 것은 불가능합니다. 그렇기 때문에 대략적인 성능 비교를 위한 상대적 표기법인 빅오 표기법을 사용하기로 했습니다. // O(log n) 로그시간 for(leti=0; i