밤은 짧아, 걸어 아가씨야

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

※ 글또에서 무료로 지원받은 유데미 강의입니다. 클린코드 리액트(React) 📚 강의를 선택한 이유 📖 강의 내용 💡 수강 후 느낀점 👋 마치며 강의를 선택한 이유 이전에 원티드 프리온보딩 챌린지 강의를 재미있게 들어서, 해당 강의를 진행하신 장현석님의 유데미 강좌도 들어보고 싶었다. 리액트로 개발을 하고 있지만 무의식 중에 잘못된 코드를 작성하고 있는건 아닌지 고민이 생길 때, 올바른 방법으로 사용하고는 있는데 왜 그렇게 써야 하는지는 모를 때 클린 코드 강의를 들었던 기억이 도움됐기 때문이다. [원티드 프리온보딩 챌린지 11월] 클린 코드 개념 정리&강의 후기 원티드 프리온보딩 프론트엔드 챌린지 11월 클린 코드 개념 정리&강의 후기 클린 코드 프론트엔드 | 프리온보딩 FE 챌린지 11월 | 원티드 ..

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

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

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