엘리스 2차 프로젝트(React) 회고
처음 해보는 react 협업 프로젝트
프론트엔드 공부를 하며 두 번째 프로젝트였다.
1차 프로젝트는 기획 및 페르소나를 미리 알려줬다면,
2차 프로젝트는 기획과 react를 사용해서 프로젝트를 해야 했다.
총 3주간의 시간과 4명의 프론트엔드 2명의 백엔드가 함께 기획을 했고,
주에 1번씩은 오프라인으로 만나서 회의를 하고 매일 아침 11시에 스크럼을 진행했다.
첫 주에는 기획, 라이브러리, 개발파트를 정했고 2주 차부터 개발을 시작했고,
이번에 받은 개발파트는 로그인, 회원가입, 회원수정, 탈퇴를 받았다.
1주 차 기획 시작
첫 주는 기획을 시작으로 어떤 서비스를 만들지 팀원들과 고민했었다.
- 등산에 대한 서비스를 만들면 좋겠다.
- 하루를 결산하는 서비스를 만들면 좋겠다.
- 오픈api를 이용한 서비스를 만들면 좋겠다.
이 중에서 하루결산 서비스를 선택했다.
그 이유는 하루를 쉽고 빠르게 정리하는 빠르고 가벼운 서비스를 생각했기 때문에 선택했다.
1주 차를 하면서 느낀 점.
한 줄로 "기획에는 정말 많은 시간이 걸리고 많은 커뮤니케이션이 필요하다"
처음 회의부터 팀원들과 정말 많이 만나서 이야기를 했다.
아이디어부터 어떤 라이브러리를 쓸 것인지, 그 이유는 무엇인지, 서비스 구조도, DB설계, 와이어프레임, API문서 등 신경 쓸 일이 많았다.
서비스가 쉽고 빠르고 가벼운 서비스를 원했기 때문에 recoil과 SWR을 채택했다.
특히 TypeScript, SWR, recoil은 아직 경험해 본 적 없기 때문에 주말에 TypeScript, recoil, SWR을 공부했다.
2주 차 개발 회고.
처음엔 회원가입과 로그인을 개발했다.
react-hook-form이라는 라이브러리를 알기 전에는 hook을 이용해서 개발을 하고 있었다.
개발을 하고 있던 중에 팀원분께서 react-hook-form을 이용해서 개발하면 더 쉽고 많은 문제들을 해결할 수 있다고 해서 찾아봤다.
특히 인프런에서 react-hook-form을 도입 이유를 잘 설명한 글이 있었다.
https://tech.inflab.com/202207-rallit-form-refactoring/react-hook-form/
이 글을 보고 라이브러리를 사용하게 됐고, 코드가 단순화, 에러메시지, 동기화, validate 등 얻는 이점이 많았다.
또한 공용으로 사용할 수 있는 axios가 있으면 좋겠다고 생각해서
axios.create에 대한 내용을 공부해서 공용 api요청을 만들었다.
이렇게 2차 프로젝트의 2주 차는 빠르게 지나갔다.
3주 차 개발 회고
3주 차에는 회원정보 수정, 탈퇴, 사용자 접근 라우터 설정, CSS를 중점으로 개발했다.
사용자 접근
로그인한 회원은 회원가입, 로그인페이지에 이동 불가하게 만들고 싶었고,
홈, 마이페이지에는 로그인한 사용자만 이동 가능하게 만들고 싶었다.
그렇게 알게 된 게 router를 이용한 사용자 접근 방식이었다.
토큰이 있다면 그 토큰으로 마이페이지, 홈 화면에 접근 가능하게 했다.
사용자 접근 라우터를 설정하면서 react-router-dom에 대해 더 자세히 알게 됐고, 중첩 라우팅, outlet 등 많이 배웠다.
회원가입, 로그인, 회원정보 수정/탈퇴
react-hook-form을 이용해서 개발을 했고, 서버에서 에러 메시지를 받아와서 모달로 내용을 알려주었다.
tailwind +styled-components를 이용하여 스타일을 했고,
기존에 tailwind만 사용했을 때의 코드보다 더 깔끔한 코드를 만들었고
공용 스타일을 만들어서 유저폼에 적용을 했다.
더욱 많은 기능을 추가하고 싶었지만 배포를 하여 생기는 버그를 수정하기 위해서 빠르게 배포를 하고 페이지에서 생긴 팀원들과 모여서 버그들을 수정하고 보니 벌써 발표 날이 다가왔다.
프로젝트를 하며 느낀 점
이번 프로젝트를 하면서 "이렇게 모르는 게 많은데 내가 취업을 할 수 있을
까?"라는 질문을 나 자신에게 물어보는 시간이었다.
물론 아직은 부족하고 배울 점이 많다.
하지만 이렇게 4개월의 부트캠프를 수료했고 포기하지 않은 성실함이 나에게 무기이지 않을까?라고 생각했다.
부트캠프 수료는 나에게 첫 발자국을 걷게 해 준 수단이고, 지금부터 더욱 열심히 해서 꼭 취뽀 해야겠다는 생각만 남았다.
수료 후에 나태하지 않게 원티드에서 시작하는 프리온보딩 프론트엔드를 신청했다.(react-query, typescript에 대해서 수업을 진행한다.)
로그인, 회원가입, todolist를 개발하는 사전 과제를 하면서 발전할 생각이다.
앞으로도 더욱 노력해서 신입 개발자로 취업하는 순간을 위해서 열심히 해야겠다.
자세한 프로젝트에 대한 개발 내용 및 기획