FrontEnd/Next.js 3

[ 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

[ Next.js ] Axios

1. Metadata페이지에 대한 정보를 브라우저나 검색엔진에게 알려주는 역할html로 rendering될 때 head의 title과 meta를 생성하는 기능server component임 (client component: useState 등의 함수)page or layout에 metadata를 생성할 수 있다.전역으로 app에 설정할 수 있고 local로 각 routing 마다 설정할 수 있다.1. Metadata 종류 HTML의 과 요소를 TypeScript로 다룰 때 정확한 타입을 지정하기 위한 용도app > layout > ,,,중첩돼서 들어감 > {children}HTMLINputElement / HTMLTextraElement2. 타입 대상 HTML 태그 주요 속성HTMLInputEleme..

FrontEnd/Next.js 2025.04.17