안녕하세요

목차 1. Next.js에서 MongoDB 연결하기 설치 연결 Type 세팅 2. DB collection에 데이터 삽입 및 출력 3. DB에서 요청한 데이터로 게시물 목록, 게시물 상세 구현 요청할 데이터의 필드 제한하기 collection Type 에러 해결 Type extends findOne Type 에러 해결 1. MongoDB와 타입스크립트를 쓰기 위해 필요한 설정을 해봅시다. MongoDB를 설치합니다. npm install mongodb 타입스크립트로 진행하기 위해서는 mongodb에도 타입을 지정해주어야 합니다. MongoDB 에 연결하기 위해서는 다음과 같이 작성하면 됩니다. // src/utils/db/db.ts import { MongoClient } from "mongodb"; c..

목차 1. 네비게이션, 푸터 레이아웃 + 사이드메뉴 대략적인 스타일 page, layout, component는 각각 하나의 역할만 2. 게시물 카드(목록) 스타일 구현 3. 게시물 상세 스타일 + 라우팅 1. 네비게이션, 사이드메뉴, 푸터 레이아웃 사이드 메뉴 fixed로 왼쪽에 고정을 해준다. side menu의 width를 기준으로 레이아웃이 배치될 수 있도록 네브헤드, 메인, 푸터는 왼쪽을 --w-nav-side만큼 비워주도록 한다. 호버 효과를 mixin으로 만들어 준다. (*앞으로는 모든 hover 효과는 hover mixin에서 관리하도록 합니다.) @mixin hover($bg: #369) { transition: background 0.3s; cursor: pointer; &:hover ..

목차 0. 프로젝트 설계 1. 블로그 프로젝트를 구상한 이유, 목표 2. 사용할 주 기술 Sass(SCSS) vs styled-components Node.js + React vs Next.js 3. 폴더 구조 0. 블로그에 필요한 기능을 나름대로 설계해보았다. 설계를 하면서 느낀 것이지만, 블로그는 참 정적이다 api 요청할 일이 별로 없다. 게시물(작성, 조회, 검색, 좋아요, 수정, 삭제), 댓글(작성, 조회, 수정, 삭제) 1. 블로그 프로젝트가 만들고 싶은 이유, 목표 (2023.09.09~) 기존에 만들었던 사이트들은 페이지가 독립적인 정보를 지니고 있으며 상호작용이 거의 없었다. A페이지에서 수행하는 작업은 오로지 A데이터를 전달하면 될 뿐이고, B페이지는 단지 B데이터를 필요로 한다. A-..