밤은 짧아, 걸어 아가씨야

[트러블 슈팅] 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..

[하루한냥] 스토리북으로 UI 컴포넌트 문서화하기 얼마 전 스토리북이라는 기술을 원티드 프리온보딩 챌린지로 처음 접하게 되었다. 강의를 들었지만 정확히 무엇을 위한 기술인지 이해가 가지 않았고, 당시의 나에게는 굳이 필요하지 않은 기능이라 관심도 적었다. 그 후 하루한냥 프로젝트를 완성했고, 주변에서 스토리북을 사용한다는 얘기가 많이 들려왔다. 개발자가 아니어도, 프로젝트를 배포하지 않아도 UI를 쉽게 확인할 수 있다는 장점에 마침 내 프로젝트에도 적용해보면 좋겠다는 판단을 했다. 이번 포스트는 스토리북을 사용하며 느낀 스토리북의 장점과, 적용할 때 어려웠던 점을 적어보려 한다. 📕 스토리북을 도입한 이유 - 스토리북의 장점 🤔 스토리북을 적용할 때 겪은 어려움 - GlobalStyle 적용하기 - us..

[리팩토링] 처음 만난 모바일, 효도폰 어플을 만든 사연 열심히 디자인하고 개발한 프로젝트에 스타일링 문제가 있을 거라곤 생각지 못했다. 모바일 화면을 직접 보기 전까지는. 이번 포스트는 모바일 화면에 맞춰 프로젝트를 진행할 때, 실제 기기로 디버깅하는 것이 중요하다는 깨달음의 과정을 담고 있다. 컴퓨터 브라우저에서는 정상적으로 동작해도, 모바일 기기로 테스트해보면 이상하게 돌아가는 버그도 있었다. 동일한 프로젝트를 실행할 때 데스크탑과 모바일 환경에서 어떤 차이가 있는지 알아보고, 리팩토링하는 과정을 적어본다. 문제 1. 실제 기기와 개발 환경에서의 화면 차이 모바일 최적화된 애플리케이션을 만들고자 했으면서, 실제 기기로 테스트를 해볼 생각은 뒤늦게 했다. 프로젝트가 마무리된 지금에서야 확인한 것은 아..

[트러블 슈팅] 자바스크립트의 배열은 왜 그럴까? (심리 테스트 유효값 골라내기) 프로젝트를 마무리 하기 직전, 스트레스 자가 테스트 페이지에서 오류가 펑펑 터졌다. 분명 괜찮아 보였는데 어떨 때는 제대로 되고, 어떻게 하면 또 '결과보기' 버튼이 활성화되지 않았다. 그 이전에도 마지막 문항만 선택했는데 '결과보기' 버튼이 활성화되는 오류로 머리를 싸맸던 적이 있기 때문에 또 한번 발생한 오류에 골치가 아팠다. 이럴 때는 어떤 순간에 오류가 발생했는지를 찾는 것부터 수수께끼가 시작된다. 그리고 발견한 자바스크립트 배열의 수상한 녀석 ... 이게 대체 뭔지 살펴보고, 오류를 해결해가는 과정을 적어보려 한다. 1. 이슈 발생 10개의 테스트 문항에 모두 답을 하면 '결과보기' 버튼이 활성화 되어야 한다...