어떤 컴포넌트들이 리랜더링 되는지 확인 가능 문제점 현재 버튼값이 계속 리랜더링 -> 불필요한 랜더링 카운트만 바뀌면되는데 버튼이 리랜더링됨. 컴포넌트에서 불러온 스토어 값들중, 하나라도 변경되면 컴포넌트가 리랜더링된다. 전체 스토어 객체가 계속 불러와짐 (지금

zustand 기초

기초 1

app/├── shop/│ ├── layout.tsx│ ├── @modal/│ │ └── (..)product/│ │ └── id/│ │ └── page.tsx│ └── products/│ └── page

React는 컴포넌트가 리렌더링되면 그 안에 있는 모든 JSX를 다시 만듭니다!왜?실행 결과:실행 결과:컴포넌트가 리렌더링되면 → 안에 있는 JSX를 다시 만듦children은 이미 만들어진 것 → 다시 안 만듦!부모에서 만들어서 전달 → 최적화됨 ✅이제 이해되셨나요?

장점:클래스명 충돌 방지자동으로 고유한 이름 생성컴포넌트 단위 스타일링Streaming의 장점:전체 페이지를 기다리지 않음준비된 부분부터 보여줌사용자 경험 향상Parallel Routes 장점:여러 페이지를 동시에 렌더링각각 독립적인 로딩/에러 처리대시보드, 소셜 피드

형제 컴포넌트가 같은 상태를 공유할 때 공통 부모로 상태를 끌어올리는 패턴Metadata API: SEO를 위한 메타데이터 관리상태 끌어올리기: 컴포넌트 간 상태 공유의 기본 패턴SEO: JSON-LD 구조화 데이터로 검색 최적화환경변수: 보안과 환경별 설정 분리커스텀

1년차 프론트엔드 개발자의 Next.js 학습 여정 🔥오늘은 Next.js의 레이아웃 시스템과 React 상태관리 패턴을 함께 배워보았습니다!Next.js Layout과 Template의 차이점 완전 이해useState와 useReducer 언제 사용할지 판단 기준

📚 학습 목표 Next.js 파일 기반 라우팅 시스템 마스터 React 불변성과 상태 업데이트 완전 이해 동적 라우팅 실습으로 실무 능력 향상 📂 Part 1: 파일 기반 라우팅 시스템 🎯 전통적인 라우팅 vs 파일 기반 라우팅 전통적인 React 라우팅 (

🎯 학습 목표 Next.js의 두 라우팅 시스템 차이점 완전 이해 React useState의 배치 업데이트 메커니즘 마스터 실무에서 어떤 라우터를 선택해야 하는지 판단 능력 습득 📚 Part 1: Pages Router vs App Router 심화 분석 1

Next.js 프로젝트에서 Microsoft Graph API를 사용하여 회의실 일정을 가져오는 기능을 개발했습니다. 개발 모드(yarn dev)에서는 완벽하게 작동했지만, yarn build 후 프로덕션 환경에 배포하자마자 아래와 같은 에러가 발생했습니다. 이 문제

강의 출처: 풀스택 완성 Supabase로 웹사이트 3개 클론하기 (Next.js 14)/recoil/atoms.ts레이아웃에 provider 감싸주기provider 만들어주기레이아웃에 감싸주기

강의 출처: [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14) 개인적으로 정리했습니다! 'use server'은 뭘까? 서버 엑션 app/action.ts 원래는 api/user/route.ts 이렇게 api를 만들어서 app/user/page.tsx 하나하나 fetch 해야했음. 'use server'가 생기고...

next.js 1\. 그냥 파라미터에 바로 사용해도 나오는구나..useParams랑은 뭔차이일까?route.tsapi 구축가능한 파일https://nextjs.org/docs/app/api-reference/file-conventions/route이렇게 API

개인 또는 소규모 팀이 풀스택 개발을 하는데 필요한 대부분의 것들이 갖춰져있다.스타트업 or 개인 프로젝트 특성상 복잡한 요구사항이 생기기 쉬운데, 이를 대응하기가 훨씬 용이하다.보안상 이슈로 직접 서버구축을 해야할때, Supabases는 비교적 쉽게 이전이 가능하다

서버에서 클라이언트에 데이터를 보낼때 데이터가 너무 크면 잘게 쪼개서 물에 흐르듯 하나씩 보내준다!자체적으로 제공하고 있다.일단 뭐라도 보여줄 수 있음.즉시 보여줄수있는 것부터 보여준다.후에 비동기 페이지 컴포넌트가 랜더링되면 로딩후에 보여준다.dynamic페이지에서

루트 레이아웃서치바 레이아웃을 중복으로 받아오게된다.비효율을 줄이기위해\-> 클라이언트 라우터 캐시 중복된 레이아웃은 저장해두고 기타 페이지 서브 컴포넌트만 불러오게된다.

원티드에서 나오는 좋은 챌린지이다! 2월 교육도 나온 상황이니 신청 하실 분들은 빨리 신청!! [2월 교육 신청 링크: https://www.wanted.co.kr/events/prechallengefe_30] 목표: 시간을 아낄 수 있는 방법 1. 레거시를 다루는

🤓Frontend Fundamentals-toss로 공부하기 ⬇️궁금하신분들은 아래 주소로⬇️ https://frontend-fundamentals.com/ 토스에서 프론트엔드 개발의 기초/좋은 코드를 쓰는 방법에 대해 정리해두었다. 개발하면서 좋은 코드란 무엇

앱라우트 next.js는 페이지를 구성하고 있는 모든 컴포넌트들이 어떻게 동작하냐에 따라 자동으로 dynamic, static으로 설정하는 좋은 기능이 이미 있음기본값무조건 다이나믹 페이지가 된다.페이지를 강제로 Static 페이지로 설정페이지 쿼리스트링들은 무조건 u