728x90 분류 전체보기75 [Next.js+MongoDB] 게시판 북마크 기능 구현하기 (feat. App Router) 평소 메모장을 사용할 때 편리했던 기능 중에 하나인 '북마크 기능'을현재 리팩토링을 진행하고 있는 게시판 프로젝트에 적용해보고 싶었다 북마크 버튼을 통해 게시글을 북마크하고,북마크된 게시글을 최상단에서 볼 수 있는 기능을 구현하고자 한다.구현 화면 목차북마크 기능 구현 단계MongoDB를 활용한 API 세팅(Next.js App Router 를 사용한) UI 세팅 📌 북마크 기능 구현 단계북마크 기능을 구현하기 위해서는 아래 단계를 거치면 된다. 데이터베이스 내 게시글 데이터에 북마크 관련 필드를 추가한다북마크 여부를 저장하는 API 를 세팅한다UI 를 세팅한다 (→ 북마크 버튼, 북마크된 게시글이 최상단에 위치할 수 있도록 재정렬) 📌 MongoDB 를 활용한 API 세팅게시글 북마크 관련 필드.. 2024. 8. 24. [Next.js] App Router API 요청 방식 정리 (+ Pages Router와 비교) (feat. MongoDB) 최근 게시판 프로젝트를 다시 리팩토링하고 기능을 보강하는 작업을 진행하고 있는데,App Router 로 프로젝트를 작업했지만API 요청은 Pages Router 방식으로 작성이 되어 있어서App Router 방식으로 변경하고자 하였다. API 요청 방식을 다룬 글이 많이 없어서공식 문서를 뜯어보고 한참 헤매다가해결한 코드를 공유하면 좋을 것 같아서 글을 작성하게 되었다! (기존에 작성했던 Pages Router 방식과 비교해서 보여주면좀 더 이해하기 쉬울 것 같았다.) 목차API 파일 폴더 구조GET 요청POST 요청 (application/json , formData 요청 방식)DELETE 요청 📌 API 파일 폴더 구조Pages Router ver.Pages Router 에서는 api 파일을 [프로.. 2024. 8. 10. [TS] IndexedDB 공통 유틸: 구현과 사용법 (+ 기본 개념) 회사 프로젝트에서 Web Storage 로는 Local Storage 만을 사용하고 있었다.그러나 추후 Web Storage 에 저장해야 할 정보들이 많이 생겨날 것을 대비해,(Local Storage 보다) 더 많은 정보를 저장할 수 있는 IndexedDB 를 사용해보기로 했다. 모든 프로젝트에서 사용할 수 있게 공통화된 유틸을 작성하는 것이 필요했다.개인적으로 유틸을 완성하기까지 고군분투한 과정을 기록해보려고 한다🤣 목차IndexedDB 의 장점 및 특징CRUD 적용(TypeScript ver.) 예시와 주요 개념트러블 슈팅 경험 📌 IndexedDB ?IndexedDB 는 브라우저 내에서 구조화된 데이터 저장을 위한 API 이다.Local Storage 와 비교할 때 IndexedDB 가 가지는.. 2024. 7. 28. [Next.js] 확장성 높은 Layout 컴포넌트 구축하기 _app.jsimport Layout from "../components/Layout"export default function App({ Component, pageProps }) { const getLayout = Component.getLayout || ((page) => { page }) return getLayout()}Component 는 페이지를 의미한다.따라서, 페이지가 getLayout 을 가지고 있다면 그것을 보여주고, 가지고 있지 않다면 다른 구조를 보여주도록 조건을 주면 된다. [ 페이지 ]csr.jsimport Layout from '../components/Layout'import SubLayout from '../components/SubLayout'export defa.. 2024. 7. 21. 이전 1 2 3 4 5 6 ··· 19 다음 728x90
