프로젝트를 마치고 나서

사실 개인 프로젝트가 발표까지 끝난지는 사흘이 지났다. 나는 마지막에 너무 무리를 했고, 슬럼프 혹은 번아웃을 맞이하지 않기 위해 끝나고 그 동안 정신건강 관리와 피로회복에 전념했기 때문에 의도치 않게 늦은 프로젝트 마무리 회고를 해본다.

시작에 앞서 간단히 정리한 감성은, 이번 프로젝트를 통해 내 기본기가 얼마나 허술한 지 느낄 수 있어서 반성을 많이 한 기간이기도 했지만, 이를 반대로 이야기 한다면 3개월의 기간을 모두 통틀어 실력에 있어 가장 많은 성장을 본 기간이기도 했다.

React 라이브러리를 활용하여 제대로 된 프로젝트를 진행한 것은 이번이 처음이었고, 이번 기회를 통해 나는 React에 대한 이해도를 조금 더 높일 수 있었다. React를 주력으로 한 프론트엔드 개발자가 되는 것을 목표로 하는 나로써는 최선의 결과인 것 같다.

이번 프로젝트에서는 React의 기본 문법과 활용법을 이해하고 최대한 근본에 집중하고 싶었기 때문에 최대한 서드파티 라이브러리는 배제하였다. 예를 들어 전역적인 상태관리 부분에서 나는 Redux가 아닌 Context API 기술을 활용하였고, 스타일링 또한 Bootstrap이 아닌 css module을 통해 결과물을 만들었다. 기본기가 탄탄해야지만 위의 기술들에도 더 큰 감사를 느끼며, 더 효과적으로 활용할 수 있을 것만 같았다.

이번 프로젝트는 다른 의미로도 내게 의미가 깊다. 나는 내가 지금까지 생각하고 있는 마인드, 개발의 철학을 가시화하여 최대한 많은 인원에게 보여주고 싶었다. 그동안은 말과 글로써만 나의 생각을 전달하였지만, 이번은 타인이나 내 자신이나 그것을 눈으로 직접 확인할 수 있는 좋은 기회라고 생각했기 때문이다.

개인 프로젝트 개시 주 (Nov 16th ~ Nov 20th)

첫 주의 요구사항 분석 기록들

• 첫 주는 먼저 이 프로젝트에서 요구하는 기능 구현사항 그리고 와이어 프레임을 분석하는 데에 시간을 많이 들였다. 과거의 프로젝트 경험과 시행착오를 떠올려 보았을 때, 개발을 시작하기 전에 나만의 체계를 미리 잡고 시작하는 것은 나중의 시간을 절약하는 길이라고 판단했었기 때문이다.

• 나는 제시된 기능 구현사항 리스트를 보면서, React의 어떤 기술을 활용하여야 목표 페이지의 기능을 구현할 수 있을지 고민하며 노트를 정리했고, 물론 훗날 이 작업은 개발 작업 기간 내내 많은 도움이 되었다.

• 다음으로 와이퍼 프레임은 이미 제시된 예시가 있었으나, 나는 적어도 이 부분에 있어서는 나만의 철학을 담고 싶었다. 프론트엔드 분야의 개발자가 되기로 마음먹은 이유 또한 명시적이고 기분좋은 UI/UX를 구축하여 사용자의 만족도가 높은 서비스를 만드는 데에 기여하고 싶은 마음이 컸기 때문이다.

• 그 다음 스텝으로 나는 파악하고 정리한 기능 구현사항과 페이지 디자인을 토대로 두고, 그동안 시간에 쫒겨 스스로 정립하지 못한 React의 기본 문법과 활용법을 숙지하기 위해 Udemy 사이트의 강의를 여럿 보며 개념을 정리하였다. 프로젝트를 자기 자신의 힘으로 진행해야 했기 때문에 부담이 되어 본 것도 있지만, 내가 독자적으로 이해한 바를 가지고 코드를 쓰기 시작한다면, React를 잘 활용하지 못하고 이상한 방법으로 작성할 것 같았다. 그것은 너무나도 싫은 결과였다.

중간 점검

중간 점검에 있어 결론부터 말하자면, 나는 시간관리에 완벽한 실패를 했다. 다른 레이서와의 개발 진도 간격은 좁힐 수 없이 커졌고 나는 이에 상당한 압박감을 느꼈다. 내가 선택하여 준비기간을 길게 가진 것도 있지만, 그렇게 정당화하기엔 내 실력이 내 자신이 인정하기엔 터무니없이 부족한 점이 탄로났기 때문이다.

나는 객관적으로 이 프로젝트의 중간 결과에 대해 생각하기 시작했다. 과연 이제는 무엇을 해야 되는 것인가. 고민하는 시간은 최대한 짧게, 그러나 최대한 깊게 하고 싶었다. 나는 결국 기능 구현을 일단 시작하고 이후 필요한 지식이 생기면 블로그나 공식 자료를 참고하는, 예전식으로 실제 작업에 착수하기 시작했다.

개인 프로젝트 마무리 주 (Nov 21st ~ Nov 28th)

이번에는 막판 스퍼트를 올릴 필요가 있었다. 디자인 지향점은 중간에도 계속 변경되어 혼란스러울 지경이었고, 기능 구현은 생각하는 대로 제대로 된 진척이 없었다. 최대한 스스로의 힘으로 문제를 해결하려 했으나, 결국 나는 지금은 체면을 따질 때가 아니라 도움을 청해야 할 때라고 생각하여 레이서 커뮤니티에 적극적으로 내 상태와 받고 싶은 도움 사항을 공유하였다. 생각한 것보다 많은 분들이 적극적으로 도움을 주셨다.

마지막 주에 진행한 대표 구현 사항

1. react-router-dom의 Route와 Link를 통해 컴포넌트 간의 연결관계를 만들어 주었다.

2. axios 라이브러리를 사용하여 직업 가치관 검사의 문제들을 커리어넷에서 get 요청으로 화면에 불러왔다.

3. Context API 기술을 활용하여 앱 내에서 전역적으로 관리해야 할 상태값들을 관리하였다 (test-context, user-context..) 를 만들었다.

4. 각 문제들을 5개 씩 화면에 투사하기 위해 페이지네이션 기능 구현을 하였는데, 상태값으로 버튼을 누를 때마다 페이지 수를 높이거나 낮출 수 있게 했다.

5. 각 화면에 출력할 컴포넌트들은 무조건 Card라는 컨테이너에 담아 보여줄 수 있게 하였다. 잘 정제된 UI는 사용자의 서비스 파악을 용이하게 한다.

6. React의 특장점을 극한으로 끌어올리기 위해, 컴포넌트는 모듈화를 시켜 최대한 많은 분리를 진행했다. 거기에 보여지는 부분을 담당하는 Presentational 컴포넌트(ui)와 동작 로직을 담는 Container 컴포넌트로 나누어 관리하였다.

7. 모든 문제를 체크하지 않으면 비활성화 되는 버튼과 프로그래스바를 구현하는 데에 꽤 많은 노력을 들였다. 답은 결국 각각 localStorage와 문제의 답의 값을 담는 상태값을 조정하여야 했다.

8. post 요청으로 보내는 값에 따른 결과를 가져오는 get 요청 부분은 늪과 같았다. 난생 처음보는 API 형식으로 인해 적지 않은 당황과 개고생을 했다. 이 부분을 해결하려고 이틀의 시간을 꼬박 투자한 것 같다.

9. 많은 이들의 도움을 받아 결국 대체적인 기능 구현은 끝냈지만, 마이너한 버그(프로그래스바, 다음 버튼, etc..) 들이 남아있었고 이 부분을 잡는데에도 상당한 시간이 들어갔다.

10. 깃을 활용하는 데에 실패하여, 파일을 압축하여 배포하는 데에 성공하였다. 물론 스스로 못했고 다른 동료의 도움을 받았다.

위의 일련의 작업들을 달성하는 데에 장장 5일, 마지막 3일은 72시간 동안 4시간의 수면시간만 가지고 작업을 진행했다. 후반으로 갈 수록 과연 내가 기간 내에 완성할 수 있을까라는 불안감이 엄습하였고, 몇번이나 좌절을 맛보았다. 간단한 프로젝트라고 생각했던 것이 큰 착각이었던 것이다.

그래서 나는 마지막에 내 모든 것, 체력이든 자존감과 같은 멘탈이든, 말 그대로 모든 것을 던져넣지 않을 수 없었다. 그렇게 해서라도 내가 만족할 수 있는 결과를 끌어내는 노력을 하지 않는다면 나는 최악의 거짓말쟁이이고, 앞으로 계속 자신에게 실망할 것만 같았다.

결과물 발표

내 프로젝트 링크: 커리어 밸런스 게임!

실제 발표에서는 막힘은 없었지만, 시간관리에 실패했다. 내가 하고 싶은 말, 내가 보여주고 싶은 것을 모두 표현하기에는 5분이라는 시간은 내게 터무니없이 짧게 느껴졌다. 발표를 하고 나서는 최대한 많은 질문과 피드백을 받고 싶었지만 아쉽게도 아무런 피드백을 받지 못했다.

내 발표 이후에는 그래도 발표에 참석한 모든 분들의 시연 화면과 코드를 토대로 내가 궁금한 사항을 최대한 많이 질문하였다. 나는 동료에게서 배우는 것이 최선이다. 많은 분들이 생각보다 세부적인 부분들을 고려하여 프로젝트를 진행하셨고, 특히 콘솔과 주석의 활용, 클린코딩에 대해 많은 점을 배울 수 있었다.

느낀 점

그렇다. 내가 가지고 있던 개발 가치관이라는 것은 결국 누구든 당연하게 생각할 수 있었다. 나는 이로서 기본은 할 수 있는 것이라고 판단하고 앞으로의 발전을 도모하며 자잘한 레이아웃 업데이트와 로직 수정을 종료 후 진행했다.

최대한 많은 사람들에게 앱을 소개하면서, 사용감을 옆에서 지켜보고 불편한 점은 없는 지 물어봤다. 몇몇 피드백을 토대로 개선한 점은:

• 테스트 시간이 생각보다 길어 당황하는 경우가 있어 예시 페이지에 소요시간을 썼다.

• 예시 페이지에서 예시를 누르지 않아 모달창을 보는 경우가 대부분이라 각 예시에 번호를 달았다.

• 테스트 완료 페이지가 마지막 페이지인줄 알고 멈추시길래, 결과페이지로 이동하는 버튼을 더 명시적으로 바꾸었다.

• 마지막 결과페이지는 더 가운데로 시야 포커스를 주기 위해 다시 카드 틀로 감싸 가운데로 모아 정렬했다.

더 매력있고 발전성 있는 개발자가 되려면 적어도 만들어 놓은 결과물에 대한 애착이 있어야 하고 내가 만든 창작물에 있어서 책임을 질 줄 알아야 한다. 사실 이것은 인간관계나 어떤 다른 분야의 모든 일에 있어서 동일하게 적용되는 점 같다. 나는 내가 이 인생에서 선택한 모든 것에 대해 책임감을 가질 줄 알아야 하는 것 같다.

이번 프로젝트는 아쉽게도 반쪽짜리 프로젝트이다. 내가 보여주고 싶은 전부를 보여주지 못했고, 생각보다 많은 사람들을 귀찮게 하며 진행해버렸다.

나는 이번 기회를 통해 파악한 내 부족한 기본기와 프로그래밍에 대한 이해를 넓혀갈 필요가 있어져서, 정규 과정 외에 다른 코스를 병행하여 듣고 있다.

이번 프로젝트에 있어 크루셜한 도움을 준 고마운 이들이 존재한다.
나는 이번 개인프로젝트를 무사히 마치는 데에 도움을 준 이들:

• 박X백 동료 레이서
• 남X범 동료 레이서
• 최X호 동료 레이서
• 김X연 동료 레이서
• 양X광 동료 레이서
• 김X원 동료 레이서
• 곽X영 동료 레이서
• 조X흠 동료 레이서

위 여덟 분에게 감사와 영광을 돌리며 이번 회고를 마치려 한다.
다음은 React 혹은 데이터 분석 파트에 대한 TIL을 재개한다.

Peace And Love 🤟