프론트엔드 개발자 신상오
article thumbnail

💻 들어가며

골칫거리같던 회원가입과 로그인을 어느정도 마무리하고 본격적으로 게시판 제작에 들어갔다

사용자가 원하는 기술스택이 있는 글을 버튼을 눌러 필터를 설정할 수 있도록 만들고 있다.

그냥 슬쩍 눈으로 보기에는 그렇게 어려워보이는 기능은 아니었지만 

각 기술스택 이미지마다 클릭이 된 상태인지 클릭 되지 않은 상태인지 관리하고 

조건에 맞는 게시글을 보여줘야하기 때문에 기능에 비해서 복잡한 구조를 가지고 있다는 것을 느꼈다

로고를 누르면 opacity : 1 바뀌고 filter가 걸리도록 제작중인 기능


🛠️ 구현기능

API 통신 분리

멘토링 받은 내용대로 화면을 그리는 영역과 api 통신을 하는 영역을 나누어서 관리를 할 수 있도록 만들었다

처음 만들때는 오히려 구조가 복잡해지는 것 아닌가 싶었는데 한 번 만들어보니

코드의 역할이 확실히 분리되니 가독성도 좋아지고 코드를 수정하기도 용이해져서 역할에 따라 분리하는 것이

정말 중요하다는 것을 느꼈다.

1. api 디렉토리 생성 2. 회원가입 API POST
회원가입 버튼 클릭시 state가 hadleSignup 함수의 인자로 들어감