[waffle] 쿠라스트로 팀 최종정리 - Frontend

최근 프로젝트를 할 때마다 느끼는 거지만, 앞으로는 프로젝트를 진행할 때 목표를 잡고 깊이있게 공부를 하면서 개발을 진행해야겠다는 생각이 들었습니다. 기본적인 화면 출력이나 CRUD같은 것들은 어느 정도 되는 거 같은데…, 이 이상 실력이 늘지 않는다! 는 생각이 들기 시작했거든요. 마냥 프로젝트를 많이 한다고 해서 도움이 되는 걸까? 하는 원초적인 의문이 들기 시작했어요. 도전을 좀 많이 하도록 하자, 라는 깨우침!

 

프로젝트에 대한 이야기를 드리겠습니다.

 

프로젝트 개요

→ 사용자가 입력하는 일기의 내용을 토대로 감정 분석을 진행, 사용자는 작성한 일기만을 통해 자신의 감정을 되돌아봅니다.

 

주요 기능 

• 작성한 일기를 조회할 수 있는 캘린더
• 일기를 작성할 수 있는 폼
• 일기를 작성한 사용자를 구분하기 위한 회원가입 및 로그인

정도가 필요하다고 생각했습니다. 흐름도가 있으면 편한데… 준비를 안하고 시작한 관계로 글로만 정리하겠습니다.

 

캘린더

요랬던게 ⇒ 요래됐슴당~

프로젝트 중간 정리 글에서 작성한 대로, 컴포넌트 분리를 위해 가능한 대로 쪼개보았습니다. 값을 쪼개놓으니 일기 작성 폼에서 값을 가져오느라 조금 애를 먹었던 거 같아요.(이 부분은 폼 부분에서 다시 이야기하도록 하겠습니다.)

• 캘린더에서는 좌, 우 화살표를 이용해 지난달과 다음달의 날짜를 확인할 수 있습니다.
• 작성한 일기가 있다면 해당 일자에 대해 시각적으로 표시를 해주어야 합니다.
• 작성한 일기에 대한 출력된 감정이 있다면 이 또한 해당 일자에 대해 시각적으로 표시해 주어야 합니다.

해당 화면에서 사용자가 상호작용할 수 있는 버튼은 크게 두 가지로 묶을 수 있습니다. 캘린더 상단의 좌우 버튼, 캘린더의 일자와 상호작용할 수 있어야 합니다.

 

일기 폼

캘린더 이후로는 컴포넌트 분리보다는 완성에 초점을 두고 마구잡이로 개발을 해두었는데… 그러다 보니 숫자가 잘못 출력되는 문제 같은 기본적인 문제들이 터지기 시작했고(전역변수 이슈!)… 일부는 제대로 된 수정도 없이 ‘정상출력만 되면 문제 없음!😋👍’이라는 마인드로 화면만 뽑아두었습니다.

일기 폼에서는 두 가지의 분기가 존재합니다.

• 작성한 일자의 일기를 선택할 경우 작성한 일기를 보여주어야 합니다.
  • 작성된 일기는 수정이 가능합니다.
  • 작성된 일기는 삭제할 수 있어야 합니다.
  • 작성된 일기를 기반으로 감정 분석을 진행할 수 있는 버튼이 필요합니다.
    • 감정을 분석 중일 경우 사용자가 다른 버튼과 상호작용할 수 없도록 해야 하며 이를 시각적으로 표현해 주어야 합니다.
• 작성된 일기가 없다면 해당 일자에 일기를 작성할 수 있는 폼을 제공해야 합니다.

처음 기획에서는 등록과 함께 분석된 감정을 받아와 바로 표시할 수 있도록 하는 방향을 생각했었는데…, 생각보다 분석에 시간이 걸려 따로 버튼을 제작하기로 했습니다.

 

로그인 및 회원가입

생각해 보니 제가 타 프로젝트를 진행하면서 로그인(토큰)을 구현해 본 적이 없었습니다. 이론으로 공부를 해둔 게 있기는 한데…, 이론을 가지고 어떻게 코드를 짜두어야 도르륵도르륵 잘 굴러갈지…. 확신이 없었어요. 코드를 찾아보며 공부를 해두기는 했으나! 불행인지 다행인지 해당 프로젝트에서 토큰을 사용하는 일은 없었습니다.

• 로그인 화면에서 아이디와 비밀번호 입력, 로그인 버튼과 상호작용할 수 있도록 합니다.
  • 아이디와 비밀번호를 형식에 맞게 입력하였는지 유효성 검사를 진행합니다.
• 계정이 없을 경우 회원가입 화면으로 이동할 수 있도록 합니다.
• 회원가입을 진행할 때는 아이디, 비밀번호, 닉네임의 값을 받아올 수 있도록 합니다.
  • 아이디는 영문과 숫자로 이루어진 4자 이상, 20자 이하의 조합으로 사용 가능합니다.
  • 비밀번호는 영문과 숫자, 일부 특수문자를 포함한 8자 이상, 16자 이하의 조합으로 사용 가능합니다.
  • 닉네임은 빈 값일 수 없습니다.

일기 폼에서도 사용되었지만 로그인과 회원가입에 React-hook-form이 사용되었습니다. Validation같은 Input 제어가 편해서… 사용하고 있었는데…. 좀 더 깊이 있게 공부를 해보겠습니다.

 

사용된 라이브러리

• Styled-components
• React-query
• React-hook-form
• Recoil

언젠가 기회가 된다면 라이브러리 공부를 심도있게 진행해 보겠습니다. 라이브러리에 대한 설명을 하고 싶은데 여건이 안 되네요. 🥲

 

어려웠던 점

프로젝트를 진행할 때마다 늘 어려운 건 백엔드와의 소통입니다. 요청을 보낼 때마다

• 요청을 잘 보냈는가?
• 진심으로 요청을 잘 보낸게 맞는가?
• 잘못 보낸 값은 없는가?
• 오타는 없는가?

라는 내용을 검토하고 검토하고 검토해도 에러가 뜨는 건 왜일까요. 백엔드나 통신 관련해서 아직 뭘 공부해 본 게 없어서, 오류에 대한 내용을 전달드리기도 굉장히 조심스러운 것 같아요. (공부하겠습니다.)

뿐만 아니라 프로젝트를 시작할 때 프론트가 어떤 자료를 준비해야 팀원끼리 원활한 소통이 될 수 있는지도 아직 잘 모르겠어요. (다양한 시도를 해보겠습니다.)

 

보완하면 좋을 점

캘린더 부분에 연도와 달을 클릭했을 때, 값을 선택할 수 있는 드롭박스가 있다면 편리할 거 같아요.

일기 폼이나, 일기가 보여졌을 때 캘린더에 해당 일자가 시각적으로 표현되었으면 좋을 거 같아요.

 

마무리

중간 정리 글이나, 발표 자료를 시간에 쫓겨 미흡하게 준비한 것 같아 이렇게 마지막 정리라도 길게 작성해 보았습니다.

결론: 흐름도를 꼭 그리도록 하자, 디자인 컴포넌트를 만들어 두자, 백엔드나 서버 공부도 해보도록 하자, 깊이 있게 공부하자.