Timo (8) 썸네일형 리스트형 Next.js 훑어보기 [React랑 뭐가 다르지?]React에서는...// React (CSR)const [users, setUsers] = useState([]);useEffect(() => { fetch('/api/users') .then(res => res.json()) .then(data => setUsers(data));}, []);브라우저에서만 실행되는 useEffect와 useState.. 사용자가 페이지에 들어오고 나서야 데이터 요청이 시작되므로 처음 화면이 뜰 때는 항상 빈 상태이다. Next.js App Router에서는 2가지 선택지가 있다. 1. Server Component에서 fetch (초기데이터, SEO 필요할 때)// app/home/page.tsx — 서버에서 실행됨export .. [초기세팅] Sentry & 디스코드 웹훅 연동 [Sentry가 뭘까]배포 후에 유저가 쓰다가 에러가 났을 때 개발자가 모르면 안되겟지. Sentry는 에러가 나면 자동으로 수집해서 알려주는 모니터링 도구이다. 유저 브라우저에서 에러 발생 ↓Sentry가 자동으로 수집 ↓개발자 대시보드에서 확인 or 디스코드로 알림어떤 파일 몇 번째 줄인지, 어떤 브라우저인지, 몇 번 발생했는지 다 보여준다. 대체제가 딱히 없고, 에러 발생 즉시 디스코드 알림으로 오게 할 수 있어서 채택. [작업 순서]@sentry/nextjs 설치pnpm add @sentry/nextjs .env.local에 DSN 추가(sentry 회원가입 필요)런타임별 초기화 파일 추가app/global-error.tsx 추가next.config.js에 withSent.. [초기세팅] Husky·Prettier·ESLint 설정 [전체 흐름]git commit 입력 ↓Husky가 가로챔 ↓lint-staged 실행 (변경된 파일만 대상) ↓Prettier → 코드 포맷 자동 정리ESLint → 코드 규칙 위반 자동 수정 ↓문제 없으면 커밋 완료 / 있으면 차단 [Husky가 뭘까] Git에는 특정 시점에 자동으로 스크립트를 실행할 수 있는 기능인 훅!이 있다. pre-commit 훅 = 커밋 직전에 실행 Husky는 이 Git 훅을 프로젝트 코드로 관리할 수 있게 한다. pnpm install만 하면 자동으로 훅 등록 !☆ Husky는 Git의 Hook을 프로젝트에 설정해 커밋이나 푸시 전에 원하는 작업을 자동으로 실행하는 도구이다. [lint-staged가 뭘까]git add한 파일들에만 lint를 돌.. CI로 성능 관리 자동화: Lighthouse CI와 번들 사이즈 분석 [번들 뭔데 신경써야될까?]Next.js는 내가 작성한 코드의 의존성을 분석해서 브라우저가 실행할 수 있는 JS 파일들로 변환해준다.이 과정에서 코드를 여러 개의 청크로 쪼개서 필요한 것만 그때그때 불러옴. 이 결과물이 번들!! 번들이 크면 유저가 페이지 처음 들어올 때 JS 파일 다운받는 시간이 길어짐. → 번들 크기 모니터링 중요 ! [gzip이 뭘까]서버가 브라우저한테 JS 파일 그냥 보내지 않음. gzip으로 압축해서 보내고 브라우저가 압축 풀어서 실행함. → 실제로 네트워크에 전송되는 크기가 gzip 크기 [webpack이랑 turbopack은 뭘까]둘 다 번들 엔진 = Next.js가 내 코드를 브라우저용 JS로 변환할 때 쓰는 도구인 것. webpack: 라우트별 청크 파일을 직접 읽어.. [초기세팅] TanStack Query & Axios 초기 세팅 [뭐부터 먼저하지]Tanstack Query & Axios 설정이랑 Sentry 설정했어야 했는데Sentry는 에러 모니터링 도구라 실제 API 호출 흐름이 있어야 의미가 있었다. → Axios interceptor에서 에러를 잡아서 Sentry에 보낼거라 Tanstack 설정 먼저 함. [Axios와 TanStack Query를 왜 쓰냐]원래 fetch로 데이터를 받아올 수 있는데fetch는 요청이 실패했을 때 자동으로 에러를 던져주지 않아서 매번 직접 처리해야 함. // fetch 사용 시const res = await fetch('/todos')if (!res.ok) { if (res.status === 401) // 직접 처리 if (res.status === 404) // 직접 처리}근.. turbo gen 명령어로 컴포넌트 생성하기 turbo gen 어떻게 사용하는거냐.. [폴더 구조]turbo/generators/├── templates/ # 실제로 생성될 파일의 "틀"│ ├── component/│ │ └── component.tsx.hbs # 컴포넌트 템플릿│ └── page/│ └── page.tsx.hbs # 페이지 템플릿└── config.ts # "어떤 질문 하고, 어디에 파일 만들지" 정의config.ts : 총괄 설정 .hbs 파일 : Handlebars 템플릿, {{pascalCase name}} 같은 자리에 나중에 입력값이 들어감. [명령어]① 컴포넌트 만들기 (packages/ui/src/ 아래에 생성)pnpm generate:compo.. [초기세팅] GitHub Actions로 Discord 알림 자동화 GitHub 이벤트를 discord 알림으로 보내자 [GitHub Actions와 Discord Webhook]GitHub Actions : 레포지토리에서 특정 이벤트가 발생했을 때 자동으로 실행되는 워크플로우 .github/workflows/ 폴더에 yml 파일을 두면 GitHub이 알아서 읽고 실행Discord Webhook : 특정 URL로 HTTP POST 요청을 보내면 Discord 채널에 메시지가 올라감 GitHub Actions 워크플로우 안에서 curl로 이 URL 호출하면 됨. [핵심 흐름]GitHub 이벤트 발생→ Actions 워크플로우 트리거→ $GITHUB_EVENT_PATH에서 이벤트 데이터 파싱→ Discord Webhook으로 메시지 전송 1단계: 기본 워크플로우 구성처음에.. [초기세팅] Turborepo + 모노레포 [모노레포가 뭘까?] 하나의 레포 안에서 코드를 역할별로 나눔 나누는 단위 = 워크스페이스 패키지 우리 프로젝트 기준으로는 실제 서비스(apps/timo-web)는 하나고, 공용으로 뺄 수 있는 것만 packages로 분리함.packages/ui — 디자인 시스템packages/eslint-config — ESLint 설정 (base / next / react-internal)packages/typescript-config — TS 설정 (base / nextjs / react-library)[모노레포 vs 멀티레포]우리 프로젝트에 관리자 페이지가 있는 것도 아니고 앱이 하나뿐이라 표면적으로는 멀티레포와 비슷해 보이지만패키지 간 연결 방식과 변경 반영 속도에 차이가 있다. 멀티레포에서 디자인 시스템을 별.. 이전 1 다음