2020. 7. 12. 01:10ㆍProject
2주 프로젝트 회고
이번에 첫번째 프로젝트를 진행하게 되었다.
총 2주간 짧다면 짧은 시간동안 진행했는데, 그 과정에서 느꼈던 것들을 정리해보려고 한다.
색갈피
한국어로 된 컬러팔레트 웹사이트인 색갈피를 구현했다.
보통의 컬러팔레트 웹사이트는 영어로 된 사이트가 많아, 한국어로 된 컬러팔레트 사이트가 있으면 좋겠다는 아이디어로부터 출발했다.
색갈피의 주요 기능은 아래와 같다.
- 컬러팔레트 조회
- 컬러팔레트 생성 / 편집
- 컬러팔레트 삭제
- 컬러팔레트 공유 : 헥사코드, RGB코드, 이미지 저장, 링크 복사, 컬러코드 자동 복사
- 유저 회원가입
- 유저 로그인 / 로그아웃
- 유저 정보 수정
- 유저 삭제
맡은 역할
팀은 총 4명이었고, 프론트엔드 2명, 백엔드 2명으로 구성되었다.
나는 그 중에서도 프론트엔드를 맡아 작업했고, 컬러팔레트의 조회, 생성 및 편집, 삭제, 공유 부분의 구현을 맡았다.
프론트엔드에서 사용한 기술 스택
- React
- React Hooks
- React Router
- Axios
- SCSS
- Styled Component
- Antd
- ESLint
- Prettier
팀의 목표가 새로운 기술 스택에 도전하기보다는, 기존에 배운 것들을 활용해서 더 완성도있는 결과물을 만들어내는 것이었기 때문에 도전적인 기술을 사용하지는 않았다.
대신 Hooks를 사용하면 코드가 보기 좋아지고, 코드 전체의 양이 줄어든다는 점, useState의 컨셉이 setState보다 더 간편해보인다는 점에서 개인적으로 마음에 들었고, 프로젝트에서 제대로 사용해보고 싶었다.
그래서 프론트엔드 파트에서는 일반 클래스 컴포넌트 대신 Hooks를 사용하는 것을 제안했고, 받아들여졌다!
거기에 추가적으로 스타일 부분에서는 원래는 SCSS만 사용하기로 했는데, 킥오프 미팅을 통해 제안받은 Styled Component와 Antd를 함께 사용했다.
배우고, 알게 된 점들
1. 프로젝트 문서화의 중요성을 알게 되었다.
이번 프로젝트를 시작하기 전에는 주석을 달더라도 그냥 생각이 흘러가는대로, 프로젝트에 대한 정리는 나만 알아볼 수 있을 정도로 간결하게 했었다.
하지만 이번 프로젝트의 팀장을 맡으신 분이 문서화를 굉장히 잘 하시는 분이었다.
처음의 SR 기획 단계부터 시작해서, 각 커밋에서는 깃모지를 사용했고, PR, 이슈의 태스크 하나하나, 위키, README까지 정말 깔끔하고 보기 좋게 정리해 주셨고, 좋은 커밋 / PR 룰을 만들어 주셨다.
덕분에 어떤 부분을 어떻게 신경써야 팀원들이 한눈에 보기 좋은 지 알 수 있었다.
실제로도 깔끔하게 정리된 깃 레포 덕분에 하나하나 팀원분들께 물어보지 않아도 바로 작업에 들어갈 수 있어서 시간이 많이 단축되었고, 서로 어떤 역할을 가지고 작업을 하는 중인지 명확히 알 수 있어서 커뮤니케이션도 더욱 원활하게 진행되었다.
2. 초기 기획과 룰 설정의 중요성을 알게 되었다.
위와는 반대로, 초기 기획 부분은 조금 미흡한 부분이 있었다.
예를 들면 클라이언트 측의 리액트 컴포넌트 구조, 서버 측의 API 문서 등은 초반부터 그렇게 명확하게 짜여 있지 않았어서 팀원들끼리 이 부분을 확인하는 데에 시간을 많이 쏟게 되었다.
클라이언트끼리는 라우팅과 구조에 대해서는 나름대로 꼼꼼하게 짚고 넘어갔다고 생각했는데, 최후반부에 state를 다루는 부분에서 서로의 state구조를 100% 이해하지 못했기 때문에 머지 후 코드를 병합하고, 테스트를 하는 과정에 있어서 조금씩 충돌이 생겼다.
그렇게 큰 충돌은 아니었지만, 실제로 상용화될 프로젝트에서 이런 일이 반복해서 생긴다고 하면 굉장히 크리티컬할 것이라는 느낌이라 이번 프로젝트에서 가장 아쉬운 부분이 아니었나 하는 생각이 든다.
3. 무엇보다도 팀원들을 믿고, 미리 걱정하지 않는 방법에 대해 알게 되었다.
평소에도 겁이 많은 편이라 아직 일어나지 않은 일에 대해서 사서 걱정하는 단점이 있다.
이 부분을 고치려고 노력은 많이 하지만 그렇게 빨리 고쳐지지는 않아서 고민이었는데, 이번 프로젝트를 진행하며 단점을 고칠 수 있는 힌트를 얻은 것 같다.
미래를 걱정하는 이유 중 하나는 내가 나 자신을 잘 믿지 못하기 때문이라는 것은 이전부터 인지하고 있었다.
내 실력에 대해서 의심하다보니 실제로 시작하면 잘 할 수 있는 부분도 지레 겁먹고 늦게 시작하는 경우가 있었다.
이번에도 초반에 조금 그랬는데, 리액트의 라우팅 부분의 구조를 짜는 부분이 어려울 거라고 생각했고, 실제로도 겁을 집어먹고 있었다.
하지만 함께 프론트를 맡은 팀원분께서 클라이언트의 구조에 대해서 적극적으로 의견을 내 주셨고, 함께 의견 교환을 하다 보니 전체 구조를 짜는 데에 시간을 조금 할애하긴 했지만, 겁먹은 것에 비해서 구현까지 금방 해낼 수 있었다.
프로젝트에 중후반부에 접어들어서는 내가 맡은 일이 바빠져서 정말 걱정할 시간 자체가 없다 보니, 오히려 더 일찍 착수해서 일찍 끝내버릴 수 있었다.
팀원분들도 다들 실력이 좋으신 분들이었기 때문에, 그때부터는 아예 정말 믿고 걱정하지 않으니 내 일에만 온전히 집중할 수 있었다.
덕분에 알게 된 것들은, 일단 일을 시작하고, 팀원들을 믿고 내가 맡은 일에 집중한다면 걱정할 여유 자체가 사라져서 더 효율이 좋아진다는 점이었다.
평생 끌고 온 이 걱정하는 습관을 고치는 데에 아주 큰 도움이 될 수 있을 것 같다.
4. 리액트 상태관리 라이브러리의 필요성에 대해서 아주 크게 느끼게 되었다.
이번에는 시간적인 부담이 있었기 때문에 리덕스를 따로 활용하지는 않았고, 처음에는 Hooks의 useState, useRef, useEffect만 사용해서 구현했다.
중간에 프론트엔드를 맡은 다른 팀원분께서 useReducer라는 hook을 사용하는 것이 어떻겠냐고 제안을 주셨고, 실제로도 편하게 사용하시는 모습을 보고 나도 useReducer를 사용해서 내 코드를 리팩토링했다.
useReducer는 리덕스에서 따온 개념으로, 실제로도 리덕스와 유사하게 state들을 한군데에 모아서 관리할 수 있고, 이 state들을 변경시키는 action과 dispatch를 사용할 수 있었다.
팔레트 관련 부분 역시 state끼리 서로에게 영향을 미치고, state의 수 자체도 꽤 되었기 때문에 useReducer가 유용했다.
특히 dispatch를 다른 컴포넌트로 내려줘서, 한번에 여러 state를 변경시킬 수 있는 부분이 꽤 좋았다.
하지만 useReducer를 사용하며 최상위 컴포넌트에서 state의 초기값, action 정의 등을 모두 해주다 보니, 컴포넌트 자체 이외의 상태관리만 하는 코드가 굉장히 길어지게 되었다.
보기에 좋지 않은 것 뿐만 아니라, dispatch, state에 action과 모든 state들을 담아서 넘기더라도 필요한 컴포넌트에게 바로 가져다 줄 수 있는 것이 아니었다.
기존에 하던 것처럼 목적지 컴포넌트까지 가는 중간에 있는 모든 컴포넌트를 거쳐야만 dispatch, state를 전달해 줄 수 있다는 점이 정말 불편했다.
이러한 경험 덕분에, 정말로 왜 리덕스, mobX같은 상태관리 라이브러리를 사용하는지 뼈저리게 느낄 수 있었다.
화면에 표시될 부분을 작성하는 파일과, state를 관리하는 파일을 따로 만듦으로써 한 파일의 길이를 줄이고, 더 가독성을 높일 수 있을 것이다.
또, props drilling을 하지 않아도 된다.
필요한 부분에만 state와 action들을 전달해 주고, 이들을 화면에 표시되는 부분과 따로 관리하는 구조 자체가 예전에는 굉장히 복잡하게 느껴졌고, 이렇게까지 해야 하는지 싶었지만, 이번 프로젝트를 통해 그렇게 분리해놓을 수 있는 구조가 굉장히 편하고, 심미적으로도 굉장히 좋다는 점을 알게 되었다!
5. Hooks의 컨셉 이해가 부족하다는 사실을 알게 되었다.
이머시브 과정에 들어오기 전에 리액트, node.js에 대해서 독학을 조금 했었고, 그 과정에서 hooks를 접하고는 말 그대로 신세계를 느꼈다.
그 뒤로 hooks를 굉장히 좋아하게 되었고, 작지만 hooks로 미니 프로젝트도 진행했었다.
React로 Twittler 구현해보기
그래서 나름대로 Hooks에 대한 이해도가 있다고는 생각했지만, 이번 프로젝트를 진행하며 그건 아주 크나큰 착각임을 깨닫게 되었다.
위와 같은 무한루프 오류가 생겼는데, 이게 useEffect와 비동기 처리 때문에 생긴 문제라는 것은 인지하고 있었으나 정확한 이유에 대해서는 알지 못했다.
그때 마침 프론트엔드 오피스아워 시간이 있어서 들어가 봤더니, 나와 같이 무한루프 오류를 겪는 분이 질문을 하셨고, 클래스 컴포넌트와, 함수 컴포넌트에서의 Hooks는 별개의 개념으로 생각해야 한다는 것을 알게 되었다.
기존에는 useEffect를 이용해서 클래스 컴포넌트의 라이프사이클을 따라하려고 생각했었는데, 이는 아주 잘못된 생각임을 알게 되었다.
위 부분을 구현할 때, useEffect의 dependency array를 비워 둠으로써 componentDidMount와 같은 효과를 가져가고자 했다.
하지만 함수 컴포넌트에서는 state가 바뀌면 전체 컴포넌트 자체가 새로 렌더링된다고 한다. 값이 바뀌는게 아니라 컴포넌트가 새로 만들어지기 때문에, 이전에 봤던 오류 중 200개가 넘는 컴포넌트가 새로 생성되었다는 오류가 왜 나오게 되었는지 알게 되었다.
오피스아워에서는 정답 자체를 알려주진 않았기 때문에, 프로젝트가 끝나고 잠시 비는 시간이 있는 지금 더 딥하게 알아볼 생각이다.
Hooks를 사용하며 특히 useEffect의 경우에는 컨셉을 알고는 있지만, 정확하게 이해하고 쓴다는 느낌을 받지 못했기 때문에, 아예 처음부터 함수 컴포넌트, Hooks의 컨셉, 이점, 각 hook 들에 대해서 더욱 명확하게 알고 넘어가려고 한다.
useEffect 참고한 자료:
https://medium.com/@andrewmyint/infinite-loop-inside-useeffect-react-hooks-6748de62871
6. CSS가 미흡하다는 사실을 더 잘 알게 되었다.
사실, CSS를 잘 하지 못한다는 점을 알고 있으면서도 혼자 온라인으로 강의를 들으며 CSS 파트가 나오면 복붙을 자주 하곤 했다.
하지만 이번에 함께 프론트엔드를 맡은 팀원분께서 CSS를 굉장히 잘 하시는 분이었고, 그분이 내가 짠 CSS 코드들을 리팩토링하며 어려움을 겪는 모습을 보며 정말.. 정말로 CSS를 제대로 공부하고 넘어갈 필요성을 느꼈다.
CSS 역시 기본 컨셉부터 확실하게 잡아 둘 생각이고, 더 깔끔하게 짜는 법은 실제로 많이 해봐야 알 것 같다. 이번에 조금이라도 확실하게 잡고 넘어가서, 다음 프로젝트 때는 팀원분을 고생시키는 일이 없도록 해야겠다.
프로젝트, 그리고 회고를 마치며..
2주 프로젝트를 진행하며 힘든 점도 많았고, 처음으로 밤샘 작업도 했지만 그것보다 더욱 즐겁고, 행복했다.
팀원분들도 정말 잘 만났고, 프로젝트도 정말 좋은 프로젝트를 만나서 의욕 넘치게 작업했던 것 같다.
2주라는 시간이 정말 빨리 지나가버려서 한편으론 시원하고, 한편으론 아쉽긴 하지만 덕분에 정말 좋은 사람들과 정말 많은 것을 배운 시간이었다.
처음 프로젝트 설문조사를 할 때, 추가적으로 할 말에 좋은 분들과 많이 배우면서 프로젝트를 하고 싶다고 적었는데, 정말로 그렇게 된 것 같아서 기분이 좋았다.
또, 원래는 다른 분야에서 취업 준비를 하다가 내가 하고 싶은 일을 업으로 삼고 싶어서 개발 쪽으로 전향했는데, 그동안 배우면서 그 생각에 의심이 많이 들었었다.
과연 내가 이 일을 앞으로 오랫동안 흥미를 잃지 않을 수 있을까? 당장 지금도 하기 싫어서 미루는데 기껏 전향한게 물거품이 되지는 않을까? 등등..
하지만 이번 프로젝트를 진행하며 조금 더 확신이 생겼다.
코드를 짜고, 무언가를 만드는 것이 정말로 즐거웠고, 새로운 기술을 배우기 위해 구글을 탐험하는 일도 정말로 즐거웠다.
평소에도 디버깅은 특기라고 생각했는데, 조금 더 자신이 있어진 것 같다.
아무튼, 이번 2주 프로젝트를 통해서 정말로 많은 것을 얻어가게 되었고, 정말.. 잊지 못할 기억이 될 것 같다.
함께 했던 팀원분들에게도 정말 감사하고, 굉장히 즐거웠다.
'Project' 카테고리의 다른 글
| [Personal Portfolio] 4. 스크롤 이벤트와 Custom Hook 만들기 (0) | 2020.08.23 |
|---|---|
| [Personal Portfolio] 3. 라우팅 및 네비게이션 섹션 이동하기 (0) | 2020.08.20 |
| [Personal Portfolio] 2. 리액트 앱에서 ESLint 설정하기 (0) | 2020.08.18 |
| [Personal Portfolio] 1. CRA 없이 리액트 앱 시작하기 (0) | 2020.08.17 |
| [Final Project] 4주 프로젝트 회고 (0) | 2020.08.13 |