Next.js 3

[ React ] 자주 사용하는 코드 구성 요소 5가지_객체, 속성, 속성값, 인자, 매개변수

🧩 HTML/JSX에서는 속성(attribute)🧠 JavaScript 함수에서는 인자(argument) + 매개변수(parameter)⚛️ React에서는 속성이 props가 되어 함수의 인자처럼 전달됨1. 자바스크립트의 객체객체 안에 정의된 함수(동작)으로 데이터를 표현하고 조작하는데 필수적인 요소표현법] 객체명.속성명 객체명["속성명"]1.1 객체 (Object)키(key): 값(value) 쌍의 집합- **관련된 데이터(속성)와 기능(메서드)** 를 하나로 묶는 자료형const 객체이름 = { 키1: 값1, 키2: 값2, ... }; - 예시 ]const user = { name: "챗지회피티", age: 25}; 1.2 속성 (attribute)..

FrontEnd/React 2025.04.22

[ Next.js ] Book 기능사항 구현하기

utils -> http-commons.js 주소 변경하기store -> member -> useHook, app -> layout -> bookmarksrc -> member -> book -> isbn -> bookmark -> page구현 사항 - 기능: 등록/ 삭제/ 모두 삭제등록: 도서 상세 페이지에서삭제, 모두 삭제: 북마크 리스트 페이지에서 1. store > book-mark.tsxtodo1.제공할 상태와 상태를 변경할 함수에 대한 타입 설정하기todo2.createContext() 함수로 제공할 context 생성하기interface BookContextType { //todo1. 사용할 데이터 타입 정의 books: Book[];//여러 배열 가져오니까 [] 사용 registBookM..

FrontEnd/Next.js 2025.04.22

[ Next.js ] Router

1. 라우팅 ( Client-side routing )사용자의 요청(URL 경로)에 따라 어떤 화면 또는 기능을 보여줄지 결정하는 기술- 사용자가 페이지를 이동해도 전체 페이지를 새로고침하지 않고, 일부만 바꿔주는 방식- 대표적으로 React, Vue, Angular2. path='*'정확한 path 요청이 들어오면 해당 Component 로 분기하고, 그 외는 모두 처리하는 기법특정 URL 경로에 해당하는 컴포넌트를 매칭하는 라우팅 주소} />사용자가 /home 주소로 접속하면 컴포넌트를 렌더링함path="/": 루트 경로 (홈페이지)path="/about": About 페이지path="/user/:id": 동적 경로3. 동적 파라미터 } />/user/123 요청이 들어오면 컴포넌트가 뜨고, ..

FrontEnd/Next.js 2025.04.21