프로젝트 소개
첫 번째 과제는 로그인/회원가입 기능과, TODO 리스트를 구현하는 것이였다.
원티드 프리온보딩 사전과제 주어지는 조건에 맞는 프로젝트를 개발했다.
이 프로젝트는 10명의 팀원 모두 함께 진행하였고, 각자 과제를 수행한 후 결과물을 통해서 팀원들끼리 토론하여 가장 적절하다고 생각하는 방식을 도출했다.
이 프로젝트를 통해 동료와 함께 협업하는 방법을 학습했고, 다양한 관점에서 코드를 해석해보는 경험을 했다.
개발환경
- 테스트 환경 : Chrome browser
- IDE : Visual Studio Code 1.71.0 (Universal)
- 인프라 : Vercel
- 주요 라이브러리
- React : 18.2.0
- TypeScript : 4.9.5
- React-router-dom : 6.10.0
- tailwindcss : 3.3.2
프로젝트에서 사용한 기능과 그 이유
1. API 호출(axios)
- axios의 intercepter 기능을 사용하여 API 요청 시, URL과 헤더를 반복해서 입력하는 대신 공통적인 end point를 설정하여 간편하게 관리할 수 있습니다. 또한, 로그인한 인증된 사용자의 경우 interceptor를 이용하여 중간에 가로채어 헤더에 token 값을 추가하여 API를 호출할 수 있습니다. 이를 통해 보안성을 높일 수 있습니다.
2. 상태관리
- props를 사용하여 상태를 전달하였습니다.
- 토큰 유무에 따른 리다이렉트에 고차 컴포넌트를 사용했습니다.
3. 라우터
- react-router-dom에서 제공하는 useRoutes를 사용하여 App.tsx에서 Routes.tsx를 Rendering 하였습니다.
- Routes.tsx에서는 react에서 제공하는 lazy 메소드를 사용하였습니다.
- 이는 첫 페이지가 로딩될 때 모든 컴포넌트가 렌더링되는 것이 아니라, 해당 컴포넌트가 필요한 시점에 이를 렌더링하여 첫 페이지에서 로딩시간이 오래걸리는 CSR의 단점을 커버할 수 있습니다.
4. craco-alias
- 다른 경로의 모듈을 import로 가져올때 상대 경로로 하면 depth가 길어지게 됩니다. alias를 통해 더 간단하게 depth를 표기하고자 했습니다. 그러나 CRA(Create React App)의 경우 alias를 설정하려면 npm eject를 사용해야합니다. depth의 간단한 표기를 위해 npm eject를 사용하는 대신 craco-alias 라이브러리를 통해 해결했습니다.
5. TypeScript
- React+TypeScript를 활용해 개발을 하였습니다.
- 타입으로 인해 예상치못한 오류를 미리 점검하였습니다.
- 타입을 가지고있어 팀원의 코드를 보고 빠른 피드백을 받았습니다.
- TypeScript 자동완성기능을 적절히 활용하였습니다.
- TypeScript를 사용해 정적 타이핑 및 에러 핸들링을 했습니다.
6. 유효성 검사
- 유효성 검사를 수행하는 함수를 utils 폴더에 따로 정리하여 회원가입, 로그인에서 모두 사용할 수 있도록 했습니다. (재사용성 고려)
- 아이디 input 태그의 type을 email이 아닌 text로 하여 @만 포함하면 유효한 것으로 하는 과제의 요구사항을 더 세밀하게 수행하였습니다.
- 또한 과제의 요구사항이 복잡하지 않으므로 includes와 length를 이용하여 간단하게 유효성 검사를 실시하였습니다.
7. prettier + eslint
- prettier를 통하여 협업하는 팀원의 일관적인 코드스타일을 유지할 수 있게 적용을 하였고 ESLint를 통해 코드소스를 분석하여 문법적인 오류나 적절하지 않은 구조 등을 정의하여 미리 식별 할 수 있게 적용 하였습니다.
- ESLint의 경우 널리 사용되는 기준인 airbnb 와 airbnb-typescript 을 활용하였으며 팀원 간 소통 및 회의를 통해 제외시킬 옵션을 추가 정의하였습니다.
- 이를 통해 코드의 통일성을 유지하고 발생할 수 있는 오류를 미리 식별하는 효과를 이루었습니다.
회고
10명의 팀원이 함께 이야기를 하며 과제를 수행하는 과정은 어려움이 많았다.
의견을 조율하는 부분에서도 시간이 많이 지체되었다. 결론적으로 5명씩 2팀으로 나누어서 한 팀은 로그인/회원가입 기능을, 다른 한 팀은 TODO 리스트 구현을 하기로 했다. 주차를 진행하면서 어떻게 팀을 나눠서 진행하는 것이 좋을지에 대한 고민은 계속 해봐야겠지만, 5명씩 나눠서 프로젝트를 진행하는 것이 10명에서 한꺼번에 의견을 나누는 것보다는 효율적이라는 생각이 들었다.
그리고, 팀으로 함께 일하기 위해 처음에 기본 세팅을 하는데 시간을 많이 투자했다. 시간을 투자한 만큼 팀으로 함께 일하는 방법에 대해 익힐 수 있어서 좋았다. 따로 블로깅을 할 예정이지만 간단하게 말하자면, 자동화할 수 있는 부분들은 템플릿을 사용하여 최대한 자동화 시켰고, ESLint와 Prettier, Husky를 이용하여 팀의 능률 올리기 위한 바탕을 만들었다.
다른 팀원 분들의 코드를 보며 코드 리뷰를 하는 과정도 매우 재밌었다. 다양한 관점에서 코드를 바라보는 시각을 가질 수 있는 좋은 경험이였다.
질문이나 잘못된 점은 댓글로 남겨주세요 :)💖
댓글