[WIL] 항해 플러스 프론트엔드 1주차 회고

 
12월 14일부터 시작된 항해 플러스 프론트엔드 4기의 1주차가 어느덧 마무리되었다. 참 많은 생각들이 스쳐 지나가지만, 막상 글로 쉽게 써내려가려니 쉽지만은 않다. 문득, "글을 많이 써봐야 한다"라는 코치님의 말씀이 떠오른다.

---

 
이번 1주차 과제는 바닐라JS로 SPA(Single Page Application)를 구현하는 것이었다. 지금까지 바닐라JS만으로 코드를 작성해 본 적이 거의 없었어서 조금 막막했다. 어디서 어떻게 동작하는지도 코드 흐름 파악하는 것도 쉽지 않았으니 폴더 구조도 어떻게 잡아야 할 지 고민이 많았다.
 
정말 어렵고 힘들었다. 그렇지만 분명 재밌고 배움이 많았다.
 

💡 React 동작 원리에 대한 깨달음

바닐라JS로 setState와 BrowserRouter를 직접 구현해보는 경험을 했다. 책이나 자료를 읽는 것과 달리, 직접 코드를 작성하고 실행하면서 동작 원리를 훨씬 더 잘 이해할 수 있었다.
이전에는 setState의 두 번째 인수로 함수가 전달되는 방식이 어떻게 동작하는지 깊게 생각하기 보다는 쓰는 것에 급급해 단순히 "그런가 보다" 하고 넘어갔던 적이 많았다. 하지만 이번에 직접 구현하면서 "아, 이런 원리로 작동하겠구나"하는 흐름을 깨닫는 계기가 되었다.
뿐만 아니라 과제를 진행한 후 다시 리액트 관련 서적을 읽으니, 이번 과제에서 사용된 history API가 React의 BrowserRouter 내부에서도 사용된다는 사실을 알게 되었다. React로 페이지를 개발할 때 꼭 한 번 쓰는 BrowserRouter가 돌아가는게 historyAPI라니..
이번 과제를 통해 내가 React를 얼마나 깊은 고민 없이 사용해왔는지를 뼈저리게 느꼈다. 그동안 React에 잔뜩 의존하며, 동작 원리에 대한 고민을 깊이 하지 않았던 것이 화악 와닿았다. 
 
 

💡 테스트 코드와 CI 경험

이번 과제에서는 테스트 코드와 CI까지 경험해볼 수 있었다. 먼저 테스트 코드! 채용시장 공고에서 요새 무조건 보이는 듯한 TDD! 테스트코드!  업무에는 테스트 코드를 경험해 볼 수가 없어서 꼭 경험해보고 싶었는데 과제에서 경험해볼 수 있게 되었다.
 
 

 
처음은 유닛 테스트로 내 코드를 검증했다. 아직 낯선 테스트 명령어를 더듬더듬 쳐가면서 빨간 엑스로 가득했던 유닛 테스트를 초록 패스로 바꿔나가는게 제법 재밌었다. 왜 테스트를 통과못했는지 제법 친절하게? 알려줘서 과제의 의도를 어디서 놓쳤는지 빠르게 파악할 수 있었기도 했다.
 

진짜 처음해보는 e2e 테스트

 
그런데 유닛 테스트 끝났다고 끝이 아니었다. 유닛 테스트 통과하고 당당하게 진행한 e2e 테스트는 와르르 실패..  물론 내가 기능 구현을 그지같이 해놔서 그런거였지만..
 그래도 이번 과제를 통해 유닛 테스트와 e2e 테스트가 어떤 것을 테스트 하는 지를 알아보는 기회가 되었다. 검색해봤을 땐 봐도봐도 잘 외워?지지가 않았는데 한 번 직접 해보니까 확실히 와닿는게 다르다!
 

항목	유닛 테스트(Unit Test)	E2E 테스트(End-to-End Test)
범위	코드의 개별 단위	전체 애플리케이션의 흐름
대상	함수, 모듈, 컴포넌트 등 작은 단위	사용자 관점에서의 실제 사용 흐름
종속성	Mock 데이터로 외부 의존성 제거	실제 시스템(서버, DB 등)을 사용
목적	코드가 올바르게 작동하는지 확인	애플리케이션이 사용자 시나리오에 맞게 동작하는지 검증

 
 

내 인생 (아마도)첫 CI

특히 테스트 코드는 회사 업무에도 적용할 수 있으면 좋겠다는 생각이 너무 많이 들었다. 매번 추가기능 개발 할 때마다 다른 연관 기능이 무너지지 않을까 늘 조마조마한 마음인데, 테스트 코드가 있다면 덜 조마조마할 수 있을 것 같다. 
 
 

💡 멘탈 와르르맨션..이지만 극복해내자!

과제를 진행하고 멘토링을 진행하면서 내가 얼마나 무지하고, 불평만 하고, 안일했는가를 뼈저리게 느끼게 되었다. 그런 내 자신이 너무 부끄럽고 또 한심하고. 공부 할 게 많은 걸 알면서도 모른척 했던 시간들이 얼마나 후회스럽고 아깝던지. 기초 지식 등 앞으로 배워야할 게 가늠도 되지 않을 정도로 많아보여서 조급하고 막막하기까지 했다.

따쒸,,

 
과제 막판에 팡팡 터져버린 멘탈은 코치님들과 학습메이트 분들이 올려주시는 글들을 보면서 마음을 다잡는 중이다..😭 (회사에서 슬랙 보다가 사연 있는 여자가 될 뻔...🙄) 이틀 푹 쉬고.. 다시 힘내서 남은 주차 동안 더욱 깊이 배우고, 고민하고. 처음 마음 먹었던 것처럼 남들과 비교말고 내가 성장하는 것에 집중해야지!