밤은 짧아, 걸어 아가씨야

[트러블 슈팅] Netlify 배포하기 : 이미지 에셋 불러오기, Page Not Found 오류 해결  새로운 사이드 프로젝트를 시작했다. 백엔드 API가 준비되고 기능을 본격적으로 구현하기 전에, 기본적인 페이지 라우터 구성과 UI를 보여줄 수 있도록 데모 버전 사이트를 배포하기로 했다. Netlify로 간단하게 배포를 하고, 배포 후에 문제점들을 찾아 해결해나간 과정을 담아보았다. ⚙️ Netlify로 배포하기  - 처음 배포한 사이트에서 문제 정의하기🧩 이미지 에셋 깨짐 오류🚨 Page Not Found 오류🙆🏻‍♀️ 문제 해결 후 Netlify 살펴보기💛 마치며    Netlify로 배포하기최근에 리액트가 버셀과 공식적으로 협력을 많이 하고 있기 때문에 Vercel로 배포하고 싶었으나..

[트러블 슈팅]서버 사이드 렌더링(SSR)과 동적 스타일 문제 해결하기  랜딩 페이지를 만들어 프로젝트를 소개하고, 유입될 수 있도록 하면 어떨까? 서비스 기능 소개와 스크린샷 첨부 정도면 끝나는 랜딩 페이지를 기획했다. 필수 개발 사항으로는 프로젝트 사이트로 이동하는 버튼과 반응형 대응을 고려했다. 복잡한 API 요청도 없고, 백엔드 서버도 따로 필요 없으니 Next.js 14를 사용해 서버 사이드 렌더링으로 구현하기로 해본다. SSR로 정적인 페이지를 빨리 보여줄 수 있으니 유저 사용성도 좋겠지? 기획 단계에선 분명 '간단한' 프로젝트였다.  ⚒️ 기술스택 선정 이유  - Next.js 14   - React 18  - vanilla-extract❓ 서버 사이드 렌더링(SSR)과 마찰이 생기다🎨 v..

[트러블 슈팅] 11월이 되어야 관측되는 오류가 있다? 어느덧 프로젝트 완성이 코 앞으로 다가왔다. 모바일에서도 예쁘게 보이는지 스타일링과 UIUX에 중점을 맞춰 리팩토링을 진행하고 있었다. 그러다보니 달력은 넘어가고, 2023년이 2달 밖에 남지 않은 시점이 되었다. 그런데 갑자기 캘린더 헤더가 이상하게 동작했다. 이전 날짜로 이동하는 것은 제대로 되는데, 다음 달로 넘어가질 않았다! 이게 무슨 소린가? 그동안 정상 동작하는걸 몇 달 간 봐왔는데? 알고보니 정말 11월이 되지 않았다면 발견하지 못했을 오류였다. 프로젝트 개발 기간이 길어진 것에 고마워해야 하는 것인지? 😂 만약 실제 서비스하는, 앱스토어에 올라간 앱이라면 급하게 오류 고치고 심사받느라 진땀 뺐을 것이다. 캘린더 헤더 오류 발생 캘린더..

[트러블 슈팅] 모듈 시스템과 Jest 테스트 로그인, 회원가입 기능을 구현하면서 테스트 오류가 발생했다. 처음에는 단순히 post의 응답 타입을 지정하지 않아서, 혹은 타입이 잘못되어서 발생한 오류인 줄 알았으나 사실은 라이브러리를 잘못 가져다 사용한 문제였고, 생각보다 해결에 오래걸렸다. 허스키에서 1차로 테스트를 진행했지만 이슈를 놓쳤고 깃허브 CI에서 뒤늦게 알게 되었다. 초기 환경을 세팅할 때는 번거로웠지만 이중으로 테스트를 하니까 안정감이 느껴졌다. 이번 글에서는 테스트 오류와 이를 해결하는 흐름을 적어본다. 테스트 오류 발생 발단은 이렇다. 허스키 pre-commit에서 npm run test 명령어로 테스트를 하고 있는데, 오류가 잡히지 않았다. 아마 부분 부분을 나눠 커밋하다보니 한 커밋..