Nwitter 프로젝트 전체 진행과정

다음의 프로젝트 개발환경과 전체 진행과정입니다. 이 글에서는 react, typescript를 왜 선택했는지 상태관리를 왜 도입했는지 등 프로젝트에 대해서 크게크게 전체적으로 설명하기 위해서 작성하였습니다. 

프로젝트 개발 환경

---

 

- 프론트엔드 : React, Typescript, Redux, React-Query, SCSS

- 백엔드 : Node.js, Express.js, JWT, WebSocket

- 데이터베이스 : MySQL (Sequelize ORM 사용), Redis(채팅서비스)

- 클라우드 및 배포 : AWS, AWS RDS, Vercel (프론트엔드와 백엔드 코드 배포)

 

 

프로젝트 진행과정

---

 

 프론트 구축, SPA 도입 Typescript 설치

 

React를 선택한 이유 
- 기존에 html, 바닐라 js를 사용했을때 복잡하게 적어야했던 코드를 더 쉽게 구현할 수 있기 때문에

- 컴포넌트 재사용이 쉽기 때문에, 실제로 반복되는 tweet 박스 컴포넌트 분리를 통해서 편리함을 느꼈다

- react는 spa형식으로 화면의 필요한 데이터만 불러오기 때문에 처리 과정이 효율적이며 속도도 빨라 사용자 경험에서 좋기때문에

- 처음으로 개인 프로젝트를 진행하는 거였기때문에 많은 사람들이 사용하고 참고할 수 있는 문서가 많은 프래임워크를 선택하는 것이 중요했다.

 

 Typescript를 선택한 이유

-  typescript는 코드에 타입을 지정해 주는 기능을 가지고 있어 javascript의 버그를 줄여주고  코드의 가독성을 높일 수 있기 때문

-  데이터베이스에 데이터를 저장하고 다시 가져올때 type를 지정해두어 데이터관련 에러를 쉽게 해결하기 위해 

 

백엔드 구축, Node.js, express 설치 후 Mysql, ORM 도입

 

Nodejs, express 를 선택한 이유 

 

- Node.js는 JavaScript 기반으로, 프론트엔드 개발에 익숙한 개발자들에게 백엔드 개발을 더 쉽게 접근할 수 있게 해주기 때문. 

- Node.js는 NPM(Node Package Manager) 생태계를 보유하고 있어, 다양한 라이브러리와 툴을 쉽게 이용할 수 있기 때문에

- 다양한 기능을 사용할 수 있고 정말 많은 문서가 존재하였기때문에

 

MYSQL를 선택한 이유 

- 트윗 데이터를 가져올때 게시물, 댓글, 유저 반응 등 다양한 데이터가 관계를 맺고 가져와야했기 때문에 관계형 데이터베이스가 필요하다고 생각했다.

- 기존에 퀀트에 관심이 있어 mysql를 사용한 경험도 있고 무료에 다양한 문서가 존재한 mysql을 사용하게 되었다.

- 좀 더 직관적이고 편리하게 sql문을 사용하기 위해 orm 사용

 

레이아웃 형성 및 컴포넌트 분리

 

상태관리 도입 (Redux 도입 후 react-query 도입)

 

기능구현

• 회원가입 및 로그인 기능: jwt 토큰과 쿠키 사용 기반의 사용자 계정 생성 및 인증, 로그인 상태에 따른 라우팅 기능
• 게시물 업로드 기능 : formData, multer, mysql, sequelize 기반의 다양한 형식의 콘텐츠 업로드 기능
• 게시물 하단 부가 기능 : 리트윗, 북마크, 좋아요, 댓글 등의 트윗 게시물 하단 버튼 기능
• 북마크와 메모 기능 : 북마크 페이지 생성하여 북마크 데이터와 사용자 메모 연동 기능
• 페이지네이션 및 Explore 기능 : 페이지네이션, 무한스크롤, 최신순/인기순 정렬, 팔로우, SearchBar 검색 기능
• 메세지 채팅 기능 : websocket, redis기반의 사용자 간의 메세지 채팅 기능
• 프로필 관리 및 게시물 수정/삭제 기능 : 사용자 프로필 수정, 트윗 게시물 삭제 기능

코드 배포

 무료로 사용할 수 있는 vercel 선택 후 mysql db를 사용하기 위해 aws rds 호스팅 서비스 사용