코드스테이츠 메인 프로젝트 회고 | 그때도 봄이었다🌸
💨코드스테이츠 메인 프로젝트 회고 목차💫
프리 프로젝트를 마치고 눈코 뜰 새 없이 바로 메인 프로젝트를 하게 되었다.
메인 프로젝트는 더 잘하고 싶은 욕심과 조금 지친 마음을 이끌고 새 팀원들을 만나게 되었다.
🖐새로운 팀
새 팀을 만드는 데 정말 힘들었다ㅋㅋㅋㅋ
그때 우리는 냉장고 재료로 레시피를 알려주는 플젝 아이디어를 염두에 두고 있었다.
처음에 효은언니네 프리 때 백엔드 분들이랑 같이 하는 건 어떠냐고 해서 연락을 드렸었는데,
백엔드 분들은 우리의 확고한 냉장고 아이디어에 조금 생각해 보겠다고 하셨었다.
그리고 대망의 팀 결성 날이 찾아왔고, 우리는 열심히 좋은 백엔드 분들을 영입하고자 돌아다녔다.
그렇게 한 분 영입을 했는데 다른 두 분을 찾는 게 일이었다.
지금 생각하면 냉장고 아이디어가 좀 별로였나 싶다.ㅋㅋㅋㅋ
한참 돌아댕기다가 프론트엔드를 찾는다는 메세지를 보았고... 그 백엔드 분들과 얘기를 해보기로 했다.
그분들과 얘기하며 우리 팀은 이미 아이디어를 짜뒀는데 괜찮으시냐고 물어봤다.
아이디어가 뭐냐고 물어보셔서 '냉장고...' 하자마자 바로 백엔드 분들이 빵 터지셨다ㅋㅋㅋㅋㅋ
알고 보니 얘기하던 분들은 효은언니 프리 때 백엔드 분들이셨다ㅋㅋㅋㅋㅋㅋ
백엔드 분들은 이 정도면 운명이니까 같이 하자고 하셨다.
결국 같이 하기로 했던 한 분과는 작별 인사를 하고 효은언니 프리 때 백엔드 분들과 새로운 팀을 결성했다.
👤유저플로우
유저플로우를 짜는 건 생각보다 재미있었다.
이렇게 정리하면서 관계를 짜나가는 게 너무 마음의 안정,,, 깔끔,,, 행복했다.
각각 페이지의 관계성, 필요할 것 같은 데이터를 구성해 나가는 게 컴포넌트 짤 때 많은 도움이 되었다.
다만 다음번에는 유저 플로우를 짜면서 핵심 로직도 같이 고민해 보는 게 좋을 것 같다.
특히 백엔드가 있는 경우에는!!
우리는 나중에 백엔드와 생각한 로직이 달라서 조율하는데 고생을 많이 했다...
다음엔 무조건 로직 같이 짜기로,,,!!!
🎨디자인
이 부분이 제일 고생한 부분인 것 같다.
아무래도 백엔드보단 프론트가 디자인에 영향을 많이 받아서 자연스럽게 우리가 디자인 전반을 맡게 되었다.
정말 디자이너들의 대단함을 느꼈고...
처음에는 페이지마다 색을 다르게 사용해서 멘토님이 조언도 해주셨다.
멘토님의 조언으로 뒤엎는 게 쉬운 일은 아니었지만 그래도 더 좋은 디자인이 사용자를 불러오지 않을까 하는 생각에 처음부터 싹 고쳤다ㅋㅋㅋㅋ
너무 코딩이 하고 싶었다...
그렇게 얼레벌레 디자인을 끝내고 나니 나중에 페이지를 만들 때 고려되지 않았던 부분이 하나둘씩 튀어나왔다.
"우리 이건 디자인 안 했네...?"
"어... 이 버튼 필요한데 없네...?"
이런 말이 계속 나왔다 ㅋㅋㅋㅋㅋ
역시 실전은 다른가보다.
💻개인 코딩
정말 기다리고 기다렸던 시간이었다.
해야 했던 일을 하나씩 처리해 나갔는데, 이번에 아쉬웠던 부분은 일을 제대로 안 나눴다는 점이다.
너무 급했던 나머지 어떤 일을 언제, 어떻게 처리할지 정리도 하지 않은 채 막 손 가는 대로 했다.
그러다 보니 회원탈퇴 api 요청을 까먹은 게 마지막 정리할 때 생각나기도 하고... (진짜 깃허브 이슈가 살렸다... 이슈 보고 앎... 이슈 무조건 쓸 것!!!)
시간 분배가 잘 안 됐다. 이건 내가 어떤 일을 할 때 얼마나 걸릴지 예상을 아직 못하겠는 것도 있다.
아직 경험이 적다 보니 스스로 시간 책정이 어렵긴 한 것 같다.
또 아쉬웠던 건 클로바 api를 못 써본 것이다.
다음엔 NodeJS 공부를 해서 서버 열어서 네이버 api를 써보고 싶다.
또 나에게 보내기 기능을 위해서 react-datepicker를 사용했는데 정작 백엔드 쪽에서 못하겠다는 말이 늦게 돌아와서 소용이 없게 된 게 너무 속상했다. (내 새끼,,, 빛을 못 봤어,,,)
react-datepicker는 공식 문서 정리도 잘 되어있고, 사용사례도 은근히 많아서 할 만했다.
아쉬운 건 다른 사람들은 커스텀할 때 아예 함수 안에 넣어서 커스텀하시던데,
나는 시간이 없다는 이유로 className으로 css에서 고친 게 조금 아쉽다.
다음번에는 직접 달력을 만들어보고 싶기도 하다.
멘토님이 달력 만들면 렌더링에 신경을 많이 써야 한다고 하셔서 그런 경험도 해보고 싶다.
그리고 이번 플젝을 하면서 깨달았던 게, 컴포넌트를 정말 많이 빼야겠다는 점이었다.
내 안 좋은 습관 중 하나가 한번 컴포넌트를 만들면 무아지경으로 그곳에서 계속 코드를 작성한다는 점이었는데,
이번에도 그렇게 하니까 너무 컴포넌트 하나가 방대해져서 코드 가독성이 안 좋았다.
다음에는 무조건 작은 컴포넌트를 많이 만들어서 조립하는 형태로 짜야겠다!
그리고 무조건 코드 컨벤션을 정해야겠다는 생각을 했다.
지금 타입스크립트 공부를 하고 있는데, 타입 정의 같은 부분도 어디에 둘지 팀원들이랑 얘기해서 맞춰야겠다는 생각이 들었다.
prettier 설정이나 eslint 설정도 따로 해보고 싶다는 생각이 든다 ㅎ
😈에러, 그리고 또 에러
우리가 가장 어려웠던 부분 중 하나인 반응형 웹을 구현하면서,
반응형은 정말 섬세해야 하는구나 생각했다.
아무래도 구글 개발자 도구로 보는 것과 진짜 휴대폰으로 보는 것과의 차이도 있었고
휴대폰에서 안 되는 부분들과 css가 어긋나는 부분들이 너무 많아서 막바지에 고치느라 팀원 전체가 고생했다.
우리 팀원들 모두가 이런 세세한 부분을 못 참는 사람들이라 어긋난 부분을 그냥 둘 수 없었던 것 같다.
나중에 거의 시간이 없을 땐 그냥 포기한 부분도 있지만...ㅋㅋㅋㅋㅋㅋ
그리고 버셀이 https, 서버가 http를 사용하면서 Mixed Content 에러도 발생했었다.
결국 버셀 설정으로 proxy 우회하면서 해결하긴 했지만 제대로 된 해결은 아니라는 생각이 들었다.
다음번엔 백엔드 https를 사용하거나 프론트엔드 배포를 http로 맞춰서 해야겠다.
이외에도 401 에러가 문제였다.
refreshToken으로 accessToken을 받아오는 Refresh 함수가 가끔 에러를 일으키면서 전체적인 401 처리가 제대로 안되어서 accessToken 유효기간이 지나고 나면 가끔 다시 로그인을 해야 한다던지 하는 심각한 에러가 있었다.
Refresh후 axios로 요청을 다시 받아오는 코드 자체도 마음에 들지 않았다.
거의 then 지옥...
이 부분은 다른 분들의 코드를 한번 읽어보면서 다시 리팩토링 해야겠다고 생각했다.
뭔가 이렇게는 안 하실 것 같아서 다들 요청을 어떻게 깔끔하게 처리하는지 너무 궁금했다!
🌸마지막으로...
메인 프로젝트를 하면서 프리와는 다른 욕심과 열정을 가지고 한 달이라는 시간을 보냈다.
너무 힘들었고 스트레스도 많이 받았지만 바쁜 만큼 많이 성장했던 한 달이었다.
'그동안 뭔가를 위해 달린 적이 없었구나' 하고 반성하게 되기도 했다.
가을쯤 코드스테이츠 코스를 처음 걷기 시작했고, 벌써 봄이다.
사실 봄 같지도 않았다. 벚꽃을 볼 새도 없이 프로젝트만 바라봤다.
그래도 오히려 좋아!
프로젝트가 끝나고 나니 바쁘게 달렸던 때가 그립기도 하다.
끝나고 봄이다 싶었는데, 그때도 봄이었다.
이렇게 바쁘게 프로젝트를 끝낸 내가 대견하고 프론트엔드라는 직군을 더 사랑하게 되었다.
파면 팔 수록 더 배울 게 많고, 더 만들 수 있는 게 많다는 생각에 기대도 된다.
동시에 '내가 그것들을 다 해낼 수 있을까?' , '비전공자인 내가 원하는 회사에 들어갈 수 있을까?' 하는 생각도 든다.
하지만 처음 메인 프로젝트를 시작할 때도, 코드스테이츠를 시작할 때도 그런 불안한 마음은 있었다.
그냥 온 힘을 다해서 하다 보면 결국 끝이 보였다.
개발 공부에 끝은 없지만, 그래도 하다보면 언젠가 내가 누군가의 멘토가 될 만큼 또 스스로 인정할 만큼의 실력을 갖게 되는 날이 오지 않을까?
그날이 올 때까지 또다시 달려야겠다.
배포 프로젝트가 궁금하시다면?