프론트엔드 상태관리

상태: UI 렌더링에 영향을 주는 변경 가능한 데이터 / 상태 관리: 과도한 리렌더링을 막기 위해 잘 관리하는 것(종류 - local, global, server)목차1. 프론트엔드의 상태 1-1. 상태란? 1-2. 상태의 종류2. 상태(state) vs Ref3. 프론트엔드 상태관리4. React 기준 상태의 흐름 1. 프론트엔드의 상태1. 상태란?프론트에서 말하는 "상태"란 UI 렌더링에 영향을 주는 변경 가능한 데이터를 말한다.상태가 변경될 때마다 리액트는 그 상태를 가진 컴포넌트를 재렌더링하여 최신 상태로 유지하는데,따라서 이 상태를 어떻게 관리하느냐에 따라 서비스의 성능이 달라진다. 일반 변수와 다르게 상태는 아래와 같은 조건을 가진다.변경 가능 (mutable)React와 같은 프레..

요약- Next.js 16과의 호환성 문제로 기존 사용하던 스토리북8을 10으로 업데이트- 불필요해진 스토리북 패키지 삭제- svg 인식 에러 처리- 스토리파일 임포트 수정 목차1. storybook10 업데이트 배경2. .storybook/main.ts 수정3. SVGIcon.ts 수정4. *.stories.tsx 수정 1. storybook10 업데이트 배경Next.js를 업데이트 했으니 이제 버셀 에러에도 잡히는게 없겠지?후다닥 밀린 PR들을 리베이스하고 머지하자! 했는데 터져버린 스토리북.. 한동안 문제 없이 잘 쓰고 있었어서 내가 svgr 컴포넌트 추가했을 때의 충돌이나 초기 세팅 등 중간중간 어떤 문제들이 터졌었고 얼마나 해결이 잘 안됐는지 잊고 있었다. Next.js를 10으로 업데이트하면..

목차1. Next.js 16 업데이트 간단한 상황 정리2. next-env.d.ts 파일 변화3. lint4. 마무리1. Next.js 16 업데이트 간단한 상황 정리지난 4일, 분명 lint, build 검사를 무사히 통과한 내 커밋들이 push해서 pr이 되기만 하면 버셀 에러를 뱉는 걸 보고 이게 뭔가 했는데Next.js에서 심각한 보안 취약점이 발견되었다고 한다.https://news.hada.io/topic?id=24874 React와 Next.js에서 원격 코드 실행이 가능한 취약점 CVE-2025-55182( | GeekNewsReact 서버 컴포넌트에서 인증 없이 임의 코드를 실행할 수 있는 원격 코드 실행(RCE) 취약점이 발견되어 즉시 업그레이드 필요Next.js도 영향을 받으며, Ap..

목차1. 서버 객체 불러오기2. BASE_URL 상수 선언하기3. GET 함수 작성하기4. POST 함수 작성하기1. 파일 생성 및 서버 객체 불러오기1. route.ts 파일 생성Next.js의 api 파일을 작성하는 위치는 정해져있다.src/app/api 폴더 내에 작성되어야 하며, 파일명은 꼭 route여야 한다.src/app/api : Next.js가 API 요청을 처리할 엔드포인트로 인식하는 위치 (다른 위치에 두면 페이지/컴포넌트로 인식함)route.ts : App Router 기준으로, Next.js는 route.~ 파일을 해당 경로의 API 핸들러로 매핑하여 엔드포인트로 판단 2. 서버 객체 불러오기import { NextRequest, NextResponse } from 'next/ser..

Octoberse: A new developer joins Github every second as AI leads TypeScript to #1 Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1In this year’s Octoverse, we uncover how AI, agents, and typed languages are driving the biggest shifts in software development in more than a decade.github.blog ** 해당 글에서 2025란 2024년 9월 1일부터 2025년 8월 31일까지를 말함 ** 목차1. 2025년 GitHub 현황과..

목차1.Next.js App Router에서의 SSR2. SSR이 실행되는 흐름3. Card 컴포넌트로 보는 예시1. Next.js App Router에서의 SSRNext.js 13+의 app/ 디렉토리 구조는React Server Component 아키텍처에 SSR을 내장한 형태이다.→ "서버에서 컴포넌트를 렌더링하는 SSR"이 프레임워크의 기본 동작이라는 뜻 Next.js에서 SSR은 1. 서버 컴포넌트에서 데이터를 fetch하고2. 서버에서 HTML을 스트리밍 렌더링한 뒤,3. 클라이언트에서 hydration하는 과정 이 된다.2. SSR이 실행되는 흐름그럼 유저가 내가 만든 페이지의 메인(/)에 접속하면 Next.js에서는 어떤 일이 일어날까? 1. 요청 수신 ( Incoming Request )..

목차1. Next.js의 자동 최적화2. 자동 최적화 확인 방법3. 자동 최적화 작동 기준1. Next.js의 자동 최적화Next.js는 명시적으로 설정하지 않아도 자동으로 적용되는 최적화가 있다.페이지에서 SSR을 명시하지 않는다면, Next.js는 자동으로 해당 페이지를 정적 HTML로 사전 렌더링하여 SSG로 최적화한다.즉, 별도의 fetch 옵션 (cache: 'no-store', dynamic = "force-dynamic")이 없고, 데이터 fetch가 빌드 시점에 해결 가능하면 자동으로 SSG처럼 정적 생성이 되는 것이다. 정적으로 생성되어도 Next.js는 클라이언트를 hydrate하여, 유저와 페이지의 완전한 상호작용이 가능하다. 자동 최적화의 큰 장점은 최적화된 페이지가 서버측 계산 없..

목차1. Next.js 렌더링 전략2. SSG (Static Site Generation)3. ISR (Incremental Static Regeneration)4. SSR (Server Side Rendering)5. CSR (Client Side Rendering)6. 렌더링 조합 예시1. Next.js 렌더링 전략브라우저 상에 렌더링을 하는 여러 가지 방식들이 있다.여기서 언급하는 SSG, ISR, SSR, CSR은 각 렌더링 방식마다 장단점이 있어서, 페이지의 성격에 따라 더 알맞은 렌더링 방식을 선택해야 한다.페이지 성격권장 방식특징 및 구현변하지 않는 컨텐츠🟢 SSG (Static Site Gegeration)완전 정적 (빌드 시 1회 생성)export const revalidate = fa..

목차1. 프로젝트 세팅2. 실습 스크립트 작성1. 프로젝트 세팅1. 타입스크립트와 프리즈마 설치 및 초기화우선 타입스크립트와 프리즈마를 설치해줄 거다.npm install typescript ts-node @types/node --save-dev # ts 설치npx tsc --init # ts 초기화npm install prisma --save-dev # prisma 설치npx prisma init --datasource-provider sqlite # prisma 초기화 (sqlite 기반) 프리즈마 버전도 확인할 수 있다. prisma를 초기화 하면 prisma/, prisma.config.ts, env 파일이 생긴다. 이 때 prisma.config.ts 파일도 생성된 걸 확인할 수 있는데, ..

목차1. ORM이란?2. Prisma란?3. Prisma의 작동 흐름1. ORM이란?ORM(Object-Relational Mapping)은 데이터베이스의 테이블을 코드의 객체로 바꿔서 다루는 기술이다.SQL문이 ( SELECT * FROM users WHERE age > 20 ) 이라면,JS 코드로 아래와 같이 작성할 수 있다.const users = await prisma.user.findMany({ where: { age: { gt: 20 } },}); 이러면 Prisma가 SQL을 만들어서 DB에서 가져온다.2. Prisma란?Prisma는 Node.js, TypeScript 환경에서 사용하는 ORM 라이브러리이다.다음 세 가지 역할을 수행한다.구성 요소역할Prisma ClientDB에 쿼리를 ..

1. Chromatic에서 레포 선택 난 이피 프로젝트 추가하고 레포도 선택했는데 ACCOUNTS에 안뜨면 Check your permissions에서 추가하면 된다. 스토리북 선택한다. 이 명령어를 그대로 CLI에 입력한다. 열일하는중.. That's very nice! 배포된 스토리북 chromatic 홈 화면에서 프로젝트와 활동 내역 등을 확인할 수 있다. 여기까지만 하면 스토리를 하나 추가할 때마다 다시 빌드하고 배포해줘야하는데,사람이 스토리만 추가하면 자동으로 빌드, 배포를 해주도록 자동화를 해보자.https://www.chromatic.com/docs/github-actions/#available-options Why Chromatic? • Chromatic docsChromat..

목차1. 시간이 지나도 문제 없는 튼튼한 코드2. 수정 요청과 프론트엔드 개발자3. 도메인 중심 설계 ( Domain-Driven-Design )4. FSD로 도메인 중심 설계하기5. 폴더 구조 짜보기6. 내 생각1. 시간이 지나도 문제 없는 튼튼한 코드프론트엔드 오픈방을 보다가 발견한 블로그 글을 보면서 나름의 정리를 해보려는 글이다.요즘 프로젝트를 진행하며 클린 코드와 아키텍처에 집착하게 되는 것을 느낀다.하지만 이건 내가 제대로 진행하는 거의 첫 프로젝트라고 할 수 있다. (게다가 규모도 작지 않은) 내가 좋은 코드를 작성하고 있는지조차 잘 알 수가 없다.좋은 코드라는 것은 어떤 것일까?현재 진행중인 Linkiving을 리팩토링하기 이전에는 마감일이 다가올 수록 스파게티 코드를 만들었는데, 어떻게 ..