nextjs 레이아웃 구현4

• 

  [Next.js 탐험기] 5. Next.js + 티스토리 API 블로그 만들기 - 카테고리 페이지 만들기 서론 전 포스팅에 이어서 카테고리 페이지를 완성하겠다. 카테고리 페이지에서는 각 categoryId에 해당하는 글 목록을 보기 좋게 목록화 하여 표현해줄 것이다. 데이터 읽어오기 전 포스팅에서 언급한 것과 같이, next 13 버전에서는 getStaticProps같은 함수들을 지원하지 않는다. Data Fetching이 궁금하다면 공식문서를 참고하도록 한다. 여기서는 비동기 통신을 하는 것이 아니므로 getData 함수나 json파일을 변환해줄 필요없이 가져오기만 하면 된다. useSearchParams()을 통해 얻은 params는 get() 함수를 통해 필요한 파라미터를 선택하여 값을 받아올 수 있었고, 여기서는 categoryId 값을 받아 해당 위치에 존재하는 카테고리의 게시글 데이터를 가져온다... Framework/Next.js 2023. 11. 16.

• 

  [Next.js 탐험기] 4. Next.js + 티스토리 API 블로그 만들기 - app router 에서의 동적 라우팅 및 파라미터 사용법 서론 Pages Router에서는 next/router로부터 useRouter를 가져와서 사용했지만, App Router에서는 next/navigation으로부터 useRouter를 가져와야 한다. 또한 기존의 useRouter에서 제공하는 기능들 중 라우팅과 관련된 기능들만 담당한다. pathname, query와 관련된 기능은 next/navigation의 usePathname, useSearchParams로 분리되었는데, 사용법은 차차 탐구하기로 한다. 본 포스팅에서는 필요한 url을 얻어 사용할 것이다. 폴더구조 폴더구조는 아래와 같다. 본 프로젝트에서 사용하는 티스토리 블로그 카테고리는 서브카테고리까지 포함하여 2개의 카테고리까지만을 제공한다. 때문에 2 Depth 형식의 변화무쌍한 URI를 받.. Framework/Next.js 2023. 11. 15.

• 

  [Next.js 탐험기] 3. Next.js + 티스토리 API 블로그 만들기 - SideBar 구현 서론 이번 포스팅을 포함한 앞으로의 Next.js 탐험기 시리즈에서 Tistory OpenAPI와 PHP를 이용해 생성한 JSON 형식 데이터를 다룰 예정이다. 이 데이터는 Next.js 탐험기 프로젝트에 중요한 부분이므로, 관심 있는 사람들은 아래 연관 포스팅을 참조해 자신의 프로젝트에 적용해 볼 수 있다. 구체적으로, 자신의 티스토리 데이터를 src/app/data/ 디렉토리에 JSON 형식으로 변환하여 저장하는 방법을 설명할 것이다. 티스토리 OPEN API 사용해서 블로그 데이터 추출하기 서론 Nest.js를 사용해서 블로그 만드는 토이 프로젝트를 시작하면서, 실제 데이터를 쌓거나 가져올 스토리지 개념의 저장소가 필요했다. 다른 Next.js 개발자 분들은 Notion을 스토리지 개념으로 많 mi.. Framework/Next.js 2023. 11. 14.

• 

  [Next.js 탐험기] 2. Next.js + 티스토리 API 블로그 만들기 - 초기 구조 설계 서론 블로그에서 가장 널리 쓰이는 레이아웃은 바로 좌측에 메뉴를 배치한 SideBar, 상단에 네비게이션을 담당하는 Header(NavBar), 중앙에 본문 콘텐츠가 위치하는 Page(Main), 그리고 하단에 Footer가 위치하는 구조입니다. 이러한 구조는 사용자에게 친숙하며, 웹 사이트의 정보를 직관적으로 탐색할 수 있도록 돕습니다. 이번 포스팅에서는 Next.js를 활용하여 이와 같은 구조를 오마주하여 간단히 구현하는 과정을 거쳐보겠습니다. 프로젝트 생성 및 초기 설정 먼저 Next.js 프로젝트를 생성한다. 초기 생성에 관련된 블로그 게시글은 아래 참고 2023.11.09 - [Next.js] - [Next.js 탐험기] 1부: 프론트엔드의 새로운 물결 - 장단점과 설치부터 실행까지 [Next... Framework/Next.js 2023. 11. 9.