REACT & NEXT

env 파일env 파일은 환경 변수를 정의하고 관리하기 위한 파일입니다. 개발 환경, 테스트 환경, 운영 환경 간의 설정값을 분리하여 사용합니다.환경변수 작성법API_URL=https://test.comNEXT_PUBLIC_APP_NAME=DEV_APP런타임 시에 값을 가져와야 할 경우는 NEXT_PUBILC_ 라고 시작해야 합니다.Next.js에서 env 파일 우선 순위.env.local.env.[NODE_ENV].local.env.[NODE_ENV].env[NODE_ENV]에 들어올 수 있는 값은 production, development, test 그 외에 staging 등등만약 동일한 환경변수가 각 파일마다 있다고 가정했을 때 최종 .env.local 파일에 있는 환경변수로 덮어쓰여집니다.실행 &..

React.js 에서는 css module 개념이 있는데 그 개념은 다음과 같다. 해당 CSS가 전역적으로 사용되지 않고 특정 컴포넌트에서만 독립적으로 관리할 수 있도록 도와주는 방법이다. 고유한 클래스 이름을 자동으로 생성하여 CSS가 의도치 않게 다른 부분에 영향을 미치는 것을 막을 수 있습니다.CSS 모듈의 특징고유한 클래스 이름 생성 (클래스 이름에 고유의 hash 값이 생성됨)컴포넌트 단위 스타일링파일 이름 규칙: .module.css or .module.scss사용법/* Button.module.css */.button { background-color: red;}// Button.jsximport styles from "./Button.css";function Button() { re..

CSR (Client Side Redering)클라이언트 측에서 렌더링 하는 방식초기 HTML 파일에는 간단한 뼈대만 제공 후 자바스크립트를 통해 클라이언트에서 동적으로 로딩SPA에서 사용CSR 장점페이지를 동적으로 업데이트할 수 있다클라이언트에서 처리하므로 서버에 부담이 적다초기 렌더링 후 페이지 전환이 빠름 (JS를 통한 동적으로 돔을 그려냄)기본 레이아웃 구조에서 필요한 컨텐츠만 로드할 수 있다 (ex: Header, Footer)CSR 단점SEO에 취약함 (정적 파일 HTML 안에서 안에 컨텐츠들만 동적으로 JS로 그려주다 보니 각 페이지에 대한 정보를 담기 힘들다)첫 로드시 브라우저가 모든 JS 파일과 데이터를 로드를 해야하기 때문에 초기 로딩속도가 느리다SSR (Sever Side Render..

next/image 기능lazy loading (이미지를 로드하느 시점을 필요할 때까지 지연)이미지 사이즈 최적화placeholer 제공 (이미지를 로드하기 전에 이미지 영역만큼 표시해 레이아웃 흔들림 방지)import Image from "next/image";const App = () => { return ( )}image 최적화 시점과 재사용요청이 들어왔을 때 dist 폴더 밑 cache/images 폴더에 최적화한 이미지를 동적으로 생성 한 뒤 이후에 동일한 요청에 대해서는 이미 만들어 놓은 최적화 이미지를 캐시로서 재사용한다.sharpnext.js는 Sqoosh를 기본 이미지 최적화 모듈로 사용하고 있고, 빠르게 설치할 수 있으면 개발환경에 적합하다고 한다. ..

next.js 에서 폰트 변경하는 법crate-next-app으로 next로 시작하게 되면 모든 google 폰트가 자동 배포가 포함되어 있다.next/fontnext/font를 사용하게 되면 폰트를 최적으로 로드할 수 있음모든 글꼴 파일에 대한 자동 자체 호스팅이 내장되어 있음브라우저 캐싱 & 프리로딩을 지원하여 페이지 로딩 속도를 높일 수 있음next/font/google구글 폰트의 CDN 서비스를 통해 폰트 불러옴SSR과 CSR 지원next/font/local웹 폰트 다운로드 시간 절약, 오프라인 사용 가능성 제공이미지와 마찬가지로 클라이언트 측에서 파일 다운 X, 페이지 로드 속도 향상import { Inter } from "next/font/google";const inter = Inter({ ..

Next.js 시작하기node 최신 버전 설치 (현 시점 기준 21.7.1)// 최신버전npx creact-next-app@latest프로젝트 이름타입스크립트 사용ESLint 사용Tailwind CSS 사용src/ 폴더 사용app router 사용절대 경로 커스텀 기호 사용보일러 플레이트 코드로 바로 사용 가능로컬에서 실행// 포트번호 3000npm run dev// 포트번호 변경"scripts": { "dev": "next dev -p 7777", "build": "next build", "start": "next start -p 7777", "lint": "next lint"}dev : 'next dev' 개발모드로 Next.js 를 시작하는 실행, source map..