하루한냥 감정일기

하루한냥은 고양이 스티커로 하루를 기록하는 감정일기입니다.
매일을 기록하고 나만의 고양이를 모아보세요.

배포 링크

http://daily-nyan.com

시작하기

설치 및 실행

git clone https://github.com/ShinjungOh/Haru-Hannyan

npm install

npm run dev

사용한 기술

TypeScript	React	Vite	Emotion	Zustand	Jest
Git	Husky	Eslint	Prettier	Storybook	LottieFiles

하루한냥, 어떻게 만들었나요?

1️⃣ 피그마로 스토리보드를 기획했어요.

🎨 Figma 바로가기

하루한냥의 디자인 시안과 디자인 가이드를 확인할 수 있어요.
피그마에 아이디어를 시각적으로 표현하고, 일관된 디자인 가이드를 적용했어요.
사용자에게 직관적인 인터페이스를 제공하며, 프로젝트의 전반적인 품질을 향상시켰어요.

📚 Storybook 바로가기

스토리북에 피그마의 디자인 가이드를 옮겨두었어요.
스토리북으로 UI 개발, 테스트 및 문서화를 할 수 있고, 링크를 통해 쉽게 공유도 가능해요.
실제로 배포하지 않아도 UI를 확인할 수 있어서 팀원과 소통이 원활해져요.

2️⃣ 체계적인 개발 프로세스를 거쳤어요.

🔎 프로젝트 개발 과정 바로가기

각각의 기능 별 이슈를 생성하고, 해당 이슈로 브랜치를 생성해 작업을 수행했어요. 어떤 내용이 변경되었는지 명확하게 전달하기 위해 각 커밋에는 상세한 메시지를 추가했어요.

코드의 일관성과 품질을 보장하기 위해, Eslint와 Prettier를 적용했어요. Husky를 사용해 pre-commit 시점에 코드 검사를 수행하고, GitHub Actions로 지속적인 통합(CI)을 구현해 프로젝트의 안정성을 높였어요.

각 기능 구현을 마치면 Pull request를 통해 멘토와의 코드 리뷰를 진행했어요. 코드의 품질을 개선하고 다양한 관점을 얻는 귀중한 경험의 시간이었어요. 소통하며 개발 능력을 향상시키고, 프로젝트 전반의 퀄리티를 높이는 데 크게 기여했어요.

3️⃣ 프로젝트 컨벤션을 정해서 진행했어요.

📃 프로젝트 컨벤션 바로가기

일관된 개발 컨벤션을 적용해, 프로젝트의 통일성을 높였어요. 브랜치 이름과 커밋 메시지에 동일한 규칙을 적용해서 어떤 작업이 진행되었는지 추적하기 편하고 이해하기 쉬워요.

코드의 역할에 따라 디렉토리를 분리했어요. 꼭 필요한 부분만 분리해 깔끔한 구조를 만들었어요. 재사용 가능한 공통 컴포넌트, 스타일을 분리해 효율성이 높아졌어요.

4️⃣ 블로그에 개발 과정이 담겨있어요.

✍️ Blog 바로가기

하루한냥의 탄생과 발전을 볼 수 있어요.
사용성을 높이기 위한 리팩토링과 어려움을 겪었던 트러블 슈팅 과정을 생생하게 담았어요.

• [리팩토링] 처음 만난 모바일, 효도폰 어플을 만든 사연
• [트러블 슈팅] 자바스크립트의 배열은 왜 그럴까?
• [트러블 슈팅] 11월이 되어야 관측되는 오류가 있다?
• [하루한냥] 심리 테스트 구현 : API 호출 함수 분리하기
• [하루한냥] 심리 테스트 구현 : 라디오 버튼 구현하기
• [리팩토링] useRef로 반응형 resize 이벤트 구현하기 (+ throttle)
• [리팩토링] 디렉토리별 index를 이용한 모듈화 작업하기
• [트러블 슈팅] Context와 Promise에 타입스크립트를 싸서 드셔보세요
• [하루한냥] 모달 모듈화 구현 : OverlayProvider와 Context API
• [하루한냥] 캘린더 구현 : Zustand를 이용한 상태관리 구현하기
• [하루한냥] 캘린더 구현 : 달력의 시작 요일과 마지막날 구하기
• [하루한냥] 로그인/회원가입 : 카카오 소셜 로그인 구현
• [트러블 슈팅] 모듈 시스템과 Jest 테스트
• [하루한냥] 레이아웃 구현 : 반응형 웹페이지를 위한 준비
• [하루한냥] 레이아웃 구현 : 메뉴바 구현과 리팩토링