[회고]FE프로젝트 최종 회고

 

프론트 프로젝트 '언성 히어로'

회고 방법

 이번에는 4L 방식으로  회고를 해봤다. 노션에 먼저 작성을 했었고 그 내용을 그대로 가져왔기 때문에 다소 딱딱해 보일 수 있지만 기록을 남겨둔다는 것에 의의를 두고싶다.

 

4L 회고를 진행하기 전에 간단하게 서론을 써본다.

 

 첫 팀 프로젝트였고 굉장히 재밌게 했다.

https://unsunghero.netlify.app/

Unsung Hero

 

아쉽게도 6월 쯤에 백엔드 서버가 닫힐 예정이라 이후엔 동작하는 모습을 볼 순 없을 것 같다.

 

 처음 써보는 기술스택도 많이 써봤다. 사실 더 써보고 싶은 기술들이 많았는데 현실적으로 프로젝트 기간안에 다 소화할 수 없을 것 같다고 판단해서 사용하지 않은 기술들도 있다.

이렇게 적어놓으니 뭔가 많아보인다!

 여러가지 문제도 많았다. 사진이 매~우 느리게 등장한다던가, 알림이 안온다던가, 이전 데이터가 캐싱 되어서 잔상이 남는다던가....대부분 react나 라이브러리들의 동작원리를 제대로 이해하지 못하고 사용해서 생겼던 문제였던것 같다. 차분하게 문제의 이유를 동작원리들과 엮어서 생각해보고 어느 부분을 수정해야할지 고민하면 어렵지 않게 해결할 수 있던 문제들 이었다. 

진짜 속터진다.

초기 기획때와 모습도 많이 바뀌었다. layout에 많은 변화는 없지만 전체적인 색감이 많이 바뀌었다.

기획 단계에서의 와이어 프레임

 

 최종 완성으로 제출한 모습이다. 포스트 작성이나 좋아요, 댓글, 팔로우 기능들도 다 구현했다. 다 올리기에는 움짤이 너무 많아지기 때문에 간단하게 2장 정도만 올려본다.

 

 아쉬움이 없었다면 거짓말이다. 하지만 진짜 열심히 했고 재밌게 했다.후회도 없지는 않지만 앞으로 보완해서 더 잘 하면 된다는 생각이다. 같이 밤을 지새워준 팀원들에게 감사를 전한다.

 

 

4L 회고

 

Liked는 프로젝트를 진행하며 좋았던 점,

Lacked는 아쉬웠던 점, 부족했던 점,

Learned는 스스로 그리고 팀원 등으로부터 배운 점,

Longed for 프로젝트 진행 전 목표 그리고 앞으로 바라는 점

 

Liked

• TypeScript: 웹 개발을 하면서 처음으로 정적 타이핑을 사용해봤다. 동적 타이핑을 사용할 때와 다르게 함수간 인자 전달과 같은 부분에서 정확하게 어떤 정보가 넘어오고 return 되어야 하는지 좀 더 명확하게 파악하고 구현했다. 덕분에 이전에는 두루뭉술 하게 사용했던 부분들을 좀 더 명확하게 알고 사용하게 되었고 useState와 같이 평소에는 대충 사용했던 기능들에 대해서 작동원리도 생각해 보게된 좋은 기회였다.
• axios: 바닐라 JS로 fetch만 하다가 axios라는 fetch 라이브러리를 처음 사용해봤다. 아직 fetch만 사용할 때와 큰 편리성을 느끼진 못하였지만 사용할 줄 알게된 라이브러리가 1개 더 늘었으니 만족한다.
• react-query: axios와 연계하여 사용하였다. axios만 사용할 때는 cache라든가, 데이터 값의 변화에 따라서 refetch처리를 하는것에 불편함이 있었는데 react-query를 사용하면서 해당 기능들을 지원 받아서 편리하게 사용 했었다.
• git: 처음으로 git을 활용해서 무언가를 해 본 느낌이 든다. 이전에는 단순하게 강의의 내용물을 올리거나 과제를 올리는 단순한 작업만 했었는데 이번에는 git을 좀 더 잘 활용해서 협업을 했다는 생각이 들어서 이전보다 git 활용도가 조금은 올라가지 않았나 하는 생각이 든다. 작업 때마다 branch를 생성해 본것도 처음이었고 merge의 방법에도 여러가지가 있고 다른 사람들의 pr을 local에서 확인하는 방법도 배웠다. 중간에 fetch, pull 과 관련하여 실수를 하고 그것을 해결하지 못해서 결국 다시 clone을 받은 것만 제외하면 큰 실수 없이 잘 활용했던 것같다.
• 3번째로 배포를 진행해본 것 같다. 이번에는 https→http로 API 통신 요청이 있었어서 netlify의 rediraction 설정을 해줬어야 했다. 다른 팀원분들에게 자료의 링크를 받아서 해결했지만 어쨌든 해결했으니 나름 뿌듯했었다. (물론 나중에 https → https로 api 통신요청이 바뀌면서 해당 작업은 딱히 의미가 없어지긴 했지만..)
• 팀원들 간에 소통이 자유롭게 이루어진것 같아서 좋았다. 팀원들 모두가 열심히 하느라 잠도 안자더라. 그렇게 열심히 하는 분위기가 형성되니 다들 더 노력해주었던 것 같고 문제를 해결하기 위해서 소통도 활발하고 자유롭게 이루어졌다고 생각한다.
• 그날 그날 개인 회고를 남겨두는 것이 나의 발전에 큰 도움이 되는것 같다. 물론 제대로 진행 했다고 보기는 어렵지만 배운 내용들을 남겨두고 나중에 다시 보는것이 복습의 효과도 있고 좋았던것 같다.

LACKED

• TypeScript: 미숙하게 사용했다. 함수에 인자를 받을 때 type을 정의 한다던가 interface 몇개를 정의해서 변수들의 자료형을 정하는 정도로 매우 미흡하게 사용했다. 그리고 TS로 인해서 발생하는 에러들을 해결하기 위해서 억지로 맞춰끼운 코드들이 상당수 존재한다. 그래도 TS를 직접 활용해 본 것이 처음이었고 웹 개발을 하면서 처음으로 정적타이핑을 사용해 본 경험이었기 때문에 이를 발판으로 앞으로 TS에 대한 숙련도를 더 올려나갈 계획이다.
• axios & react-query: TS와 마찬가지로 아직 숙련도가 부족하다. 캐싱이나 리패칭을 위해서 사용했는데 제대로 사용하지 못해서 엉뚱하게 리패칭이 이루어지거나 캐싱이 필요 없는 부분에서 캐싱이 이루어져서 오히려 문제를 일으켰던 경험이있다.
• Hooks: 이전에 강의를 통해서 많은 custom-hooks들을 만들어 놨다. 하지만 이번 프로젝트에서 활용한건 사실상 없다. 도움되는 hooks들이 많았는데 활용해봤으면 하는 아쉬움이 남는다. hooks를 직접 만들어 봤어도 도움이 많이 됐을 것 같다.
• editor: 에디터를 직접 구현하려다가 이건 좀 아니다 싶어서(너무 오래 걸림) 라이브러리를 적용하려 했다. 물론 팀원들과 상의된 내용이 아니었기 때문에 우선 적용해서 결과물을 보여주고 괜찮으면 package.json 파일에도 적용시키려했다. 그래서 toast UI Editor와 몇 가지 WYSIWYG 에디터를 찾아봤다. 이 때 can’t not find module 과 같은 에러도 봤고 해야할 다른 일들도 있었다 보니 우선순위에서 미뤄 놨었다가 시간이 지나면서 점차 잊어버렸던것 같다(issue로 남겨놨어야 했는데 에디터를 달아야 할지 확신이 없어서 안 남겨놨었던것 같다)
• 계획단계가 미흡했다는 생각이 든다. 물론 많은 부분을 준비했었고 이야기도 많이 나눴다. 하지만 구현을 하다 보니 미처 이야기를 나누지 못했던 부분들이 쏟아져나왔다. 공통 컴포넌트&hooks&스타일 구현과 반영이 주된 내용이었다. 이 외에도 data flow나 컴포넌트 구성에 대해서 좀 더 자세한 이야기를 나누었더라면 불필요한 fetch를 줄이고 이후에 많은 시간을 소요했던 컴포넌트의 스타일 적용 과 같은 부분에 쓰였던 시간을 아낄 수 있었을 것 같다.
• 개인적인 아쉬움은 집중력이 부족했던 것 같다. 프로젝트가 끝날 때 쯔음 프로젝트 전체 코드를 여러 번 되돌아봤다. 그러고 든 생각은 내가 쏟은 시간에 비해서 내가 반영한 결과물이 정말 적다 라는 생각이었다.(첫날에 단순히 axios 사용법을 익히느라 반나절 이상 날렸다든가..) 딱히 놀거나 참여를 안한것은 아니었는데 이렇게 느껴진다는 것은 중간중간 집중력이 흐려져서 잡생각을 한다거나 하면서 흘려보낸 시간들이 적지 않았을것 같다는 생각이든다. 막연하게 오늘 밤 샐꺼니까~ 하는 생각이 전제에 깔려있어서 오히려 집중을 못하고 비효율 적으로 하지 않았나 생각된다. 다음엔 포모도로를 사용하든가 해서 시간 관리를 좀 더 철저히 해야겠다.
• 간단한 기능 구현만 한것 같은 느낌이 든다. contextAPI 라든가 react-qeury의 적용 이라든가, errorBoundary, suspense, 공통 사용 hooks 구현 등등 사용해 본적 없는 기술들을 다뤄볼 기회가 많았는데 이름만 들어보거나 이름조차 못들어본 것들 이어서 욕심 부렸다가 팀에게 폐가 될까봐 과감하게 내가 하겠다고 나서지 못했었다. 근데 지금 보니까 결국은 다 할 수 있는 내용들이었다. 다음에 프로젝트를 할 때는 좀 더 과감하게 여러가지 시도를 해 보아도 될거같다.
• 일정 관리가 과연 제대로 된 것일까 하는 아쉬움이 남는다. 애초 계획이었던 19일 완성은 얼추 지켜진 것처럼 보였다. 그러나 마감일인 20일에 발표 자료를 만들려고 하다 보니 잔 버그나 고쳐야 할 점들이 계속 눈에 띄었다. 결국 마감 시간 약 2시간 전부터 시연 영상을 포함한 발표 자료를 만들기 시작했다. 그러다 보니 발표영상의 퀄리티가 썩 좋다고 말하긴 힘들었다. 다들 개고생해서 만든건데 발표 자료에서 그러한 점들을 제대로 담아내지 못한 것 같아서 미안하고 아쉬웠다.

LEARNED

• TypeScript는 내 생각보다 더 많은것을 배워야 하더라. 단순하게 타입만 몇 번 써주면 되는줄 알았는데 받아오는 값에 대한 타입을 확정해 주면서 좀 더 체계적인 개발을 할 수 있게 도와주는 것 같다. 앞으로 계속 써보자.
• Hooks에 대한 개념이 조금 더 생긴 것 같다. 이전에는 useState만 모호하게 가져다 썻는데 더 많은 hooks들에 대해서 알게 되었고 custom hooks의 경우 클로저 개념을 활용할 수 있다는걸 알게되었다.
• layout, global style 적용에 대해서 배웠다. layout을 적용하려면 route를 어떻게 적용해야 하는지, 전체 프로젝트에 균일한 css를 적용하려면 어떻게 해야하는지 대략적으로 알 수 있었다.
• 같은 기능을 이루는 파일들 끼리 묶는 폴더 구조가 좋은 것 같다. 문제가 생겼을 때 폴더를 여기저기 뒤질 필요 없이 해당 폴더 내에서만 문제를 찾을 수 있어서 편리했었다고 생각된다.

LONGED FOR

• 프로젝트 완성을 하자가 목표였다. 퀄리티를 떠나서 제대로 작동되는 완성품이 나오기는 할까 라는 걱정이 많았다. 우려와 다르게 다름 괜찮은 결과물을 만들어 냈고 다른 분들에게 괜찮다는 소리도 몇 번 들었으니 나름 성공한 것 같다. 이제 모바일 버전(무한 스크롤을 곁들인)과 다크모드를 추가하고 코드 리팩토링 까지 해서 더 잘 다듬어진 결과물로 만들면 될 것 같다. 메시지 기능도 있긴 한데, 퀄리티가 너무 떨어져서 이걸 지금 붙이는게 맞는지 모르겠다.
• 처음 사용해본 기술, 알게된 용어들이 많다. 이러한 것들에 대해서 공부해보고 숙련도를 더 올려보자. 특히 내가 구현한 것이 아닌 contextAPI, react-qeury, errorBoundary, suspense 같은 부분들은 따로 직접 구현해보고 적용해보자.
• 구현을 하다보면 에러가 많이 난다. 프로젝트를 진행하면서 주먹구구식으로 틀어 막은 에러들이 많다. 그 때 당시에는 시간의 제약이 있어서 그렇게 했다고 하지만 이제는 이렇게 저렇게 해보면서 억지로 틀어막는게 아니라 문제의 원인에 대해서 생각해보고 어떻게 해결 해야 할지 더 차분하게 생각하면서 우리가 사용했던 기술들의 동작원리등에 대해서 더 깊게 생각해 볼 때가 된것같다. 이러한 과정들을 잘 거친다면 추후에 면접 때 많이 도움이 될거라고 생각한다.