[새싹x코딩온] 웹 개발자 부트캠프 과정 | SoundSquad - 1) 프로젝트 시작, 설계
SoundSquad-back Github : SoundSquad - back Repository
Development Document Notion : Development Document
프로젝트 준비하기!
캠퍼스에서 두번째로 진행되는 프로젝트다. 이번에는 어느정도 함께 하려는 팀원을 정할 수 있는 방식으로 진행이 되었다.
이번에 같이 하시게 된 분들이 기존에 하고 싶으셨던 주제가 있으셔서 회의를 통해 그 주제로 진행하기로 했다.
공연을 보러갈 때, 혼자 보러가기 곤란하면! 같이 보러갈 사람들을 구할 수 있는 공간!
을 주제로 프로젝트를 진행해보고자 한다.
사용 기술
프론트엔드
- JavaScript
- React
- Axios
- React-Router
- React-query
- Tailwind / Sass
- Vite
- Figma
백엔드
- TypeScript
- Node.js
- Express
- Express-Session
- MySQL
- sequelize
- Postman
다양한 언어에 대한 적응을 경험해 보기 위해서, 이전 프로젝트에서 있었던 동적 타입에 관한 문제를 방지하기 위해서, TypeScript를 활용해 보고자 함.
주요 기능
어떤 공연에 대해서 동행자를 구하는지, 공연 정보와 아티스트의 정보를 열람할 수 있는 기능, 동행자를 구하는 기능, 어느정도의 커뮤니티 기능을 수행할 수 있게 게시판을 구현하고자 함.
데이터
외부의 OpenAPI를 활용하여 공연과 공연자의 데이터를 얻어오고자 했다. TicketMaster 의 서비스를 이용해 볼 계획이다.
React와 함께하는 첫번째 프로젝트
클라이언트-서버 구조
이번에는 프론트엔드에서 React 를 활용해 프로젝트가 진행되기 때문에, 템플릿 엔진을 사용해 SSR을 구현했던 저번 프로젝트와는 달리, CSR을 구현하게 될 예정이다.
그래서 이전 프로젝트와 다르게 주의해야할 점이 몇개 있었다.
- 리액트에서 사용하는 라우트 경로와, api의 라우트 경로가 겹치지 않게 설계할 것
- CORS 문제에 대비할것
- 구현된 컴포넌트가 각각의 기능할 수 있게, 컴포넌트에서 필요한 api들을 미리 설계해두기
- 회원 기능을 구현할 때, 상태관리를 어떻게 할 것인지
- 추가적인 상태관리 도구가 필요한지
같은 내용을 미리 계획해두고자 한다.
점심 뭐먹지