드디어 두달간의 첫 개인프로젝트를 완료했다. 혼자 모든걸 다 해야하니 앞서 부트캠프 기간중에 했던 2주간의 바닐라 js 팀프로젝트, 3주간의 리액트 팀프로젝트와는 비교할 수 없을 정도로 오래걸리고 쉽지 않은 프로젝트였지만 그만큼 정말 많이 배우고 성장한 시간이었던 것 같다. 에러도 정말 많이 만나고...
새삼 느끼는거지만 프로젝트 하면서 배운 점, 느낀 점, 트러블슈팅 등은 그때그때 무조건 적어둬야겠다. 그렇게 직접 부딪히고 몸소 깨닫는 임팩트있는 사건들도 시간이 좀 지나니 언제 그랬냐는듯 기억이 안난다. 내 머리통이 기억에서 자꾸 지우려고 함
정신없던 두달동안 느꼈던 점들을 더 까먹기 전에 몇가지 적어보고 나중에 돌이켜봤을 때 "이때 이런걸 했지. 이때보다는 확실히 성장했구만" 이라는 뽕을 느끼기 위해 첫 풀스택 개인프로젝트 회고를 끄적여본다.
🧩 아토믹 디자인 패턴
프로젝트를 시작하려고 개발 환경을 구성할 때 폴더 구조를 어떻게 나눠야 할지 찾아보다가 "아토믹 디자인" 이라는 기법에 대해 알게 되어서 프로젝트에 적용해보았다. 아토믹 디자인은 5단계로 나누지만 일단 난 3단계로만 나누어서 컴포넌트 폴더 하위에 atoms, blocks, pages 폴더를 만들어 폴더 구조를 형성하고 컴포넌트를 구성해보았다. 근데 뭔가.. 딱히 좋은지 모르겠다. 물론 내가 이상하게 해서 그런걸거다.
최소 단위 컴포넌트부터 만들고 그들을 조합해 점차 더 큰 단위의 컴포넌트를 만들어 페이지를 구성한다는 아토믹 디자인의 컨셉만 보면 그냥 레고 조립하는 느낌으로 깔끔하게 잘 될 거 같았는데 막상 해보니 그렇지만은 않았다.
공통 컴포넌트(최소 단위 컴포넌트 = atom)을 너무 범용으로 만들어서 그런지, 사용되는 이곳저곳에서 그때그때 스타일을 커스텀할 수 있게 구성하다보니 props 가 많아져서 일단 코드가 지저분해졌다. 기능을 위한 props 인 경우도 마찬가지. 그렇다고 다양한 스타일이나 기능의 동일한 컴포넌트를 여러개 만들어놓고 그걸 사용하자니 그냥 그때그때 컴포넌트 만들어서 사용하는거랑 무슨차이인가 싶기도 하고...
이곳저곳에서 하위 단위에서 만들어둔 컴포넌트를 사용하여 조립하는 식으로 한다는 그 컨셉에 사로잡혀서 빌드업을 하다보니 어느샌가 컴포넌트끼리 얽혀있어서 의존성이 생겨있기도 하고(특히 스타일) 자율성이 억압되는 거 같았다.
물론 아토믹 디자인은 이미 여러 개발자들에 의해 검증된 좋은 방법론일텐데, 내가 아직 미숙해서 깔끔하게 구조화 시키지 못하는 거 같다. 느꼈던 크고 작은 불편한 점들이 많았는데 이렇게 말로 적으려니 애매하고 잘 기억이 안나기도 하고... 아무튼 뭔가 느낀게 많았는데 여러번 더 경험을 해봐야 할듯
🛰️ 전역 상태관리 툴의 필요성
전역 상태관리의 중요성이야 알고있었지만, 상태관리 툴을 따로 써본적이 없어서 여태까지는 Context API 만으로도 충분하지 않나 싶었는데 이번 프로젝트를 하면서 Redux나 Recoil 같은 상태관리 툴의 필요성을 실감하게 되었다. 근데 뭐때문에 그랬는지가 기억이 안난다(...)
분명히 일단 Context API 로 전역 상태관리 하다가 "아, Context API 로는 안되겠다. 이래서 상태관리 툴을 써야하는구만?" 이라고 무릎을 탁! 치며 실감하게 된 계기가 있었는데 그게 뭐였지
Context API 로는 불가능했나 가능은 하지만 이러면 그냥 상태관리 툴 쓰지 싶었나 아무튼 이유가 있었는데 기억이 안난다. 왜 안적어놨을까..
뭔가 깨달은 순간이 있다면 일단 꼭 적어놓자.. 😂
아무튼 덕분에 미루던 상태관리 툴 공부도 하게 되었다. 뭘 쓸까 하다가 일단 Redux-toolkit 공부해서 적용했다. 요즘은 Recoil 많이 쓰던데 왜 그런지나 좀 찾아봐야겠다.
도대체 뭐때문에 그랬지
🏂 리액트 숙련도
리액트에 꽤 많이 익숙해졌다. 괴랄하고 신박한 기능이 아니라면 그래도 웹사이트의 근본이 되는 웬만한 기능들은 "구현"은 가능하다(물론 찾아보면서). 하지만 딱 거기까지. 숙련도는 여전히 초심자 수준인 거 같다.
일단 사용하는 리액트 훅이 너무 제한적인듯하다. 숨쉬듯 당연하게 사용하는건 useState, useEffect. 전역 상태 관리를 할 때에는 useDispatch, useSelector 혹은 context api. 라우팅 관련 처리를 할 때에는 useNavigate, useParam, useLocation. 딱 이정도...
"구현"을 위한 훅들은 자연스럽게 잘 사용하는데 그 외에 useMemo, useCallback 와 같은 "효율성"을 위한 훅을 사용하지는 못하고 있다. 기능과 문법은 알고있지만 선뜻 사용하지를 못하겠다고 할까.
지금 이 훅들을 쓸만한 상황인가? 어디에 어떻게 적용해야 유의미한 성능 개선이 될까? 이런 것들이 감이 잘 안오는 느낌이다. 필요에 따라 만들어서 쓰는 커스텀 훅도 마찬가지.
게다가 코드 스플리팅이나 SEO, 서버 컴포넌트 등 성능 최적화에 대한 개념들까지..! 아직 리액트 조차도 더 알아야 할 게 많다.
익숙함의 차이는 많이 생겼지만 여전히 초심자 수준에 머물러있는 기분이다. 개념을 좀 더 공부해보고 코드를 리팩토링 해보며 이제는 다음 수준으로 도약해야 할 때이다.
🤦🏻 타입스크립트
애증의 타스.. 사실 아직 애증도 아니고 그냥 증인듯. 이거 도대체 왜쓸까
물론 쓰는 이유야 알지만 난 그게 아직 체감이 안된다. 그냥 개발할때 훨씬 더 힘들기만 할뿐.. 그 고생을 해가면서까지 써야 할 만한 확실한 리턴이 있나 싶다.
성격상 원래 아무리 좋은 기술이라도 써보기 전에 쓰지 않고 해보고 그것의 필요성을 실감해보고 나서 사용하기를 선호하는데, 타스는 그냥 교과서처럼 무조건 써야한다고 교육받기도 했고 뭔가 인식도 그렇고 시간도 없어서 그냥 첫 리액트 프로젝트때부터 일단 냅다 썼었다. 그래서 그런지 좀.. 소신발언이지만 왜 굳이 이딴짓을? 이라는 느낌만 엄청 받았던듯.
그래도 그때보다는 그런 무조건적인 거부감은 많이 덜해졌긴 하다. 그사이에 타스 공부도 꽤 하기도 했고 두번째니까 그래도 많이 익숙해져서 그랬긴 한데.. 하지만 이번에도 타스때문에 스트레스 많이 받았다.
자바같은 정적 타입 언어 쓸때처럼 변수 타입만 신경쓰면 되는거 아냐? 싶었지만 뭔가.. 얘는 뭔가 다르다. 기본 골자는 변수 타입 지정이 맞긴한데 뭔가.. 뭔가.... 별의별 타입을 별의별 방식으로 다 신경써야 한다고나 할까. 개발하다가 별 해괴한 에러 뜨면 한 80%는 타스 때문임. 대부분은 내가 잘못해서 발생한 타입 에러인데 가끔은 정말 도저히 모르겠는 듣도보도 못한 에러가 뜬다 ㅠ
아오 타스시치!
그래도 많은 개발자들이 타스를 선호하는 이유가 있겠지 하며 적응중이다. 이번 프로젝트를 하면서도 많이 배웠고, 쓰면 쓸수록 타스를 써서 느끼는 장점도 조금씩 체감하고 있는 것도 같다. 처음보단 많이 익숙해졌고 활용하는 폭도 조금씩 넓어지고는 있다. 하지만 아직도 어렵다..! 백엔드까지 타스 썼으면 머리 터졌을듯
🔍 백/프론트 적성
개인프로젝트를 진행하게 된 이유 중 하나는 백엔드 학습을 위한 프로젝트였다. 백엔드를 아예 모르는 프론트엔드 개발자가 되고싶지는 않아서. 풀스택 개발자라고 말할 정도로 프론트와 백 모두 능숙한 정도까지는 아니어도, 백엔드도 좀 할줄 아는 프론트엔드 개발자가 되고 싶다. 나중에 간단한 개인 사이트를 만들어서 운영해보고 싶어서 ㅎㅎ
그리고 엘리스 부트캠프에서도 3주밖에 안되지만 node.js 백엔드를 배우기도 했으니 그걸 그대로 날려버리기는 아까워서 js 백엔드의 기초정도는 닦아놓고 싶었다. 그래서 express + mongoDB 를 공부하면서 개인프로젝트를 진행했다.
확실히 둘 다 직접 해보니까 어느쪽이 더 잘맞는지가 체감이 된다. 백엔드도 직접 프로젝트로 실제 기능 구현을 해보니 나름의 매력이 있다. 화면상에 보이는거 신경 안쓰고 기능만 제대로 동작하게 만들어서 프론트에게 선사해주는 api 생산기 느낌. 하지만 역시 눈에 보이는게 없으니 좀 심심했다.
게다가 이번 프로젝트에서 내가 한 백엔드는 코드의 알고리즘적인 효율성이나 보안 등은 별로 신경쓴거 없는 간단한 수준이어서 많이 힘들진 않았지만, 제대로 파고들어간다면 흠.. 심연을 본다면 얼마나 어지러울지
아무튼 둘 다 해보니 나는 역시 프론트가 더 적성에 맞는듯. 프론트도 깊이 팔수록 "아 이거 맞나" 싶을때가 가끔 있긴 하지만 그래도 역시 프론트가 더 재미있는 것 같다. 기능 잘 되고 보기 좋은 UI 만들때마다 쾌감 굿
하지만 백엔드도 아예 놓고 싶지는 않다. 틈틈히 공부해서 조금씩 백엔드 개발도 더 해보고싶다. 개인 사이트 잘 운영할 수 있을 정도로!
🗓️ 마치며
생각했던 것보다 더 긴 두달이라는 시간이 흘렀다. 새로 공부하면서 진행한 것이라 예상보다 더 오랜 시간이 걸리긴 했지만 그래도 해가 넘어가기 전에는 목표한 기능들을 다 구현하여 최종 완성할 수 있었다. 정말 아슬아슬하게 마지막날에 배포까지 완료했지만..ㅋㅋ
근데 혼자 모든것을 다 해야하니 너무 오래 걸리는것도 그렇지만, 오랜시간 너무 많은게 머리에 들어오기만 해서 정리가 잘 안된다. 리팩토링 이전에 코드를 다시 쭉 살펴보고 복기하는 과정이 필수일듯. 사람이라는게 참 힘들게 공부하면서 직접 구현한 코드인데도 생각보다 금방 까먹는 거 같다. 나만그런가
UI/UX 부분에 대해서도 욕심이 생긴다. 완성한 사이트를 보면서 더 깔끔하고 이쁘게 만들수는 없었나. 실제로 여러 사용자들이 이 사이트를 이용한다고 쳤을때, 불편 없이 쾌적한 UX 를 제공해줄 수 있을만한 UI 인가? 에 대해서 계속 생각해보게 된다. 그리고 그럴 수 있도록 스타일과 디자인 시스템 등에 대한 부분을 깊게 파보고 싶은 마음도 든다.
아무튼 부트캠프가 끝나고 그동안 공부한 것들을 모두 쏟아부어 몰입한 두달이었던 것 같다. 이렇게 기본을 닦아놓으니 다음 단계에 대해서도 자연스레 알고싶어지고 한단계 더 도약할 수 있을 거 같다는 자신감이 든다.
이 경험을 기반으로 앞으로도 쭉쭉 나아가기 🏃♂️
