저번에 처음이자 가장 최근이었던 넘블의 챌린지가 디프백 챌린지였는데 이번에 두번째로 참가하게 된 챌린지도 디프백 챌린지가 되었다.
물론 이 타이밍을 기다린건 맞다ㅎㅎ 디프백 챌린지가 디자이너/프론트엔드/백엔드가 모두 참여하는 챌린지이기 때문에 협업을 경험할 수 있다는 측면에서 굉장히 메리트가 있기 때문이다.
물론 각 분야별 챌린지도 좋다고 생각한다. 각 분야별 주제도 재밌고, 스킬을 익히기에 좋다고 생각하기 때문
챌린지가 입에 익었는데 생각해보니 이름이
딥 다이브로 이름이 바뀌었다. 새단장✨
성격유형 테스트 만들기
이번 주제이다. 딱 떠오르는 하나 MBTI. 우리는 MBTI시스템을 착안하되 어떻게 우리만의 색을 입힐까 고민했다.
고민한 서비스 주제
- 여행지 테스트
- 음식 테스트
- 고양이 테스트
- etc.
서비스 주제 정하는게 정말 어려웠다. 왜냐하면 이미 대부분의 테스트가 나와있다. 심지어 난 똥 테스트 도 봤다..ㅎ
여하튼 그만큼 주제가 나올만큼 나오다보니 이걸 끌어내기가 어려웠다.
이미 테스트의 대주제는 나올만큼 나왔으니 소주제가 중요하다!
근데 그러다 문득 고양이, 물고기 등등 동물 테스트 얘기가 오가는 중에 아이디어가 떠오른게 테스트 결과에 메세지를 담을 수 있다면 좋지 않을까 싶었다.
이미 단순 테스트는 많으니 짧아도 무언가 우리만의 메세지를 담을 수 있다면? 그걸 소주제로 잘 이끌어낸다면? ...💡❗❗
그렇다면 멸종위기 동물을 테스트 결과로 보여주는 건 어떨까?!
팀원분들께도 말씀드려보니 반응이 좋았다. 이 이후에도 별다른 추가 의견이나 이견이 없어 우리의 주제는 이걸로 정해지게 되었다.
내 아이디어로 채택되니 이것도 참 뿌듯.
프론트엔드 기술 스택
나 포함 총 2명이 프론트엔드 파트였다. 같이 주제가 정해지고 조율해서 스택을 정해야했는데 나는 새로운 경험에 대해서는 다 수용하는 편이라 상대 분이 선택하는 걸 따라가기로 했다.
일단 NextJS를 쓰신다는데 오 완전 좋아! 그리고 TailwindCSS까지? 내가 한 번쯤 써보고 싶었던 것들이었다.
이렇게 결정된 우리의 스택s
Vercel 배포
세팅도 팀원 분이 해주셨고, 또 나도 직접 배포를 해보고 싶다보니 배포는 내가 맡게 됐다.
근데 시작부터 문제가 된 게 있다. 우리가 organization이라는 것..
vercel에서 개인 이용자의 배포는 무료로 제공하지만 org는 아니다. 유료 플랜을 사용해야 하는데 음...
그래서 고심하던 중 찾은 방법! Github의 Actions 세팅을 이용하는 것이다.
배포 흐름
프로젝트에 build.sh를 root에 추가하고, .github/workflows 폴더를 만들고 .yml를 생성해 Actions의 흐름을 작성한다. 이때 흐름은 대략 다음과 같다.
- 추적하고자 하는 repo 등록
- 배포 저장소의 역할을 할 타겟 repo 등록
- 해당 repo의 branch 선정
- branch를 감시하며 push가 일어날 경우 이 commit을 추적
- 해당 commit들을 자동으로 타겟 repo에 push
- vercel은 타겟의 push를 감지하여 deploy
물론 이 방법은 편법이긴하다. 그치만 우리같이 단기간 프로젝트를 진행하고, 하나만 짧게 유지하고자 하는데 유료플랜은 부담이 안 될 수가 없다..
그래서 선택한 방법으로 두개의 repo를 운영하여 배포를 하는 것.
이미 앞서 말했다시피 편법이기 때문에 추천은 하지 않는다. 본인이 여유가 있다면 유료 플랜 고고!
NextJS v13 입문
Next중에서도 13을 하게 됐는데 팀원분도 12를 주로 하고 13은 경험이 없다고 하셨다. 근데 이번에 새롭게 추가된 기능이 많으니 해보고 싶다고, 나도 당연히 콜!
감사하게도 프로젝트 세팅은 팀원분께서 해주셨다.
App Directory
기존의 page/ 디렉토리를 발전 시킨 것으로 app/ 아래에 페이지를 생성한다.
주목한 기능
- 자동 router 형성
- 폴더명/page.tsx로 구성하면 자동적으로
/폴더명이 페이지 route가 된다.
- 폴더명/page.tsx로 구성하면 자동적으로
- Server Component 지원
- 위 경로에 존재하는 것들은 기본적을 Server Component가 된다고 한다.
- Client로 사용하고 싶다면
'use client'를 맨 위에 선언
- Data fetching 방식을 fetchAPI로 통일(일원화)
나는 그냥 React로만 썼다보니 처음 써보는 Next의 이런 기능들은 꽤나 충격적이었다.
메타 프레임워크~ 메타 프레임워크~ 하는덴 다 이유가 있구나.
물론 내가 경험한 건 빙상의 일각일 뿐이겠지만
배포 충돌
사용하면서 당연히 아직 모르는게 훨씬 많기 때문에 온전히 Next13을 활용하진 못했을 것이다.
오히려 Next였기에 문제를 일으킨 것이 있었다(이건 아직 제대로 Next를 이해하지 못한 내 탓이다).
적어도 쓰고 있는 기능들에서는 많은 편의가 생길 것이라 생각했는데 뜻밖의 부분에서 문제가 생겼다.
이전엔 잘 되던 배포가 갑자기 먹통이 된 것.
일단 SSR이 가능한 Next의 특성을 이해했어야 했다.
몇가지 생활주기와 SSR적인 특징을 이해하고 방어 루틴과 체크 루틴을 짰어야 했는데 이를 못해서 에러가 터지고 배포에 실패한것.
Example
간단한 예시로
typeof window를 체크해야 하는데 이를 안하고 지나가서 에러가 났다. 이는 Next를 처음 쓰다보면 필연적(?)으로 마주치는 에러..
이게 제출을 얼마 안 남두고 터진 에러라서 굉장히 멘붕이었는데, 가뜩이나 Next13이 나온지 얼마 되지 않아서 에러에 대한 정보도 많지가 않았다. 그래서 더 문제.. 레퍼런스가 없다니.. 팀원 분도 마찬가지인 입장이었다..
그래도 포기할 순 없지! 배포 해결을 최우선으로 두고 계속해서 정보를 찾아봤다.
다행히 열심히 정보를 뒤적거려서 찾은 방법을 단계씩 적용시키다 보니 에러가 줄어드는게 보였다! 그렇게 몇번 수정을 거치니 에러가 사라지고 깨끗히 빌드/배포..!!
세상에 마상에 감사합니다..ㅠ 성공해서 너무 다행이야!
팀원 분들께도 잘못하다 폐를 끼칠 수 있어 걱정이었는데 다행히 배포가 정상적으로 이뤄져 한시름 놓았다.
역시 서비스 배포 후 에러 고치는 맛에 개발하지!!(?)
는 아니고 미치는 줄 알았다.. 개발자의 지옥 모먼트
기타
SSO 구현과 충돌
우리는 로그인 단계에서 소셜 로그인으로 진행하기로 했다. 그 중 카카오를 먼저 하게 됐는데 문제는 CORS때문에 이걸 맞추기 위해 매우 피곤했다는 것...
왜냐하면 작업은 local로 하는데 배포된 링크는 당연히 자기만의 도메인을 가지고 있고, local은 http고 도메인은 https라는 문제도 있었다.
이게 왜 문제냐 하면 결국 요청을 보낼 때와 받을 때의 주소가 달라지기 때문이다.
이 때문에 서버쪽에서도 배포를 도메인에 맞춰두면 로컬에서 로그인 기능 체크가 안 되고, 로컬에 맞춰놓으면 배포 환경 체크가 안 된다.
물론 나는 제출 전까진 당연히 개발단에서 진행하는게 99%이니 나중에 임시 배포로 도메인에서 되는지만 체크하면 되니까 local로 맞춰놓길 바랐다.
근데 소통의 오류였는지 서버쪽은 수정 안하고 프론트에서 redirect_url을 직접 수정해서 하면 된다길래 먼가 의아하면서도 일단 진행했지만 역시 안 됐다. 그래서 이걸로 시간을 많이 뺐겼다..
사실 이미 회사에서 SSO를 구현하고 쓰고 있기 때문에 당연히 서버쪽 수정이 이뤄져야 될 거라고 예상하고 있었고, 요청도 드렸는데 프론트에서 수정해서 하면 된다고 하시니 내가 모르는 방법이 있을 수도 있을 것 같아 그냥 진행했었다.
하지만 진행해보니 백에서 돌아오는 response(access token 포함됨)가 우리한테 들어오지 않고 백에서 모두 진행하면서 카카오의 도메인으로 돌아갔기 때문에 이를 잡아낼 방법이 없었다. 즉, 백에서만 모두 진행하는 것은 불가능했고 프론트를 한 번 거쳐야 했고, 서버도 수정이 필요했다.
물론 이건 내 탓도 있다. 나도 100% 확신이 없으니 진행한 거니까.
하지만 덕분에 이 부분에 대해선 확실히 짚고 넘어갈 수 있었다.
소감
사실 회사를 다니면서 플젝을 진행하다보니 작업에 할애하는 시간이 충분치는 않았던 것 같다.
그래서 이를 메꾸려고 밤을 샌 적도 제법이다.
그치만 아무리 밤을 샜어도 온전히 집중을 하진 못해서 아쉬움이 크게 남는다..
그래서 이번 결과 제출 후 평가가 끝나도 리팩토링은 좀 해야겠다. 그래야 만족스러울 것 같다.
물론 아쉬움만큼 좋은 경험도 많이 남았다. 배포 경험, Next에 대한 경험, 배포 문제 해결, 새로운 스택에 대한 경험 등 이전에 꼭 해보고 싶었고 욕심났던 스택과 경험을 이번에 해볼 수 있었다.
물론 깊게 파고들었다고는 할 수 없겠지만 경험을 쌓았다는 것, 이게 매우 고무적이고 의의가 있다고 생각한다.
무엇보다 내가 기분이 좋다ㅎㅎ
디프백 챌린지는 확실히 디자이너/프론트/백이 모두 참여할 수 있다는 점에서 매리트도 크고 좋은 경험이 되는 것 같다.
다음엔 보다 재밌는 주제로, 자주 열여줬음 좋겠다.
Reference
