다음의 프로젝트 개발환경과 전체 진행과정입니다. 이 글에서는 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 호스팅 서비스 사용
'sns 프로젝트' 카테고리의 다른 글
백엔드 개발 환경 설치 과정(Nodejs, express, Sequelize), CORS해결 (0) | 2024.01.21 |
---|---|
개인 sns 프로젝트 'NWITTER' 소개 (0) | 2024.01.21 |
재사용 컴포넌트 분리하기 (0) | 2024.01.20 |
Nwitter 디자인 (0) | 2024.01.20 |
React-query Infinite queries 도입하기 (0) | 2023.06.06 |