밤은 짧아, 걸어 아가씨야

[하루한냥] 캘린더 구현 : 달력의 시작 요일과 마지막날 구하기 본격적으로 달력 컴포넌트를 구현하기에 앞서, 달력을 구현하려면 생각해야 할 중요한 포인트가 몇 가지 있다. 한 주의 시작을 어떤 요일로 할 것인지, 한 달이 무슨 요일부터 시작하는지, 매달 며칠까지 있는지 등을 고려해야 한다. 달력을 구현하려면 자바스크립트 Date 객체와 다양한 메소드를 이용하게 되기 때문에 해당 부분에 대한 이해가 필요하다. 이번 글에서는 날짜의 상태값 처리 내용을 담지 않았다. Zustand를 이용한 상태관리 구현은 다음 포스트에서 작성할 예정이다. 1. 한 주의 시작 요일 알아보기 맥북 기본 달력을 참고해 달력을 어떻게 만들면 좋을지 생각해 보았다. 한 주의 시작은 대체로 많은 달력이 그러하듯 일요일부터 시작하도록 정..

원티드 프리온보딩 프론트엔드 챌린지 7월 CSR/SSR 개념 정리&강의 후기 프리온보딩 프론트엔드 챌린지 7월 | 원티드 무료로 양질의 교육을 들어보세요! 챌린저만을 위한 다양한 혜택을 제공해드리고 있습니다. www.wanted.co.kr 이번 7월의 주제는 CSR/SSR과 Next.js였다. 지난 1월에 CRUD w React Query 챌린지를 진행하셨던 오종택 멘토님께서 Next.js 13에 대해 강의하신다고 해서 바로 신청했다. 1월 챌린지는 당시 나의 수준으로는 이해하기 어려워서 머리에 인덱싱만 해둔다는 생각으로 강의를 들었다. 그때 들어놓았던 개념이 이후에 도움이 되었는데, 특히 stale while revalidate 등이 그랬다. ('너... 상했어.') 나는 문사철 비전공자 출신이라 딱딱..

[하루한냥] 로그인/회원가입 : 카카오 소셜 로그인 구현 서비스를 이용하려면 로그인 기능이 필요하다. 하루한냥 서비스의 자체 로그인/회원가입 기능을 완성했다. 이후의 태스크는 카카오 소셜 로그인을 구현하는 것이다. 백엔드 처리가 필요해서 이 부분은 멘토님이 맡아주셨다. 나는 카카오 디벨로퍼스 공식 문서와 백엔드에서 만든 API를 참고해 REST API 형식으로 카카오 소셜 로그인을 구현했다. 1. 애플리케이션 추가 Kakao Developers 에 회원가입/로그인하고 내 애플리케이션에 들어가 새로운 애플리케이션을 추가한다. 앱을 추가하면 앱 키가 발급된다. 왼쪽의 설정 메뉴에서 카카오 로그인을 클릭하면 카카오 로그인을 활성화할 수 있다. 하루한냥 프로젝트에서는 이메일 ID와 비밀번호, 닉네임을 사용하기 ..

[WebStorm] 웹스톰 에디터 배경색 변경하기 나는 시력이 나쁘기도 하고 눈 건강이 좋지 못해서, 안구 건강을 지키기 위해 할 수 있는 일은 다 해보려고 한다. 개발자들이라면 대체로 IDE 색상 설정을 어두운 배경에 흰 글씨로 해두는 것이 디폴트일텐데, 이런 '다크모드'가 눈 건강에 좋지 못하는 얘기를 들었다. 요약하자면 전체적으로 어두운 색상 때문에 빛의 양이 줄어들어 동공이 커지고, 난시와 근시가 심해진다는 내용이다. 그래서 IDE의 설정을 밝은 테마로 바꾸어 보았다. 테마 변경 가이드는 찾으면 나오지만, 배경색만 교체하는 글은 찾기 어려워서 혹시 나같이 눈이 시려 개발에 어려움을 겪는 사람이 있다면 돕고 싶어 글을 작성해 본다. HTML 삽입 미리보기할 수 없는 소스 1. 기존 색상 테마 기존에..

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