미리보기

주요업무 및 상세역할 : webpack 경로설정,공용 협업 툴 설정, 커뮤니티CRUD, 마이페이지, 토큰관리, 검색 메인페이지, 의약품검색 페이지 디자인
CRA대신 webpack으로 필요한 라이브러리만을 설치하여 가볍게 만들고자 하였습니다.

프로젝트에 쓰이는 extension을 개인별로 적용해서 코드가 합쳐질 때 가독성이 떨어진다고 생각했습니다. 공용으로 사용할 extension들을 프로젝트 개발중 설정하였습니다.

게시판 글 상세조회, 게시글 쓰기, 게시글 수정,댓글 달기를 구현했습니다.

3-1. API를 연결하고 redux로 상태관리를 하는게 처음이다보니 많이 헤맨것이 사실입니다. 첫 프로젝트라 새로 배워야 하는 부분이 많았고, 이론과 실전은 다르다는 걸 깨닫게 해준 파트였습니다. 그래도 어려운 경험을 통해서 성장하고 디딤돌 삼아 나간다는 것이 뿌듯하다는걸 알게해준 보람된 파트입니다.

3-2. 로그인과 연결지어서 로그인 토큰이 존재하지 않을 때 글쓰기를 막게하거나, 작성자 본인일 때만 게시글 수정과 게시글 삭제를 보이게 하는 부분도 고민하여 구현했습니다.

마이페이지 - 이미지 업로드, 내 정보 수정, 알러지 정보 불러오기
4-1. useRef 후크를 사용했고, Redux 상태관리 툴을 이용했습니다.
토큰 관리

검색 메인페이지 , 의약품검색 페이지 CSS 디자인 : styledComponent를 이용해서 메인 페이지 두 개의 통일성을 염두해 구현했습니다.

반려견의 견주들과 펫시터들을 매칭 해주는 프로젝트
전반적인 CSS 디자인을 구상하고 일반 로그인, 네이버와 구글을 통한 oauth 로그인 및 인증관련 페이지, 헤더를 통해 토큰을 주고받는 API개발, 질문과 답변을 볼 수 있는 문의페이지를 개발했습니다.

만든 페이지들은 모두 반응형으로 제작하였습니다.

로그인시 input값 유무에 따라 로그인 버튼의 활성화/비활성화를 고려했습니다.

비밀번호나 닉네임에 필요한 최소한의값과 길이를 작성해야함을 염두해두고 구현했습니다.

Axios.interceptors.request와 Axios.interceptors.response를 사용해 access,refresh Token 두 가지의 토큰의 유무에 따라 헤더에 필요한 토큰을 담아 보내주는 공용 api를 만들었습니다.

3-1. api를 만들면서 적절한 예외상황을 고려하지 못해 무한요청을 보내게 한 실수를 겪었습니다. 이를 통해서 요청을 보낼 때 경우의 수를 명확하게 설정하고 예외상황을 검수할 코드의 필요성에 대해 느끼게 되는 계기가 되었습니다.
문의하기 페이지는 사용자가 찾고 싶은 질문을 빠르게 검색해주고, 검색결과를 나타냅니다. 각 질문들을 클릭하면 질문에 대한 답을 보여줍니다.
클릭한 질문 외에 다른 질문을 클릭했을 때 직전에 클릭한 질문의 답변이 계속 보이지 않도록 닫히게 설정하였습니다.
4-1. 인기질문 페이지에서는 조회수를 기반으로 최대의 조회수가 상위에 노출되도록 설정했습니다.

4-2. toast_textEditor와 kakaoMap을 적용했습니다.