[Toy Project 기록하기 1] 커뮤니티 사이트 기획하기

프론트엔드와 백엔드를 모두 스터디했으니 토이 프로젝트를 통해 점검해 보는 시간을 가져야겠죠!

 

많은 분들이 쉽게 접근할 수 있으면서, 오래 머무를 수 있는 사이트는 어떤 종류의 사이트가 있을까 생각을 하다가 단연코 커뮤니티 사이트를 떠올리게 되었습니다. 그중에서도 전문 관심 분야를 가진 사이트로 세분화하는 것이 좋을 것 같아 제가 관심 있는 클라이밍을 주제로 하여 클라이밍 커뮤니티 사이트를 기획하게 되었습니다.

 

본격적으로 사이트를 만들기 전에 전체적으로 필요한 기술 스택과 기능에 대해서 조망해 보고 앞으로 어떤 과정을 통해 프로젝트를 구축해 나갈지 기획하는 시간을 갖겠습니다.

 

 

 

---

 

사이트 개요

클라이밍에 관심이 있는 사람들이 클라이밍에 관련된 글과 사진을 올리고 이를 공유할 수 있는 게시판 만들기

 

 

사용할 기술 스택

Frontend

React

Typescript

react-query

 

Backend

Express

Node.js

MongoDB

 

주요 기능

✅ 는 구현 방식을 이미 결정했으며

❓ 는 구현 방식을 비교 후 적용할 계획입니다.

 

 

Auth 관련

- 회원가입

   - ✅ react-hook-form 라이브러리 활용하기

- 로그인

    - ❓ 세션 기반 인증 방식 vs 토큰 기반 인증 방식

- 이메일 인증

    - ✅ Mailtrap 활용하기

- 비밀번호 찾기

 

Feed 관련

- 게시글 CRUD

- 이미지 업로드하기

    - ✅ multer 라이브러리 활용하기

- 좋아요, 댓글 기능

- 페이지네이션

    - ❓ offset 방식 vs cursor 방식

 

 

프로젝트 셋팅

2023.01.08 - [Frontend/일요스터디] - [MERN] MongoDB + Express + React + Node + Typescript 백엔드 설정하기

[MERN] MongoDB + Express + React + Node + Typescript 백엔드 설정하기

지난번 진행했던 MERN 백엔드 설정을 바탕으로 프론트엔드 설정은 여기에 CRA를 추가했습니다.

CRA로 프로젝트를 만들었기 때문에 특별히 많은 설정이 필요하진 않았습니다.

 

 

1. CRA로 새 프로젝트 만들기

npx create-react-app doljabee-fe --template typescript

 

2. react-router-dom 설치하기

npm i react-router-dom

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

3. 라우터 설정하기

// src/App.tsx

import { Route, Routes } from 'react-router-dom';
import Home from './Home';

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />}></Route>
    </Routes>
  );
}

 

프로젝트 셋팅은 여기까지입니다.

다음 포스팅부터는 기획해 둔 주요 기능을 위주로 개발하면서 그 과정에서 겪는 고민들과 문제들을 공유하겠습니다. 

 

🧗‍♀️ 제가 진행한 프로젝트가 궁금하다면

🔽 프론트엔드는 이곳에서 확인하실 수 있습니다.

https://github.com/Team-Madstone/doljabee-fe

GitHub - Team-Madstone/doljabee-fe: Climbing Community

 

🔽 백엔드는 이곳에서 확인하실 수 있습니다.

https://github.com/Team-Madstone/doljabee-be

GitHub - Team-Madstone/doljabee-be: Climbing Community