하루이의 개발 노트

프론트엔드 코딩 컨벤션함수명 | 변수명소문자 카멜케이스 사용: const helloWorld = () => {};배열 변수명 끝에 List:const helloList = ['hello', 'world'];boolean 변수는 is, has, can으로 시작:const isLoading = false;생성자는 파스칼케이스 사용:class HelloWorld {};상수는 대문자 스네이크 케이스:const HELLO_WORLD = 'helloWorld';리액트커스텀 훅은 use 접두사:const useCustomHook = () => {};고차 컴포넌트는 with 접두사:const withAuth = (Component) => (props) => { /* ... */ };이벤트 핸들러는 handle 접두사:..

Next.js 14.2.3 버전과 타입스크립트를 사용하여 프로젝트를 생성하는 방법을 설명.Next.js 14.2.3 버전과 타입스크립트 프로젝트 생성:npx create-next-app@14.2.3 my-nextjs-app --typescript여기서 my-nextjs-app은 프로젝트의 디렉토리 이름임. 원하는 이름으로 변경 가능함.프로젝트 디렉토리로 이동:cd my-nextjs-appTypeScript 설정 확인:프로젝트가 타입스크립트를 사용하도록 설정되어 있으며, tsconfig.json 파일을 확인하여 필요한 설정이 포함되어 있는지 확인함. 기본 설정은 다음과 같음:{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterabl..

서버 사이드 렌더링(SSR)서버 사이드 렌더링은 서버에서 페이지를 렌더링하고 완성된 HTML을 클라이언트로 보내는 방식임.Next.js 14 버전 이상 에서는 서버 컴포넌트를 활용하여 구현할 수 있음.장점SEO 친화적: 서버에서 완성된 HTML을 제공하므로 검색 엔진이 페이지를 쉽게 크롤링할 수 있음.빠른 초기 로딩 시간: 초기 페이지 로드 시 완성된 HTML을 제공하므로 초기 로딩 시간이 빠름.단점서버 부하 증가: 모든 요청에 대해 서버에서 렌더링을 수행하므로 서버 부하가 증가할 수 있음.느린 인터랙티브성: 클라이언트 측에서 추가적인 자바스크립트를 로드하고 실행해야 하므로 인터랙티브해지기까지 시간이 걸릴 수 있음.예제 코드 (Next.js 14.2.3):// app/page.server.jsimport..

프론트 엔드 프로젝트 구조src├── @types // TypeScript 사용 시 사용될 데이터들의 타입을 정의 │ └── @trandmirco│ └── react-sidenav│ └── index.d.ts├── Mock // 테스트 시에 사용될 테스트 데이터들이 존재 │ ├── CagongIntro│ │ ├── CagongIntro.module.css│ │ └── CagongIntro.tsx│ ├── ImageCardData.tsx│ └── Reviews.tsx├── api // 백엔드로 요청할 API들을 정의│ ├── cagong.api│ │ ├── cagong.api.tsx│ │ └── index.tsx│ ├── ind..