웹 개발 13

Next.js 프로젝트 생성

Next.js 개발을 위해 프로젝트를 생성했다. 참고로 노드 18.17 버전 이상이 설치되어 있어야 한다. (설치 방법: 2023.12.14 - [웹 개발] - 노드, NPM 최신버전 업데이트) 프로젝트 생성 적절한 폴더에서 터미널을 열어 다음 명령으로 간단하게 프로젝트를 생성한다. Next.js 프레임워크도 물론 포함된다. npx create-next-app@latest 원하는 프로젝트 이름을 입력하고 나머지는 엔터키로 넘어가면, 다음과 같이 프로젝트 생성 완료 메시지가 뜬다. 샘플 코드 생성된 프로젝트 폴더를 살펴 보면, app 폴더 안에 layout.tsx와 page.tsx가 만들어진 것을 볼 수 있다. (App Router 기준) layout.tsx import type { Metadata } f..

웹 개발 2023.12.14

노드, NPM 최신버전 업데이트

오랜만에 프론트엔드 개발을 하게 되어 노드와 NPM 업그레이드를 했다. Node Version Manager(NVM)를 사용했다. NVM 설치 터미널을 열어서 다음 명령으로 NVM을 설치한다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash 노드 최신버전 설치 NVM 설치 후 터미널을 닫았다가 다시 연 후에, 다음 명령으로 최신버전의 노드를 설치한다. node v21.4.0, npm v10.2.4 버전이 설치되었다. nvm install node nvm use node NPM 최신버전 업데이트 NPM을 최신버전으로 업데이트하기 위해 다음 명령을 실행한다. npm install -g npm@latest npm -..

웹 개발 2023.12.14

HTTP 캐쉬 직접 구현 (Angular)

프론트엔드에서 백엔드로부터 받은 request 결과를 캐싱함으로써 앱 성능을 높일 수 있다. 예를 들어, 이미 조회했던 상품 데이터를 다시 조회할 때, 매번 백엔드에 요청하지 않고 기존에 받은 내용을 보여줌으로써 불필요한 통신을 줄일 수 있다. 이미 웹브라우저 상에서 HTTP 캐싱이 이루어지고 있지만, 원하는 대로 캐쉬 사용이 불가한 등의 이유로 프론트엔드 상에서 (service worker 등을 사용하지 않고) 간단하게 직접 캐쉬 시스템을 구현할 때가 있다. 이러한 캐쉬 시스템은 데이터 종류마다 개별적으로, 즉, 상품 데이터 캐쉬, 사용자 데이터 캐쉬를 따로따로 만드는 것이 보통이다. 하지만, HTTP Request 처리단에 캐쉬 시스템을 구현하게 되면, 모든 요청들에 대해 자동으로 캐쉬를 적용하는 것..

웹 개발 2023.12.13