프로젝트 소개

💡 주제 : 충청북도 휴양림 중 마음에 드는 곳에 메모를 남겨 저장하는 서비스
🗓 기간 : 02.28 ~ 03.2 (3일)
🔨기술 스택 : React, Recoil, Emotion
💻 담당 : 휴양림 저장/삭제/수정 기능 구현
👤 참여 인원 : 7

프로젝트 상세 설명
휴양림 목록을 API를 통해 받아오고 원하는 휴양림 정보를 선택해 메모를 남겨 저장할 수 있다. 저장한 휴양림은 검색을 통해 확인할 수도 있으며, 수정/삭제가 가능하다.

주요 기능 목록

• API 호출을 통해 휴양림 목록 불러오기
• 무한 스크롤 구현 및 PageList 완성
• 휴양림 정보 클릭 시 저장/수정이 가능한 모달창 표시
• 휴양림 정보 저장/수정/삭제
• 저장된 휴양림 목록 검색
• 유저의 활동에 해당하는 toast 표시

기능 구현

세 번째 과제에서는 휴양림 정보 저장/수정/삭제 기능을 다른 팀원 한 분과 함께 맡게 되었다. 나와 같은 기능을 담당하시게 된 팀원분께서 프로젝트 환경 설정을 맡게 되셔서 그 동안 무엇을 하고 있을까 생각하다가 휴양림 저장과 수정에 쓰이는 폼의 레이아웃이 거의 동일해서 공통의 <Modal/> 컴포넌트 하나를 만들고 props 값을 다르게 주어 각각의 폼을 만들 수 있게 하면 어떨까 해서 팀원 분께서 환경설정 하시는 동안 빠르게 만들어보게 되었다. props로는 type을 두어 add인지 edit인지 전달받고 edit type의 modal 컴포넌트를 요청하는 거라면 메모 영역은 input 태그로 수정가능하게 하였고, 버튼은 수정,삭제 버튼이 나타나도록 처리했다.
컴포넌트 UI를 만든 후에는 함께 기능을 맡은 다른 팀원분이 로직 구현를 맡아주셨고
모달창 처리와 관련해서는 내가 맡아서 진행하기로 했다.
일반적인 모달창이 그러하듯 외부 클릭시 close 처리가 되도록 모달창의 가장 바깥 영역인 ModalContainer에 click 이벤트를 적용하고 중앙의 모달창 영역인 ModalBox에는 click 이벤트에 e.stopPropagtion을 두어 ModalBox를 클릭했을 때는 ModalContainer로 클릭이벤트가 전파되지 않도록 처리했다.

🎃 Issue

Modal 컴포넌트 여닫음 문제

Modal컴포넌트가 닫힌 후, 다시 열리지 않는 문제가 있었다.
우선 처음 작성한 코드는 Modal 컴포넌트에서 isOpen state를 true로 초기화하고 외부 클릭 혹은 버튼 클릭을 통해 closeModal 함수가 호출되면 false로 변경하도록 구현했었는데 카드를 다시 클릭했을 때에 isOpen state를 true로 변경하는 처리가 없었다. 이와 관련해서 외부에서 함수를 props로 전달하여 열고/닫힘을 처리를 하는 방법을 고려했었는데 외부에서 별도 처리 없이 Modal 컴포넌트에서 열고/닫힘 처리를 모두 도맡아서 처리하면 컴포넌트를 사용하는 입장에서 편할 것 같았다.
이에 cardData가 변경될 때마다 isOpen state를 true로 업데이트하여 모달창이 열릴 수 있게 변경하였다.

하지만 open/close 처리를 Modal 컴포넌트 내부에서 모두 도맡아서 처리해야 사용하는 입장에서 편하지 않을까 생각했는데 궁금해서 찾아보니 대부분 Modal 컴포넌트로 함수를 전달해 Modal 컴포넌트를 사용하는 부분에서 열고 닫을 수 있도록 처리하고 있었다.

CORS 에러

개발 시에는 팀원분들이 proxy 서버 우회하는 방법을 사용해 해결하셨는데 배포 시에는 제공된 url만 사용하기 위해 다른 방법을 찾아보았다. netlify 설정을 통해 proxy 서버 설정을 하는 방법이 있다고 하여 시도해보았으나 간혹 에러가 발생하는 경우가 있었고 그래서 여러가지 시도를 해보다가 최종적으로는 heroku 통해서 프록시 서버를 만들어 우회하는 방법을 적용하였다.

📝 Learned

husky

컨벤션이 잘 지켜지지 않아 팀원 분께서 husky라는 것을 적용하셨다. husky는 git 사용 중 특정 이벤트에 특정 스크립트가 실행되도록 만들 수 있는 라이브러리이다. 즉 Git hook을 사용하기 편리하게 만들어주는 도구라고 할 수 있다. 팀원 분은 commit 전에 코드의 컨벤션이 잘 지켜졌는지 확인하기 위해서 pre-commit 스크립트를 생성하셨고, 이 떄 모든 .js파일을 검사할 경우 오래 걸리므로 lint-staged를 함께 사용하여 변경된 것만 검사하도록 만드셨다. lint-staged도 라이브러리로 커밋 전에 코드를 검사해주는 도구이다. husky와 lint-staged 조합이 많이 사용된다고 한다. 그래서 이번 기회에 협업 시에 적용할 수 있는 도구를 하나 더 배우게 되어 좋았다.

❗️ Lacked

• Recoil을 다뤄보지 못해 아쉬운 부분이 있다. 개인적으로 공부해보아야겠다.
• CORS 에러 해결 시에 여러 방법을 적용해보면서 시간을 낭비한 부분이 있다. 이번 기회에 잘 정리해두어 다음부터는 간단하게 해결 가능하도록 만들어야겠다.
• 저장된 데이터가 없을 때에 이를 알려주는 UI를 띄워 UX 적으로도 좋도록 신경쓰자! 혹은 스켈레톤 UI를 적용하는 것도 좋은 방법이다!