[ Next.js ] Server 컴포넌트 vs Client 컴포넌트 완벽 이해하기

[ Next.js ] Server 컴포넌트 vs Client 컴포넌트 완벽 이해하기

💡 Next.js(App Router) 환경에서 개발할 때 가장 먼저 마주치는 개념이 바로 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)입니다. 이 두 가지의 특징과 올바른 사용법을 핵심만 정리해 보겠습니다. 🔍 컴포넌트 비교Next.js는 기본적으로 모든 컴포넌트를 서버 컴포넌트(Server Component)로 인식 클라이언트 컴포넌트를 사용하려면 파일 최상단에 "use client"라는 지시어를 명시해야 합니다.구분Server ComponentClient Component기본 인식Next.js의 기본값파일 최상단에 "use client" 명시 필요주요 역할보안이 중요한 데이터 처리, API 호출, DB 직접 접근사용자 인터랙션(클릭, 입력..

  • format_list_bulleted FrontEnd/Next.js
  • · 2026. 6. 24.
[Next.js] App Router 기본 폴더 구조 및 핵심 파일 총정리

[Next.js] App Router 기본 폴더 구조 및 핵심 파일 총정리

파일 / 폴더 경로핵심 역할 및 설명비고 / 꿀팁src/app/layout.tsx애플리케이션의 최상위 공통 레이아웃. 헤더, 푸터, 네비게이션 등 전역 UI를 구성하며, 과 태그를 반드시 포함해야 합니다.SEO를 위한 전역 Metadata 설정도 주로 여기서 진행합니다.src/app/page.tsx루트 경로(/)에 매핑되는 메인 페이지 컴포넌트이자 서비스의 첫 화면입니다. src/app/globals.css애플리케이션 전역 스타일시트. Tailwind CSS를 사용할 경우, 최상단에 Tailwind 디렉티브(@tailwind)가 import되는 곳입니다.layout.tsx에서 이 파일을 import하여 전역에 적용합니다.src/app/error.tsx해당 라우트 세그먼트와 하위 페이지에서 에러가 발생했..

  • format_list_bulleted FrontEnd/Next.js
  • · 2026. 6. 24.
[Next.js] Could not create a project called... npm naming restrictions 에러 해결

[Next.js] Could not create a project called... npm naming restrictions 에러 해결

Could not create a project called "B02" because of npm naming restrictions: * name can no longer contain capital letters 🔍 원인npm 패키지 명명 규칙(naming restrictions)에 따라,Next.js 프로젝트 이름(또는 생성하려는 현재 폴더 이름)에는 대문자를 사용할 수 없습니다.터미널에서 . (현재 폴더)을 지정해 생성하려고 했을 때, 상위 폴더 이름인 B02에 대문자 'B'가 포함되어 있어 발생한 문제입니다. 💡 해결 방법폴더 이름을 모두 소문자로 변경한 뒤 다시 실행하면 정상적으로 생성됩니다.현재 폴더 이름을 소문자(b02)로 변경합니다

  • format_list_bulleted FrontEnd/Next.js
  • · 2026. 6. 24.
[ Grok ] Cli 설치

[ Grok ] Cli 설치

PowerShell 을 관리자 모드로 실행 irm https://x.ai/cli/install.ps1 | iex위 명령어 작성 위처럼 설치 후, grok 한번 더 작성 PowerShell 에서 위와 같은 화면 나오면서 브라우저가 켜지거나 새 탭이 열리며 위와같은 페이지가 나옴 Continue 버튼 클릭 Allow 버튼 클릭 완료

  • format_list_bulleted 알면 좋은 지식들
  • · 2026. 6. 23.
[ My-Finence ] v0.16.3

[ My-Finence ] v0.16.3

before after

  • format_list_bulleted Project
  • · 2026. 5. 4.

[ Project ] Cart ( 장바구니 ) 시스템

UI UX + CSS 는 ai 의 도움을 받았습니다 . 이번 경우에는, 파일 하나에 모든 코드가 들어있지 않고, 나눠서 작업을 했습니다. 1. cartMain.jsx ( Main이 되는 파일 )2. cart.jsx ( 장바구니 역할을 하는 파일 )3. products.jsx ( 상품 목록 파일 ) 일단 prop으로 다 넘겨줘야해서, products 인 경우 useState를 이용해서 cart.jsx & products.jsx로 넘겨주고 onAdd onSub onDel 함수 또한 메인에서 만들고 다 넘겨주고 각각 모듈에서 실행하게 만들어줬습니다. 이번 기회에, { spread, map, filter만 사용하던걸 Array.prototype.find를 이용하게 되었고 상황에 따라 사용하게 되었습니다.

  • format_list_bulleted FrontEnd/React
  • · 2026. 2. 20.