doeunn.log

프로젝트에 MSW를 적극 도입한 이유 새로 프로젝트를 시작하게 되면, 프론트엔드 개발자라면 백엔드 개발자와 협업을 하게 되죠 ? 프론트엔드 개발자는 백엔드 개발자가 만든 API를 기반으로 요청을 보내 응답을 받고 화면에 적절히 보여주는 부분이 많을 수 밖에 없습니다. 그렇다보니, 프론트엔드 개발자의 작업이 뒤로 밀리는 경우가 생길 수 밖에 없는데요. 이럴 때 프론트엔드 개발자는 막연하게 기다리기만 한다면 당연히 프로젝트 진행이 딜레이됩니다. 그래서 저희는 이번 프로젝트에서 MSW를 적극 도입하여 초반에도 작업이 딜레이 되지 않고 생산성을 유지할 수 있었다고 생각이 듭니다. 어떻게 MSW를 활용했는지 저희 프로젝트의 경우, 백엔드 개발자 분께서 미리 정확한 API까지는 아니더라도 request와 respo..

react-hook-form을 도입했던 이유 저에게 유효성 검사는 항상 숙제와 같은 일들이였는데요. 우선 정규식과 onChange를 통해 바르게 입력하고 있는지 확인해야 하며 이에 맞는 alert 텍스트도 보여줘야 합니다. 물론 hook함수화 하여 하는 방법도 생각나겠지만, 분명 그 필드에 있는 값을 가져오기, 그 필드에 있는 값 없애기, 필드에 값 집어넣기 등 여러 부가적인 동작들까지도 필요하게 됩니다. 이러한 form 관리와 관련된 여러 기능들을 손쉽게 사용하기 위해 react hook form 라이브러리를 도입하게 되었는데요. react-hook-form 적용 과정에서의 이슈 + 알게된 내용 1) 중복되는 코드들 한 form에 input이 많아질수록 label + input안에 내용들 + error..

공용 컴포넌트 모듈화를 적극 도입한 이유 저는 "사용자에게는 일관적인 사용자 경험을, 개발자에게는 생산성 있는 경험을 제공하는 것"이 제가 가장 중요하게 생각하는 부분인데요. 이전 프로젝트에서는 초반에 모듈화 틀을 잘 잡아놓지 못해 서로 중복되는 스타일 컴포넌트를 작성하거나, 심지어 비슷하면서도 조금씩 다른 스타일을 가지기도 했습니다. 이는 사용자에게 혼란을 주며(동일한 기능을 하는데 스타일이 다르다면 사용자는 다른 기능을 한다고 인식할 수 있습니다), 개발자는 중복되는 스타일 코드, 기능 코드를 매번 작성해야 합니다. 이런 불편함을 해소하기에는 공용 컴포넌트 모듈화가 필요했습니다. 모듈화에 큰 어려움이 없었던 결정적 이유 모듈화에 큰 어려움이 없었던 이유는 초반 설계를 꼼꼼하게 했었기 때문인데요. Fi..

프로젝트 설명 본 프로젝트는 위치 기반으로 중고 물품을 확인할 수 있습니다. 사용자들을 채팅을 통해 중고 거래가 가능합니다. 사용자에게 더욱 합리적인 거래 서비스를 제공하기 위해 물품 별 시세 동향 조회 기능, 개인 가계부 조회 기능이 포함되어 있습니다. 진행 기간 2023년 4월 말 ~ 6월 중순까지 총 8주 동안 진행하였습니다. 팀원 Frontend 6명 + Backend 1명으로 진행되었습니다. (백엔드 1명의 경우, 수강하고 있던 학원 강사님께서 진행해주셨습니다) 페이지 구성 제가 직접 구현에 참여한 부분에는 을 표시해두었습니다 :) 로그인, 회원가입 메인 화면 검색 결과 화면 리스트 화면 (중고 상품, 무료 상품) 상세 화면 물품 등록, 수정 시세 동향 마이페이지 가계부 내가 등록한 상품 관심 ..