[여기다] 프로젝트 기획 및 설계

 

1차 프로젝트가 끝나고 약 한달 뒤 자율 주제로 2차 프로젝트가 시작되었다. 1차 프로젝트의 경험 덕분에 2차 프로젝트를 할 때 좀 더 적극적으로 회의를 하고 아이디어도 내보고 기여를 많이 해야겠다는 의욕도 생겼다. 이번 프로젝트를 통해 포트폴리오로 만들고 싶고, 기록을 많이 남겨서 문서화를 꼭 해두고 싶다.

 

 

1.  프로젝트 소개

프로젝트의 주제를 정하였지만 오피스아워로 코치님의 피드백을 받고 나니, 다른 팀과 차별화된 기능이 없다고 느껴져서 다시 모여 프로젝트의 주제에 대해서 생각해보고, 브레인 스토밍을 해 보았지만 꽂히는 아이디어가 없어서 마무리 하고 내일 아침 스크럼 시간까지 다시 생각해보고 정하기로 하였다.

 

1-1. 진행기간

2023년 12월 11일 ~ 2023년 12월 29일 

 

1-2. 팀원 포지션

8팀의 팀원은 총 6명으로 다같이 프론트엔드와 백엔드 포지션을 같이 담당하기로 하였으나, 코치님께서 깃 관리의 문제로 포지션을 나누는게 더 좋을것 같다고 하셔서 이 부분 또한 다시 팀원과의 의논이 필요할것 같다.

 

 

1-3. 기술 스택

무작정 좋아보여서, 많이 사용해서가 아닌 다른 기술과 비교를 하고 어떤 장점이 있는지 찾아본 후에 우리에게 더 적합하고 맞는 이유를 타당히 밝혀 기술을 정하였다.

 

 ✏️ Front-end

 

React

컴포넌트로 재사용성 용이하며 코드의 양을 줄일 수 있고 단방향 데이터 흐름으로 흐름 예측에 용이하며 오류를 찾아내기 쉽다. 또한 리액트가 나온지 약 10년정도 되어 많은 양의 정보와 커뮤니티 활성화가 잘 되어 있어 선정하게 되었습니다.

 

개발 언어 : TypeScript

정적 타입으로 오류를 방지하고, 에러 메세지가 더 구체적이면서 오류 추적도 뛰어나서 디버깅 시간이 줄어듭니다. 또한 현업에서 TypeScript를 사용하기 때문에 취업준비를 위해서 TypeScript 사용에 능숙해지고 싶은 이유와 팀원들과 TypeScript를 함께 공부하고, 코드를 리뷰하면서 실력을 키울 수 있는 좋은 기회가 될 것이라 생각하여 선정하게 되었습니다.

→ 타입스크립트 처음 사용해보는 팀원이 절반이라 개발이 늦어질 수 있는 어려움과 이슈가 있어서 자바스크립트로 변경하였다.

 

스타일 : Tailwind CSS

Tailwind CSS는 클래스 이름을 고민할 필요가 없기 때문에 빠르게 구현에 초점을 둘 수 있어 개발 시간을 단축할 수 있고 반응형 디자인을 구현할 때 미디어 쿼리를 직접 작성하는 대신, 프리셋 클래스를 사용하여 간편하고 직관적으로 반응형 레이아웃을 구현할 수 있습니다.

 

상태 관리 라이브러리 : Recoil

리액트 hook과 유사한 사용 방법으로 학습 하는데 시간이 많이 들지 않고 바로 적용할 수 있고 짧은 프로젝트 기간인 만큼 리코일이 상대적으로 Redux에 비해 적는 코드가 적기 때문에 Recoil이 더 빠르게 개발할 수 있다. 또한 Recoil은 내부적으로 캐싱을 지원하며 동일한 atom 값에 대해 내부적으로 메모이제이션된 값을 반환하여 속도가 빠르다는 장점으로 선정하게 되었습니다.

 

서버 통신 라이브러리 : react-query

한번 요청한 데이터는 설정에 따라 캐시 할 수 있기 때문에 반복되는 요청을 줄이고 캐시된 데이터로 빠르게 페이지를 렌더링 할 수 있다.  React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이며, Hook 을 사용하여 React Component 내부에서 자연스럽게 서버의 데이터를 사용할 수 있는 방법을 제공한다. 리액트 쿼리는 클라이언트 측에서 상태 및 데이터를 관리하면서, 필요에 따라 서버와의 통신을 통해 데이터를 가져오는 기능을 제공합니다. 이를 통해 클라이언트와 서버의 데이터를 명확하게 분리할 수 있어 관리 하기 용이해 진다고 판단 했습니다.

 

---

 

✏️ Back-end

 

Express

쉽게 API 서버 구현이 가능하고 가장 많이 쓰는 프레임워크입니다.

 

MongoDB

프로젝트기간이 짧기때문에 새로운 기술을 익혀서 사용하는것보다 팀원 모두가 알고 있는 기술을 사용하는것이 효율적이라고 판단했다.

 

---

 

 ✏️ 협업 툴

Notion

Figma

Discord

Gitlab

 

1-4. 프로젝트 초기설정

vite

yarn 1.22.19

node -v - 20.10.0

 

2. 마치며

프로젝트의 아이디어를 내고, 차별화된 기능을 생각해내는것은 쉽지 않은것 같다. 내가 생각한 아이디어는 이미 많이 대중화가 되어있었다. 프로젝트를 기획하는 사람이 아닌 사용자로써 평소에 불편했던 점이나 사회 이슈를 중심으로 생각하려고 노렸했다. 그리고 오픈API를 사용해야 하기 때문에 데이터가 제공되어있는지까지 생각을 했지만 아직 주제로 선정할만한 아이디어가 나오지 않은듯 하다. 어느 한 주제를 정해놓고 생각하기보다 평소에 불편했던 점이나 필요했던 점을 계속 생각해내면서 메모해두고, 개선할 수 있는 방향을 생각해서 개발과 연결 지을 수 있는지 고민할 필요성을 느꼈다. 그리고 오늘 몸상태가 좋지 않아서 적극적으로 참여하지 못했다.

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript