기초

Next.js 14 기초 활용법

Next.js 14의 기초 활용법을 정리해봤다. 1. 프로젝트 만들기 create-next-app 을 활용해서 간단하게 프로젝트를 생성할 수 있다. npx create-next-app 명령어 입력 후 TS 사용여부, Tailwind 사용여부, App router 사용여부 등 물음에 답하면 그에 맞게 프로젝트를 생성해 준다. 2. CSS 스타일링 원하는 스타일링 방식(CSS-in-JS, CSS Modules, Tailwind 등)을 선택해서 사용하면 된다. 2-1. Global 스타일 모든 루트에 적용될 스타일을 global.css 파일에 적어 놓는다. 해당 파일을 루트 레이아웃에서 import해서 적용한다. /* /app/layout.tsx */ import '@/path/global.css' 3. 폰트..

웹 성능 최적화 - 기초, 분석 툴

인프런 '실전 웹 성능 최적화' 강의를 듣고 정리해 봤다. 해야하는 이유 사용자가 떠나지 않도록 FE 개발자로서 경쟁력 웹 성능 결정 요소 로딩 성능 (리소스 불러오기) 렌더링 성능 (리소스 화면에 그리기) 흐름 분석 -> 최적화 -> 결과 확인 분석 툴 성능 측정시에는 local이 아닌 production빌드 기준으로 검사한 것을 기준으로 해야한다. 크롬 Network 탭 어떤 리소스를 다운로드 요청했는지, 걸린 시간, 응답등을 확인할 수 있다. 크롬 Performance 탭 페이지가 로드되면서 실행되는 작업들을 타임라인과 차트 형태로 보여줌 history 보기 : 상단 드롭다운을 활용해 이전 검사 내역도 볼 수 있다. system 관련한 작업 안 보기 : 내 코드와 관련 없는 시스템 관..