중요
프로젝트 시작 전에는 왠만해서는 미리 제작하지말자 ...

1. 프로젝트의 시작... UI 그리기 ..

오늘 2주 간의 프리코스와 2주 간의 파운데이션 기간이 끝나고 본격적인 프로젝트 제작의 기간이 되었다.

이제 막 파운데이션이 끝난 참이기 때문에 1차 프로젝트는 위코드 측에서 멘토분들과 디자이너 분이 반 이상 제작해주신 것들로 시작할 수 있었다.

그런데 나는 처음부터 느꼈지만 CSS 쪽에 대해서는 어떤식으로 접근해야할 지 몰랐기 때문에 이번에 파운데이션 때 사용했었던 'Figma' 의 디자인 쪽을 참고해서 또 만들어도 되는 것인가에 대해 고민이 많았다..

피그마를 사용하게 되면 위의 이미지와 같이 디자이너 분이 미리 만들어주신 속성들을 알고 그거에 맞춰 제작할 수 있게 되는데, 이게 너무 편하고 좋아서 자연스럽게 쓸 수밖에 없었던 것 같다.

Figma를 최대한 이미지의 배치나 패딩 이런 것들만 참고하고 UI를 그려보려 했지만, 내 실력으로는 그렇게하면 정말 1주일이라는 시간 동안 UI만 그리고 있을 것 같아서 기능 구현을 위주로 하자는 마인드로 바꿔 빨리 그리는 쪽으로 생각을 바꿨다.

2. CRA 생성..?

나는 처음해보는 프로젝트에 CRA라는 프로그램 사전 셋팅을 좀 우습게 봤었던 것 같다.
기존에 유튜브로 공부하던 버릇을 못주고 단순히 그냥 새로 파일 생성해서 하면 되겠지~ 라는 생각만으로 대충 하고 바로 git 에 레포지토리에 등록 후 작업을 시작했는데, 이게 엄청난 실수라는 걸 좀 뒤늦게 깨달았던 것 같다.

하나의 프로젝트를 하기 위해서는 vsCode의 통일화도 필요하고, 통일화를 하면서 기본 셋팅 조건들도 다 맞춰야하는데, 우리 팀은 내가 해버려서 기본 셋팅을 하나도 안해버리는 참사가 일어나 버려서 더 고생했던 것 같다..

멘토님에게 리뷰를 받는데 "이거 추가하고~ 저거 추가하고~ 셋팅 폴더 추가하셔야 됩니다~" 라고 하는데.. 솔직히 나는 "우리팀껀 별로 지적 없겠지?" 라는 생각을 하고 있다가 속으로 좀 크게 놀랐었었다.

아무튼 멘토님이 지적해주신대로 초기 셋팅을 하려는데... 아뿔싸.. 이미 프로젝트를 컨펌도 끝나지 않은 곳에 같은 팀원과 같이 서로 branch를 만들고 작업을 하고 있었던거였다.

하.. 뒤늦게 들어보니 원래 프로젝트는 초기 셋팅을 모두 마치고 컨펌까지 끝난 후에 그 프로그램에 작업하는 거라고 들었다 ..

결국 나는 기존에 작업하던 브런치는 일단 만들어두었었기 때문에 commit , push 를 하고, master branch로 checkout 하여 초기 셋팅을 진행하였고, 초기 셋팅을 마치고 멘토님의 도움을 받아 기존에 작업하던 걸 master와 marge(병합) 시킬 수 있었다.

3. 기능별 브런치 생성

CRA 생성으로 한바탕 소통을 거치고, 이제는 별 일 없겠지라고 생각하자마자 또 다른 이슈가 터졌다.
기존 파운데이션 기간에는 Wecode 측에서 만들어준 폴더에 [기수-이름] 으로 branch를 만들고 과제를 진행하였었는데, 이번에도 똑같이 하면 되겠지? 라는 마인드로 그대로 진행했었던 것이었다.
그런데, 이게 왠일인가... 프로젝트를 시작하고 나면 신경써야되는 것이 한 두가지가 아니었다.
바로 기능별 브런치 생성 .... 나와 같은 팀원분과는 당연히 페이지로 나누어 서로 완성한 뒤 합치면 되겠지라는 안일한 생각을 하고 있었는데, 먼저 글로벌하게 사용할 컴포넌트를 먼저 제작한 뒤에서야 페이지를 제작 시작하는 것이라는 걸 들어버린 것 이었다.

근데 이미 컴포넌트화고 나발이고 이미 서로 페이지를 정하고 만들어오기로 정해버려서 기능별로 나누긴 글렀다고 생각해 일단 이번 프로젝트는 그냥 진행할 수밖에 없다고 결론지었다.

나름 Button 이나 Input 같은 반복되면서 재사용을 할 수 있는 애들을 컴포넌트화 하는 걸로 나눠보려 했지만, 아직도 제대로 된 지식이 축적되지 않아서 페이지를 그리지 않고서는 버튼을 만들 수도 없었던 것이었다.

슬픈 마음을 일단 뒤로 제쳐두고 일단은 서로 이번 프로젝트는 그냥 진행하기로 팀원과 합의를 보았다.

4. UI 제작 및 기능 구현 시작

Figma 를 참고하여 UI를 제작하고, 기능 구현을 시작하였다. 파운데이션 기간동안 배운 useState 나 props 들을 응용해서 무언가를 해야하는데, 파운데이션 때 같이 배운 사람들이나 다른 FrontEnd 분들과 이야기를 해보니 전혀 감도 안온다고 한다. 사실 나도 그렇다.. 강의를 참고하고, 검색을 하면서 기능 구현을 하고 있기는 한데 이게 과연 내가 잘하고 있는건가 싶다.
물론 아예 이해가 안되는 로직들은 제쳐두고 그나마 배운 것과 응용할 수 있는 로직들만 골라서 참고하고 있기는 한데, 이렇게 하는게 맞는걸까?

2주간의 파운데이션 기간동안 로그인과 회원가입에 대한 UI를 그리고, 해당 input의 value 값을 받는 방법, 받아서 BackEnd에게 보내는 방법 (Fetch) 까지 배웠다.

그런데 프로젝트에는 로그인, 회원가입은 당연히 포함하고 스레드 생성, 수정, 삭제, 상세내용 페이지 보기까지 구현해야할 게 너무 많았다.

물론 회원 가입에는 기존 파운데이션 기간에는 없던 추가 사항들도 추가되어서 얘들에 대한 고민도 해봐야 되고 ... 너무 할 일이 많은 것 같다. 과연 이 기능들을 찾고, 물어보고 하면서 일주일 안에 프로젝트를 완성할 수 있을까?

솔직히 나는 1차 프로젝트를 2주 간 배운 내용들에 대해 복습하는 시간이라고 생각한다.
여태 배운 것들을 참고하고, 응용해서 기능 구현을 하라고 하는 것 같은데, 잘 해낼 수 있을까? 일단 해보자.. 뭐든 해보아야 결과가 나오지 않겠는가.

일단 팀원과 로그인 / 회원가입에 대해 페이지를 나누어 제작하자고 권유했으니 나는 일단 회원가입과 관련된 로직부터 연구하고, 고민해보아야 겠다.