우아한테크캠프 4주차 후기

 벌써 4주차가 끝났다. 벌써 세번째 프로젝트의 절반이 지난것이다. 원래 시작할때는 기능구현을 우선적으로 하자고 했는데 어쩌다보니 기능보다는 구조나 코드에 신경을 많이 썼다. 이번 팀원분은 일단 엄청 꼼꼼하다. 그래서 별생각없이 코드를 짤 수 없다. 원래 생각없이 코드를 짜지는 않지만 설득시키기 위해서는 내가 보다 잘 알아야 한다. 그래서 내가 조금 미흡하게 아는 부분은 설명을 하는데 진땀을 뺐다. 팀원이 프로젝트마다 바뀌는 만큼 다양한 사람들과 협업을 하고 다른 관점에서 볼 수 있기 때문에 도움이 되는 것 같다.

 이번 프로젝트는 가계부인데 저번 프로젝트보다 할 작업이 훨~~~~씬 적다. 그래서 그런지 구조에 신경을 많이 썼고 다른 팀들도 마찬가지인 것 같았다. 우선 프론트는 내가 구조를 짜고 백엔드는 팀원분이 짰는데 호눅스님이 추천한 구조를 바탕으로 만드셨다. 나눠놓고 보니 생각보다 복잡하지 않고 괜찮은 것 같다.

 백엔드 구조는 config, controllers, error, loaders, middleware, model, passport, repository, service로 나눴다. 기본적으로는 mvc 패턴을 따르고 있다. config는 설정파일들을 env에서 가져오는게 주된 역할이고 error는 에러처리, loaders는 처음 실행시 필요한 정보들을 가져오는 역할이다. loaders에는 현재 express, sequelize, session정보를 index에서 import하는 형식을 따르고 있다. middleware는 말 그대로 미들웨어이고 지금은 user가 로그인되어있는지, 되어있지 않은지 체크하는 함수 2개만 있다. 그리고 passport는 로그인을 도와주는 라이브러리인데 타입스크립트 사용하면서 문제가 조금 있었다. 다음에는 절대 안쓴다.....   model은 db모델과 외래키 등을 시퀄라이즈로 적어놨다. controllers는 경로를 지정하고 req.body나 req.user에서 받은 정보를 service로 넘긴다. 그리고 service에서는 비지니스 로직을 처리한다. 예를들어 회원가입이라면 먼저 이메일이 중복되는지 확인을 하고 중복된다면 error를 발생시키고 중복되지 않는다면 성공 메세지를 리턴한다. 이때 쿼리문은 서비스에서 나눠서 관리한다.

 내가 혼자짠다면 컨트롤러를 라우터와 나눌것같다. 팀원분과 의견이 조금 안맞았는데 백엔드를 팀원이 짜는만큼 팀원을 따르기로 했다. 그리고 검증하는 부분을 어디서해야될까 얘기하다가 팀원의 멘토인 김정한님께서는 따로 빼서 관리해야 한다고 했다. 그런데 지금같은 작은 프로젝트에는 굳이?? 라고 하셨고 시간이 남으면 적용할지도 모르겠다. 

 내가 짠 프론트 구조는 크게 전역상태관리, 히스토리관리, 컴포넌트별 변경되는 state관리로 세가지로 나눌수가 있다. store에서는 옵저버패턴을 이용해서 전역상태를 관리하고 구독한다. 그리고 라우터에서는 history pushstate와 popstate를 이용해 spa로 동작하게 라우팅 한다. 어떻게 할까 하다가 그냥 a태그의 기본 동작을 라우터에서 바꿔버렸다. href속성을 pushstate에 넣는것이다. 실제 리액트에선느 link라는 커스텀태그를 이용하지만 아니 이번에 다른 팀들을 보니 커스텀element를 만든팀이 있어서 이렇게 해도 괜찮았을 것 같다. 시간이 남는다면 고쳐보자. 어쨋든 a태그에 __target=blank라던가 이런속성만 따로 빼주면 spa를 a태그로 완벽히 조절할 수 있다. 최상위 모듈에서는 전역상태를 처음에 가져오거나 라우터에 페이지들을 전달하는 역할을 한다.

 이제 구조를 좀더 구체적으로 설명하자면 폴더에는 pages, containers, components, utils, public이 있다. 유틸에서는 api나 컨테이너에서 사용할 부모 클래스, 필요한 함수등을 넣어주고 public에서는 공통 스타일이나 이미지를 넣어줬다. 페이지는 말그대로 페이지 역할을 하고 컨테이너는 전역상태를 가져오거나 state를 정해주는 말하자면 react의 컨트롤러 부분만 빼온 역할을 한다. setstate, compoentdidmout, 이벤트위임을 사용해서 컴포넌트에서는 오직 view의 역할만 하게된다. 리렌더링을 어떻게 할까 하다가 사실 지금 내가 생각할 수 있는 것은 세가지다. 1. 전체를 렌더링, 2. 바뀌는 부분만 재렌더링, 3. 트리구조로 만들고 virtual dom만들어서 바뀐부분만 적용. 인데 두번째방법은 코드가 너무 지저분해지고 첫번째 방법은 효율적이지 못하다. 그리고 세번째방법은 너무 어렵다. 고작 2주만에 더 정확히는 내부 코드작성하는 시간까지 합쳐서 리액트처럼 동작하게 만든다?? 이건 절대 불가능하다. 내 능력부족이라고 할수있겠 아니 그냥 못한다. 일년주는것도아니고 말이 안된다. 그래서 선택한 방법은 전체 랜더링이다. 보니까 저번 합격한 기수의 분들도 이런 방식을 많이 선택했고 이번에도 많은 팀들이 그런것같다. 또 생각보다 전체를 렌더링하는데 시간이 오래걸리거나 깜박거리는 현상이 발생하지는 않는다. 인터넷은 생각보다 많이 빠르고 발전해왔다. 하여튼 구조짠게 거의 전부라고 구조 얘기를 너무 많이 한것같다.

 로그인 구현하는 배포까지 할려고 했는데 망할 타입스크립트때문에 너무 꼬여버려서 배포를 하지 못했다. 팀원이 pr 받으면 배포는 이제 할 수 있기는 한데 아마 내일 할 것같다. 

 느낀점?? 이라면 이번주는 조금 빡세지 않아서 그런지 특별한게 없다. 그냥 전체적인 구조를 짜보니 조금 발전한 느낌?? 아마 주니어가 이런 구조를 짜는일은 없을 것이지만 아니 없는만큼 취업전에 이런 경험을 해본것은 엄청나게 큰 도움이 된다고 생각한다. 다음주에 잘 만들고 후기를 적겠다.

 

https://github.com/woowa-techcamp-2021/cashbook-03

GitHub - woowa-techcamp-2021/cashbook-03: 우아한 테크캠프 4-5주차 가계부 서비스 - 윤민상, 전상인

 

https://www.youtube.com/watch?v=VXi77isnHqA&ab_channel=%EC%9C%A4%EC%9C%A4