밤은 짧아, 걸어 아가씨야

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

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

[하루한냥] 레이아웃 구현 : 반응형 웹페이지를 위한 준비 프로젝트를 모바일에 최적화된 화면으로 기획했기 때문에 다양한 모바일 기종의 화면 크기에 맞추는 작업이 필요하다. 레이아웃 구현 단계를 진행하며 반응형으로 구현하고자 신경 쓴 부분이 크게 3가지가 있었다. 첫째로는 Layout 컴포넌트의 스타일 속성, 둘째로 스타일 토큰에서의 사이즈 지정, 마지막으로 Body 컴포넌트에서의 flex 속성 적용이 있다. 이번 포스트에서는 반응형 프로젝트를 만들기 위한 코드를 기록하려 한다. 1. Page, Layout 컴포넌트 구현 우선 배경이 될 Page 컴포넌트에서는 width, height를 100vw, 100vh로 잡고 연한 회색으로 칠해주었다. Layout 컴포넌트에서는 모바일 최적화를 위해 440x920으..

[하루한냥] 레이아웃 구현 : 메뉴바 구현과 리팩토링 드디어 개인 프로젝트를 시작했다. 매일 고양이 스티커로 하루의 기분을 기록하는 감정일기장 프로젝트이다. 워낙 이것저것 기록하는 것을 좋아하기도 하고 고양이도 좋아해서 이런 프로젝트를 해보면 재밌을 것 같았다. 피그마로 UIUX 스토리보드 기획과 디자인까지 직접 다 진행하고 있다. 프로젝트 세팅과 기본적인 구성을 마치고 이제 레이아웃 구현을 하고 있다. 별로 어렵지 않았던 이전 작업들에 비해 이번 메뉴바 구현은 조금 어려운 점이 있었다. 이번 글에서는 메뉴바를 구현하고 코드를 리팩토링해가는 과정을 담아보았다. 디자인 시안 모바일 최적화된 프로젝트이기에 뷰포트의 크기를 width 440px, height 920px으로 잡고 디자인했다. 기본적인 레이아웃은..