1차 프로젝트의 회고

내용 정리

• const retrospect = () => {시작에 앞서...

1. 코드 구성 접근 방법의 오류
2. 긍정적이였던 부분
3. 아쉬웠던 부분
4. 끝으로...return;}

const retrospect = () =>{시작에 앞서...

.... 어떻게든 하면 되지 않을까? 정말 그렇게 어려울까?
학습 시작 전에 생각했던 부분이다. 다만 REACT를 배우면서도 이게 왜 바닐라js보다 좋은지 몰랐고 REACT의 독특한 구동방식의 장점도 잘모르고 다만 배웠으니 쓰게 되었다라는 것이 솔직한 심정이다. 점점 프로젝트 시작이 다가오고 REACT의 기본을 배우면서도 상당히 어려운 부분도 많았고 학습도 부족하다고 느낀 상태로 1차 프로젝트를 시작하게 되었다. 이때 즘에는 정말 할 수 있을까?라는 의문도 들긴 했다.
팀원들과 처음에 모여 회의를 하고 서로 본인이 맡고 싶은 부분을 트렐로로 나누는 등 막상 코드를 짜기 전에 시간을 들여서 계획을 했다고 생각했다. 팀원들도 감사하게도 긍정적인면도 있으면서도 프로젝트에는 진지한 마음가짐으로 임했고 나 역시 가벼운 마음으로 하고 싶지는 않았다.
처음하는 프로젝트이였기에 많은 것을 배우기를 원하는 것은 당연한 생각이였고 최소한 팀에 누를 끼치지 않기를 바랄 뿐이였다..
하지만 그런 마음은 아랑곳하지 않는다듯 내가 알고 있는 개발 관련 지식은 너무나 미미했다.

1. 코드 구성의 접근 방법의 오류

너무나 쉽게 생각했다, HTML 요소들을 적절한 위치에 삽입하고, CSS를 적용하니 이미 반은 된듯 싶었다. 그리고 사용자 입장에서 큰 흐름을 잡고 해당 절차대로 하나씩 기능을 구현하면 끝! 그리고 여유롭게 추가기능들을 구현하면 된다라는 생각.
전체적인 맥락은 나쁘지 않았지만 막상 코드를 짜려고 하니 의외로 난항이 겪었었다.

첫째로는 기본적인 문법(괄호, 중괄호,return, callback)과 오타등이 나의 진행을 더디게 만들었다. 간단한 부분을 수정할 때도 기본 문법에 대한 나의 미숙함으로 너무도 쉽게 몇 시간이 소득 없이 흘러가는 경험을 하였으며, 고민 할 것도 많은 데 이런 부분에서 더 나아가지 못하게 되니 나의 무지를 매 시간 반성하게 되었다.

둘째로는 백엔드의 입장은 고려하지 않고 기능들을 구현을 하였다. 특히 페이지네이션 같은 부분은 깔끔한 흐름으로 구현했다고 생각했지만, 내가 시도한 방식은 구현 이후 알아보니 좋은 방법이 아니며 하필이면 구현이 끝났을 때 해당 날에 페이지네이션에 관련 교육을 듣게 되었고 다른 방식으로 접근을 하게 되었다. 이때부터 백엔드와의 통신을 시작하게 되었으며 의외로 통신을 주고 받고 하는 부분에서 들어가야하는 "로그인여부의 인증" 등이 있다는 것을 알았고 이는 내가 짠 코드 절차에 우겨넣는 부분도 생각보다 쉽지 않았다. 물론 그다지 어려운 부분은 지금 생각해보면 아닐 수 있다라고 생각하지만 그 시점에서는, '아 코드 앞뒤를 어떻게 연결해주어야하지?'라는 부분에 많은 고민이 필요했다.

셋째로는 주 기능은 완료했고 추가적인 요소들을 넣을 때 문제가 생겼다. 해당 요소들을 넣으면서 상당히 많은 boolean 값들을 쓰게 되었고 해당 값들이 주 기능에도 영향을 주도록 엉키고 설킨 스파게티 코드 느낌이 되어버려, 특히 리뷰기능을 구현 할 때에는 하나를 수정하면 여러 부분에서 구현이 안되는 현상들이 자주 일어났다. 이 모든 것을 수정하려고 코드를 싹 갈아엎고 싶었지만 너무나도 아까워서, boolean 값들을 재정리하는 시간이 필요하였고 아이러니하게도 더 많은 boolean 값들을 지정해줘서 질척질척 늪에서 벗어나기는 하였다. 그야말로 boolean hell이라는 표현외에는 표현할 길이 없다.

마지막으로 컴포넌트들을 모두 merge를 시켰을 때, 통신 오류 등 고쳐야 할 부분이 있었고 여기까지였으면 그나마 다행이였을 것이다. 이제는 된다라고 모두 느꼈을 때 사이트가 정말 이상하게 구현이 되고 있었다. 페이지 3을 누르면 에러가 나고. 페이지 1,2는 멀쩡하고. 페이지 5는 하얀화면만 보게되고....... 나열하려면 너무나 많다. 팀원들은 오류를 잡기위해 파해치고 있었고, 나 역시 에러가 발생하고 있는 데 정확한 원인을 알 수 없어서 해결 방안을 찾고 있었고, 우연히 지나가시던 멘토님을 팀원이 붙잡아 모두 붙어서 물어본 결과, 아니나 다를 까 내가 짠 코드에서 단 한 줄 때문에 사이트 전체가 먹통이 되는 현상이 일어난 것이였다. 반성 또 반성. 정규식을 사용할 때 input값이 null이면 생기는 오류였다. 해당 부분을 삭제하니 마법처럼 대부분의 웹페이지들이 제대로 작동하게 되었다. 겨우 발톱 아래 박힌 가시하나 때문에 건장한 사람이 극도의 짜증을 내는 것 같은 느낌으로 우리의 웹사이트도 이런 식으로 표현하는 것 같아서 상당히 쇼킹한 경험이였다.

이중 세번째 부분은 초기 설계가 정말 중요하다라는 것을 되뇌이게 해주었다. 그리고 이 역시 경험이고, 더 실력이 상승하기 위해서는 경험을 해봐야 한다는 것.

2. 긍정적이였던 부분.

1. 리액트 코드에 대한 고민 및 학습을 많이 익히게 되었다. 이 부분은 연습을 할 수록 당연시 여겨지는 부분이지만, 막상 개인 프로젝트를 해보려고 해도 으근히 시작도 안되고 시작이 되면 지속하기가 힘들고, 이러한 부분을 억지로라도 진행하게 해여 프로젝트 자체를 끝냈다라는 점, 소통의 경험을 해봤다는 점, 내가 무엇이 부족한지 알게 된 점 등, 학습적인 고민을 많이 할 수 있는 시간이였다.

2. 프로젝트 막바지에, 에러를 잡는 방법에 대해 많이 고민하게 되었다. 내가 겪으 에러들은 모두 잘생각해보면 다음과 같이,
   input -> blocker code -> output 으로 판단을 해야하는 것이 많았으며, 이상하게도 근거없는 자신감에서인지 blocker code가 문제가 된다고는 생각하지 않았다. output 이 안나오면 input이 이상하게 들어가서 process를 못하게 된다라고만 생각하여 input을 제대로 불러와야지라는 생각만하여, 이전 절차의 코드만 다시 바꾸는 등의 어리석은 시도를 많이 해본 것 같다. 왜 한번도 process만을 수정해볼 생각을 안했는지 생각해보니, 결국 이것도 소통인 것 같다. 혼자만 풀어보려다 사고의 loop에 빠져서 갈길이 안보이는 느낌, 차라리 외부의 누군가가 한번만 봐도 출구를 알려 줄 수 있을 것 같은 에러들이 꽤 있었던 것 같다. 모든 부분을 의심해본다! 이러한 생각이 심어진 것만으로도 꽤나 좋았던 부분 같다. 뭔가를 모르면 고민하고 검색하자, 다만 장고하지는 말자, 그리고 철판깔고 기탄없이 물어보자.

3. 아직도 제대로 아는 부분이 없지만 백엔드에 대해 기본적인 부분이라도 공부하고 싶어졌다. 기본 라우팅, 컨트롤링, api 등 모르는 부분이 많았고 단순히 데이터를 요청하고 불러오는 방법만 알아서는 백엔드와 제대로 된 소통이 부족 할 것이다라는 결론을 내리고 학습에 도전해봐야겠다는 점도 아주 긍정적으로 보는 부분이다.

3. 아쉬웠던 부분

아쉬운 부분은 너무나 많아서 나열하기는 좀 그렇고, 대표적인 것 2개만 기록해본다.

1. 긍정적인면이였지만 나름 양날의 검이였던 것으로 학습에 많은 고민을 하여, 원하는 기능을 추가 못했다는 것이다. 물론 전자가 후자보다 이 시점에서는 훨씬 중요하다는 것은 알지만, 사람일지라 욕심이 나는 것은 어쩔 수가 없었다. 조금더 빨리 구현 할 수 있었다면, 조금더 소통을 잘 할 수 있었다면... 참으로 아쉬움이 남는 순간들이 있었다.

2. 에러에 관련 학습을 미리 숙지하고 해당 프로젝트에서 더 많은 에러들을 만날 수 있었다면, 좋지 않았을까? 아 도데체 왜 에러가 나는거야? 라는 자세보다는 오 에러가 나네~ 자세로 임하고 싶었지만 기능구현이 늘어지는 부분에서 금세 조급함만 남게 되었고, 에러가 나면 한숨만 나올 뿐이였다. 아직 아무것도 아니다. 나를 힘들게 하는 에러이지만 나를 더 높은 곳에 올려주는 요소들을 더 경험했었더라면 그리고 해결방안도 더 많이 모색 할수 있었다면 금상첨화였을텐데.

5. 끝으로 ... return; }

종합해보자면, 기능을 세세하게 나누고, 기능을 코딩하기전 최대하게 디테일한 설계를 하는 것. 이 설계에는 논리, 통신, 사용자경험 등을 꼼꼼히 체크해서 진행해야할 것. 열정을 잃지 말고 놓을 땐 놓고 물고 늘어질땐 악착같아야하는 부분 등 여러가지를 느끼게 해준 첫번째 프로젝트였다. 시원섭섭하고 마치 기말고사를 끝내고 나오는 학생의 기분이랄까? 이제 아기가 갓 걸음을 뗀 정도이니 계속 정진하자. 다시 실수했던 부분을 잊지말고 한층 성장한 이 마음가짐을 2차프로젝트로 return 해본다.