[waffle] 쿠라스트로 팀 중간정리 - Frontend

감정 분석 일기장 

프로젝트를 진행함에 있어 간단한 화면 구성을 토대로 프로젝트를 진행했습니다. 프론트에서는 '회원가입', '로그인', '일기장' 이렇게 총 세 개의 화면을 준비할 계획입니다. 현재 달력 부분을 출력하고 있으며 하단의 내용은 달력을 출력하기 위한 과정을 정리해 두었습니다. 

 

컴포넌트 분리

기존에는 반복 구조가 없을 경우 한 파일에서 코드를 길게 작성해왔는데, 컴포넌트 분리에 필요성을 느껴 이번 프로젝트에서는 컴포넌트를 분리해 보았습니다. 기존 방식에 비해 생각했던 것보다 고려해야 할 점들이 많아 분리에 시간을 많이 투자해야 했습니다. 

 

사용할 변수들의 위치를 고려하다 보니 부모 컴포넌트가 필요하고, 부모 컴포넌트를 만들자니 파일 구조가 복잡해지고... 부모 컴포넌트에서 props로 데이터를 넘기다 보면 결국 데이터가 흘러가는 컴포넌트 또한 렌더링이 일어날 텐데 의미가 있나...? 싶은 생각이 들었습니다. 컴포넌트 구조에 대해서는 좀 더 시간을 가지고 고민을 해야 할 것 같아서... 일부 데이터를 전역에서 관리해 주기로 했습니다. 

 

 

전역 상태 관리

데이터를 관리하는 방법으로 여러 컴포넌트 간의 데이터 전달 등을 한곳에서 관리합니다. 

컴포넌트를 분리하여 관리하기 위해 변수를 전역에서 사용할 수 있게 해주는 라이브러리가 필요했습니다. 이 또한 시간 관계상... 자주 사용했던 Recoil을 사용해 상태를 관리해 주도록 했습니다. 

 

왜 Recoil?

리액트 훅의 useState와 유사한 폼으로 사용이 가능해서... 편리했습니다. 

 

 

달력 출력 

라이브러리를 사용하지 않고 자바스크립트의 Date 함수를 사용하여 달력을 제작했습니다. Recoil을 사용해 month와 year 값을 전역에서 관리해 주고 달력의 몸통 부분만 State로 관리를 해주었습니다. 

 

날짜를 배열에 담아 요일에 맞게 공백을 넣는 작업을 어떻게 처리해야 할지 감이 잡히지 않아 코드가 조금 지저분 해진 데다가... CSS도 입혀놓지를 않아서 배치가 엉망입니다. 그래도 저희 식당 정상영업합니다. 

 

 

이후 계획

빠르게 회원가입과 로그인 폼을 제작하여 API 연결을 진행할 계획입니다. 감사합니다.