안녕하세요!

지난번에 캐럿마켓 리뷰를 제출하여 수상으로 아이패드를 받았는데 그 후기를 이번에 대신하려고 합니다. ㅎㅎ

받은 이후부터 어딜가든 부적처럼 붙이고 다니는 듕...❤️

웹 개발을 준비하신다면 캐럿 마켓 강의는 꼭 한 번 수강해보시는 걸 추천드립니다.
NextJS 라는 우주 최강의 프레임워크의 최신 기술을 제대로 배울 수 있는 거의 유일한 강의라고 생각하거든요. 거기에 TailwindCSS / Prisma / PlanetScale / React18 웹 어플리케이션을 구축하는 알짜배기 기술들만 제대로 모아놓아 개인적으로 최애 강의 였습니다.

강의를 마치면 웹사이트 하나 정도는 뚝딱 만들 수 있을 것 같은 자신감이 마구마구 생깁니다.

캐럿마켓 챌린지가 새로 열린다는 소식에 단숨에 신청을 했는데, 이렇게 1기수로 참여해볼 수 있어서 영광이었습니다.

저는 사실 요 강의를 나오자마자 빠르게 수강해서 3주? 정도만에 완강 하고 최종 빌드까지 다 마쳤습니다. 하지만 그로부터 1~2달이 지나고 다른 공부에 하다보니 강의에서 배운 내용들이 점점 머릿속에서 희미해지더라구요.
다시 수강을 하며 복습을 해야되나 그런 고민을 하던 찰나에 이렇게 챌린지 소식을 듣게 되어 얼마나 다행이라 생각했는지 모릅니다.

챌린지를 참여해본 결과 난이도는 평이한 수준이라 부담이 없었습니다. 주로 NextJS 프레임워크가 어떻게 동작하는지에 대해서 복습하는 내용이었습니다.

강의를 한 번 완강하신 분들이라면 아주 편안하게 졸업하실 수 있을거라 생각합니다.

이번 챌린지 중에서 강아지 영상 API를 SWR 로 다루는 코딩 챌린지를 하며 느꼈던 경험을 예로 들면

코드샌드박스에만 제출하고 해보기는 무언가 아쉬워서, Vercel로 Deploy 하면서 Build 경험도 해보고 주변인에게 링크를 뿌려 반응을 보며 즐거웠습니다.

NextJS 어찌보면 빌드와 배포를 위해 설계된 프레임 워크이기 때문에 요런 배포 부분을 중점적으로 더 챌린지에 녹여보면 어떨까 하는 건의사항이 있습니다 ㅎㅎ

https://carrot-dog.vercel.app/
Vercel 로 배포해본 캐럿 마켓 챌린지
(강아지 영상이 너무 귀여워서 매일 들어와봄.. 🐶)

마지막 캐럿마켓 챌린지는 트위터를 간단하게 따라 만들어보는 것이었는데요.
NextJS 를 이용해 CRUD 기능을 구현하는 것이었습니다.

이름하여... 캐럿 트위터 !

https://carrot-twitter.vercel.app/

개발 기간 : 4~5일
NextJS / Prisma / PlanatScale / Vercel Deploy / TailwindCSS / Framer-Motion

TailwindCSS 를 이용하여 반응형 CSS

TailwindCSS 공식문서를 다시 읽어보니 모바일 뷰를 먼저 디자인하고 큰 화면을 디자인하도록 설계를 했다고 합니다. 니코쌤도 강의에서 그런 흐름으로 진행을 하셨죠. 하지만 저는 큰 화면부터 디자인을 시작하는 바람에 시간이 배는 걸린 것 같습니다. 다음부터는 모바일 퍼스트 !

그래도 TailwindCSS 를 이용하면 덕분에 CSS 에서 쓸데 없는 시간을 많이 절약한 것 같습니다
최고 !!! 🥕

역시 반응형이 만들 땐 까다롭지만 보람이 있는 것 같습니다 ㅎㅎ
메인 화면은 모바일 뷰에서 상단탭이 생성된다는...

이번 트위터 클론을 만들며 중점적으로 다뤘던 부분은 캐싱입니다.
어떻게 하면 로딩을 최소로 하는 페이지를 만들 수 있을까라는 고민에서 시작하여
매 feching 단계에서 cache modify 를 적극 이용하여 최대한 즉각적으로 업데이트가 되는 것처럼 보이게 만들고 싶었습니다.
물론 생각처럼 제대로 동작하지 않고 엄청난 버그가 산재해 있지만 일단 대충 굴러는 갑니다... 😅

그리고 업로드시 useSWR 의 캐싱 기능을 이용하며 즉각적인 화면 갱신을 구현해보았습니다.

db 에 mutate 하고 fetching 해서 데이터를 가져오기 전에 미리 cache 를 조작하여 화면이 변한 것처럼 꾸미는 것이죠.

인스타 클론에서 Apollo Client 로 맛보기 한 적이 있기 때문에 동작 원리는 이해했지만 막상 제가 구현하려니 또 다른 문제더라구요...

나름대로 cache data를 modify 를 해놓아도 화면에서 보이질 않고 fetching 데이터와 꼬이고 뭐 총체적 난국 ... 아직도 버그와 에러는 현재 진행형입니다 😂

우측에 해쉬태그들도 바로 업데이트 되는 걸 보실 수 있는데 트윗에 # 을 붙여 글을 쓰면 자동으로 추가되거나 기존에 있는 hashtag 에 tweet count 를 업데이트 하도록 만들었습니다.
인스타 클론에서 배운 부분이었죠!

이 부분에서도 역시 cache 를 다루는게 제일 어려웠는데, 조건별로 hashtag 를 추가할지 기존 hashtag에 count만 업데이트할지 사실 별거 아니지만, 저같은 입문자에겐 굉장히 어려웠는데 시행착오 끝에 구현했습니다. 🙌

Hashtag 를 누르면 해당 hashcode 가 들어있는 트윗들이 자동 검색됨 (신기방기)

Framer-Motion 을 이용한 덕분에 요런 동적인 디자인이 나올 수 있어서 만족스러웠어요 !

새창 트윗하기 기능은 Framer-Motion 의 AniamationPresence Wrapper 를 이용하여
손쉽게 애니메이션을 구현할 수 있었습니다.

Authentication 부분이 굉장히 까다로웠는데 SWR 을 이용하지 않고 강의에서처럼

Iron-Session 과 미들웨어를 이용하고 싶었는데 이번에 NextJS 가 12.2 버전으로 업데이트하면서 미들웨어 사용법을 조금 바꾸는 바람에 엄청 애를 먹었네요... 슬랙에서 다른 분이 도움을 주신 덕분에 해결할 수 있었습니다. 👍🏻

그리고 트위터처럼 리트윗 기능이 가능한데요.

원리는 아주 단순합니다. 트위터 끼리 self-relataion 이 가능하도록 했습니다.
리트윗할 때 본 트윗과 연결시키기만 하면 서로 id 를 기준으로 relation 하여 db에서 관리할 수 있더라구요.
그냥 ReTweet 이나 Comment 모델로 만들까 하다가 새로 만들기가 너무 귀찮아서 고민하던 중 쉬운 방법을 찾아 나름 뿌듯?했습니다.

제 나름대로 유지보수를 편하게 하고자 컴포넌트를 기능별로 잘게 쪼개고 틈틈히 리팩터링을 많이 했는데 덕분에 추가 기능 구현이 쉽고 버그도 금방 발견이 되더라구요. Clean Coding 의 맛을 쪼끔 느낄 수 있어서 좋았습니다 ㅋ
(제 1회 클린코드 노마드 북클럽 졸업자 🇰🇷)

이 밖에도 나름 이것저것 실험적인 것들을 많이 넣어보았는데 제대로 구현된 건 거의 없습니다 😂

지저분한 제 github repo 도 공유해보겠습니다.
https://github.com/geonya/carrot-twitter

많은 검토 비판 부탁드리겠읍니다 🙏🏻

혼자 공부를 하느라 정말 막막하고 힘든데 노마드 코더가 많은 의지가 되어주는 것 같습니다.
날씨도 더운데 열공하는 노마드 식구들 모두 화이팅입니다! 👊