Web/react

[Next.js] Next.js + TypeScript + Tailwind CSS 관리자 페이지 만들기 2

프로젝트 시작생성npx create-next-app@latest 선택한 옵션TypeScriptApp RouterTailwind CSSsrc 구조 처음 만난 에러Missing and tags in the root layout처음 실행하자마자 만난 에러. 원인App Router에서는:layout.tsx가 HTML 뼈대 역할을 한다. 그래서 반드시:태그가 필요했다. 수정export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( {children} );} App Router 구조 이해하기예전 React처럼:“컴포넌트만 만들면 되는 구조”가 아니라,폴더 구조 자체가..

[Next.js] Server vs Client Component 완전 정리

Next.js를 처음 배우면 가장 많이 헷갈리는 개념이 있다.“서버에서 데이터 쓰는 것도 서버 컴포넌트 아닌가?”“수정 페이지도 데이터 보여주는데 왜 Client야?” 이 글은 이 혼란을 완전히 정리하기 위한 내용이다. 1. 핵심 개념: 기준은 “데이터”가 아니라 “실행 위치”Next.js에서 Server / Client를 나누는 기준은 단순하다.Server / Client 구분 기준 = 어디서 실행되느냐 ✔ Server Component서버에서 실행됨HTML을 만들어서 브라우저로 전달데이터 조회에 최적화👉 특징useState ❌onClick ❌useEffect ❌“그냥 화면 만들어서 보여주는 역할” ✔ Client Component브라우저에서 실행됨사용자 인터랙션 처리상태 관리 가능👉 특징..

[Next.js] Next.js + TypeScript + Tailwind CSS 관리자 페이지 만들기 1

대상이 문서는 아래와 같은 사람을 기준으로 설명합니다.HTML/CSS는 익숙하다JavaScript는 초급 수준이다React를 아주 조금 들어봤다Next.js는 처음이다실무 스타일의 관리자 페이지를 만들어보고 싶다 지금까지 만든 것나는 현재 아래 기능까지 만들었다./admin/admin/ads/admin/ads/[id] 즉,대시보드광고 목록광고 상세이 흐름을 만들었다.그리고 아래 기술들을 사용했다.Next.jsTypeScriptTailwind CSSApp RouterDynamic Routelayout.tsxmap()LinkusePathname() Next.js란?Next.js는 React 기반 프레임워크다. 쉽게 말하면:React를 더 실무적으로 편하게 쓰게 해주는 도구라고 생각하면 된다. 예를 들면..

[Next.js] 초보의 관리자 페이지 만들기 시작기

설치부터 레이아웃, 목록/상세/수정/등록 흐름까지 이번에 관리자 페이지 작업을 하게 되면서 Next.js를 처음 제대로 만져보게 됐다.원래는 React를 아주 조금 알고 있었고, HTML/CSS는 익숙한 편이지만 JavaScript와 Next.js는 거의 초보 수준이었다. 처음에는 “이걸 다 새로 만들어야 하나?”라는 막막함이 있었는데,실제로 하나씩 부딪혀보니 Next.js는 폴더 구조와 페이지 흐름을 익히는 것부터 시작하는 게 중요하다는 걸 느꼈다. 이번 글은 내가 로컬에 Next.js를 설치하고, 관리자 페이지의 기본 흐름인목록 → 상세 → 수정 → 등록구조를 만드는 과정까지 정리한 기록이다. 1. 로컬 환경 세팅먼저 Node와 npm 버전을 확인했다.node -vnpm -v 내 환경은 아래와..

[Next.js] 프로젝트 시작하기

먼저 확인할 건 Node.js 버전이다.현재 Next.js 공식 설치 문서는 최소 Node.js 20.9를 요구한다. create-next-app으로 시작하면 기본적으로 TypeScript, Tailwind CSS, ESLint, App Router, Turbopack 등을 선택해서 만들 수 있다. 터미널에서 원하는 위치로 이동한 다음:npx create-next-app@latest admin-next 질문이 나오면 이렇게 고르면 된다.TypeScript → YesESLint → YesTailwind CSS → Nosrc/ directory → YesApp Router → YesTurbopack → Yesimport alias → No설치 끝나면:cd admin-nextnpm run dev 브라우저에서h..

[Next.js] 공부 시작 전, 내 현재 수준과 학습 방향 정리

요즘 Next.js를 공부해보려고 한다.예전에 React 강의를 조금 들은 적이 있어서 프레임워크의 아주 기본적인 개념은 어렴풋이 알고 있지만, JavaScript는 아직 초보다. 대신 HTML과 CSS는 꽤 익숙한 편이다.그래서 내 목표는 “Next.js를 깊이 있게 마스터하는 것” 보다는,우선 Next.js로 웹사이트 프론트엔드를 직접 만들 수 있는 수준까지 가는 것이다. 내 현재 상태 지금 나의 상태를 정리하면 이렇다.HTML / CSS는 능숙하다JavaScript는 초보다React는 아주 조금 접해봤다프레임워크의 개념은 살짝 알고 있다목표는 실제로 웹사이트를 구현할 수 있는 프론트엔드 개발 수준이런 경우에는 처음부터 너무 어려운 개념을 한꺼번에 집어넣기보다,필요한 만큼만 순서대로 ..

[리액트] Hooks 알아보기

useState 상태(state) 관리를 위한 Hook. 함수형 컴포넌트에서 상태 변수와 해당 상태를 업데이트하는 함수를 제공한다. 컴포넌트의 상태를 변경하고, 변경된 상태를 화면에 렌더링할 수 있다. import React, { useState } from "react"; const Counter = () => { //count: 변수, setCount: 상태 업데이트 하는 함수 //=> 배열 비구조화 할당을 통해 각각의 값을 추출해서 사용 const [count, setCount] = useState(0); const increment = () => { setCount(counst + 1); }; return ( Count: {count} Increment ); }; useEffect 생명주기(lif..

[리액트] Redux Toolkit 사용해서 Counter 만들기

패키지 설치 # Yarn # redux 관련 yarn add react-redux @reduxjs/toolkit redux-devtools-extension # 추가 패키지 yarn add react-router-dom sass styled-components 패키지 이름 설명 react-redux 리액트에서 redux를 사용할 수 있도록 해주는 컨테이너. redux에 의존한다. @reduxjs/toolkit 리액트에서 리덕스를 좀 더 간결하게 사용할 수 있도록 하는 최신 패키지 redux-devtools-extension 리덕스의 상태를 크롬브라우저 개발자도구에 설치된 확장 기능과 연동할 수 있게 해주는 미들웨어 react-router-dom SPA앱을 만들 때 사용. URL에 따라 실행할 Javasc..

[리액트] Redux

1. Redux? 리액트 전역 상태 관리 라이브러리 여러개의 컴포넌트가 개별적으로 관리하는 상태값들을 하나의 파일에 모아서 통합 관리하는 것이 목적 컴포넌트끼리 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다. React나 다른 뷰 라이브러리와 함께 사용할 수 있다. 2. Redux 기본 요소 Slice 리덕스에서 관리하고자 하는 상태값과 상태값 갱신 기능을 포함하는 단위 모듈 상태값 - 리덕스를 통해 관리하고자 하는 전역 상태값 리듀서 - 상태값을 갱신하기 위한 함수(=액션함수)들을 포함하고 있는 모듈 액션함수 - 리듀서에 포함된 메서드들로서 상태값을 갱신하는 역할을 수행한다. Store Slice를 저장하고 있는 통합 모듈 이 모듈을 ReactA..

[리액트] export와 export default의 차이

리액트에서 export와 export default는 모듈을 내보내는 데 사용되는 키워드이다. 이 두 키워드를 JavaScript 모듈 시스템에서 사용되며, 다른 파일에서 해당 모듈을 가져와 사용할 수 있도록 한다. export 👉 import 시 { 함수이름 } ~ 로 불러온다. export default 👉 import 시 { } 가 필요없다. export export는 모듈에서 특정한 요소(함수, 변수, 클래스 등)를 내보내는 역할을 한다. export 키워드를 사용하여 특정 요소를 내보내면, 해당 요소는 다른 파일에서 import 키워드를 사용하여 가져올 수 있다. export는 여러 개의 요소를 동시에 내보낼 수 있으며, 내보낸 요소들은 이름을 가지고 있어야 한다. 이러한 요소들은 가져올 때 동..