구성

STACK

React,TypeScript를 사용할것이다.
백엔드는 Firebase의 Firestore Database를 이용할 예정이다.

UI 디자인은 Chakra UI를 사용할 생각이다.
처음 써보는 거지만 공식문서를 보면서 하면 금방 늘것이다.

블로그인데 SSR 어딨음? 😡😡

블로그의 seo를 생각한다면 SSR인 Next.js로 만드는게 맞지만,
계속 클론만 하는것보다는 나만의 첫 웹 프로젝트를 해보싶다는 생각에
CSR에 CRA일지라도 일단 만들어보자고 다짐했다.
SSR이 필요하다고 몸소 느끼게 된다면 추가적인 기능들과 함께
Next.js로 다시 만들 예정이다.(현재 Next.js를 공부중이다.)

디자인 참고

메타의 엔지니어로 일하시는 분의 블로그(중국어라 이름을 모르겠다..)

인파님의 티스토리

나를 제외한 천재들님의 티스토리

블로그 개발의 첫걸음 🏠

Firebase

기본세팅

//firebase.ts

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const authService = getAuth();
export const dbService = getFirestore();
export const storageService = getStorage();

파이어베이스 프로젝트를 생성하고 코드를 작성한다.
.gitignore를 위해 .env로 작성한다.

Authentication

오직 나만을 위한 블로그이기 때문에 홈페이지 관리를 위한 어드민 계정 하나만 만든다.

Firestore Database

블로그에 필요한 컬렉션과 필드를 작성한다.

Notes

• title(제목)
• md(본문)
• category(카테고리,태그)
• createdAt(작성날짜)
• thumbnailURL(썸네일 URL)

Comments

익명 작성을 위해 작성자 이름과 비밀번호를 입력받음.
글의 아이디에 맞는 댓글들을 불러오기 위해 docId 를 저장.

• nickname(작성자 이름)
• password(수정/삭제용 비밀번호)
• comment(댓글)
• docId(글 id)
• edited(수정됨 표시 여부)
• avatar(댓글 아바타)

데이터베이스는 여기까지하고 추후에 필요한게 있으면 더 작성한다.

Router

CRA의 createBrowserRouter 를 사용할것이다.
필요한 screen 들을 미리 구상하자.

• Entry : 블로그의 글 페이지
• GuestBook : 방명록 페이지
• Home : 홈페이지 메인 페이지
• Notes : 글들 보여주는 페이지
• NotFound : 404
• Write : 마크다운 작성 페이지