[수플] 프로젝트 발표준비

개인 발표 주제

이해하기 쉬운 코드를 작성하자!

주제 : 함수, 화면부 역할에 따른 디렉토리 분리와 주석달기

이번 프로젝트를하면서 이해하기 쉬운 코드를 작성하려고 많이 노력했습니다 API 요청, 함수, 커스텀 훅 등 처음봤을때 또는 나중에 다시 코드를 볼 때 빠르게 파악할 수 있도록 어떤 기능을 하는 함수인지, 

API 통신 분리

화면을 그리는 영역과 api 통신을 하는 영역을 나누어서 관리를 할 수 있도록 디렉토리 구조를 만들었습니다.

처음 만들때는 오히려 구조가 복잡해지는 것 아닌가 싶었는데 한 번 만들어보니까 코드의 역할이 분리되니 확실히 가독성도 좋아지고 코드 수정, 재사용하기도 용이해져서 역할에 따라 분리하는 것이 정말 중요하다는 것을 느꼈습니다

주석

방금 짠 코드는 당연히 주석없이 이해하지만 프로젝트 진행하면서 예전에 혼자서 사이드로 만들어봤떤 코드를 조금 바꿔서 쓸 수 있을 것 같아서 찾아봤는데 내가 짠 코드라도 며칠, 몇 주 지나니까 못 알아보는 상황이 있었습니다

이렇게 내가 작성한 코드도 작성할 때는 완벽하게 이해했다고 생각해도 며칠이 지나고 나면 이해하기 힘든 상황이 많았었는데 이번 진행하는 프로젝트는 팀프로젝트이다 보니 팀원분들께 완벽한 설명은 못 해드려도 어느정도 힌트가 될 수 있는 주석이라도 달아드리는 게 맞겠다 생각이 들었습니다.

이후 커스텀 Hooks, API 요청 함수 등 처음볼때 이해하기 힘들겠다 싶은 코드에는 주석을 달기 시작했고 코드를 나중에 다시 볼 때도 확실히 이해에 도움이 되는 것 같았습니다 좋은 주석을 다는 방법에는 어떤 것이 있는지 배울 필요가 있다는 생각이 들었습니다.

커스텀 훅

훅은 보통 구글링해서 가져와서 사용하는 경우가 많았었는데 회원가입 아이디, 이메일, 이름, 닉네임, 비밀번호 정합성 검사를 할 수 있는 커스텀 훅을 직접 만들어서 사용했습니다. 주석을 최대한 보기 쉽게 작성해봤고 덕분에 나중에 재사용할 때 크게 도움되었습니다.

고차함수 데이터 필터링

게시판에서 게시글 필터링을 위해서 고차함수를 사용했습니다

배열안의 객체 안의 배열안의 객체안의 값을 필터링할 조건인 기술스택들 중 하나라도 해당 되는 값이 있는 데이터를 배열로 반환하도록 만들었습니다.

같은 팀원 상호님이 고차함수를 잘 다루셔서 큰 도움을 받을 수 있었고 어려워서 해결 못 할 것 같았지만 결국에는 해결할 수 있어서 뿌듯했습니다.