실전프로젝트 4주차 일주일간의 정리
이번주는 WIL을 제 때 못 썼다. 사용자들에게 첫 배포를 위해서 이것저것 정신없이 하다보니 WIL쓰는 것을 새까맣게 잊고 있었다. 또 이러지않기로 나 자신을 반성하며 지난 한주간의 일을 정리해보려한다.
항해99의 황순영님께서 진행해주신 마케팅 교육을 들었다.
교육에서 마케팅을 하기 위한 방법론과 어떠한 개발자가 좋은 개발자인가에 대해 배울 수 있었다.
마케팅을위한 방법론은 아래 4가지가 핵심 내용이었다. 이를 토대로 우리서비스를 정리했다.
- 우리의 타켓 고객 정하기 (페르소나)
- 우리가 고객에게 주는 가치
- 우리가 고객에게 원하는 행동(AARRR 마케팅 프레임 워크)
- 홍보채널 및 홍보방법
그리고 좋은 개발자란 어떤 개발자인가? 에 대해서
개발을 잘하는 것은 당연한 덕목이며 추가로 비지니스를 이해하며 일하는 개발자라고 말씀해주셨다.
지금 우리 서비스를 개발하면서 비지니스에 대해서는 크게 고려하지않고 기능적으로만 생각하면서 개발한 나를 돌아보게 하는 말이었다.
앞으로 어떤 회사에 가서 개발을 하던간에 비지니스를 이해하는 즉,
우리서비스가 목표하는 바가 무엇인지 정확히알고 목표를 이루기위해서 사용자가 많이 편리하게 이용할 것 같은, 필요로하는 할것 같은 기능을 구현해야한다는 의식을 가지고 일해야겠다.
마케팅 교육이 끝나고 고객들에게 배포가 1주일 밖에 안남은 시점에서 기능의 선택과 집중을 해야했다. 그래서 팀원들과 우리 서비스가 목표하는 바가 무엇인지 명확하게 정의하는 것을 다시 얘기하였고, 아래 우리가 고객에게 주는 가치가 우리서비스가 목표하는 바로 정의였다.
정의된 것을 토대로 우리 서비스의 핵심인 입양지식 페이지, 입양지식퀴즈, 입양신청서 쪽 기능을 조금 더 사용자가 편리하게, 변화에 유연하게 개선하기로 했다.
- 입양지식 페이지는 필수지식, 심화지식, 심화지식2로 되어있는데 내용을 좀 더 탄탄하게 강화시켰다.
필수지식에서는 입양하기전 알아야할 필수지식 부분을 강화하고
심화지식에서는 입양 후 반려견을 케어하기위한 방법들 중 꼭 필요한 부분만 추가하였다.
(계속 수정예정)
- 입양지식퀴즈는 정말 고민이 많았다. 처음에 퀴즈를 만들 때 아래보이는 각 문제마다 페이지 하나하나 만들었는데 정말 app.js의 양이 어마어마게 늘어나고 유지보수가 너무너무 힘들다고 느꼈다. 또한 리덕스를 사용하여 답을 저장하고 있었기에 새로고침시 답이 날라가는 문제도 있었다.
이 문제들을 개선하기 위해서 페이지 구조를 완전 바꿨다.
첫번째로 퀴즈 페이지 이동을 id를 기준으로 이동하는 것으로 만들고
퀴즈 데이터파일을 만들어서 id를 주었다.
그리고 퀴즈페이지에서는 퀴즈 데이터파일을 import해와서
퀴즈컨텐츠를 useParams의 id와 데이터의 id 기준으로 퀴즈데이터를 필터하여 나타나게 하였다.
그리고 퀴즈의 정답은 map을 사용하여 answer만 따로 뺀 후 정답 제출 때 user가 선택한 정답과 비교할 수 있도록 하였다.
몇문제 남았는지, 몇번 문제인지의 경우
import해온 퀴즈데이터의 전체 length와 id가 같다면 마지막 문제로, 같지않다면 퀴즈데이터의 전체length에서 id값을 빼주어 몇문제 남았는지 나타내어 해결해 주었다.
몇번문제는 id를 이용하여 해결하였다.
입력받는 값의 경우 id를 활용하였고,
입력한 데이터가 날아가지 않게 하기위해서 입력받은 정답을 id값을 기준으로 세션스토리지로 저장 시켰다.
버튼의 다음퀴즈와 채점하기text는 퀴즈데이터의 length와 id값을 비교하여 처리하였으며,
서버에 데이터를 보낼지도 퀴즈데이터의 length와 id로 처리하였습니다.
그리고 퀴즈를 보면 한줄 띄어서 작성되는 부분들이 있다. import한 데이터의 html태그를 적용시키기 위해 ref를 사용하여 퀴즈컨텐츠가 들어가는 태그를 선택 후 innerHTML을 사용하여 데이터를 적용시켜 해결하였다.
이렇게 구조를 바꾸니 다른 퀴즈를 만들때도 데이터만 넣어주면 되어 재사용에 너무 편리하고 변화에 유연하게 만들어보았다.
- 입양 신청서의 경우도 마찬가지로 사용자가 데이터를 입력도중 날아가게 하지 않기위해서 sessionStorage에 저장하여 처리하였는데 각 페이지에서 새로고침해도 데이터가 날라가지 않았지만, 뒤로가기를 누르고 다시 2페이지로 갓을 때 2번째 페이지에서 sessionStorage에 저장한 데이터가 날아가는 현상을 겪고있다. 일단 사용자 피드백을 받아야 하기에 이것은 빠른시일내에 수정하여 재 배포 할 예정이다.
저번주에 처리하기로 했던 부분들입니다.
- 회원가입 부분에서 아이디 및 닉네임 중복체크를 lodash의 debounce를 사용하여 구현하였습니다.
리액트에서 debounce를 사용시 주의해야 할 점이 있습니다. 리액트의 함수형 컴포넌트 방식을 사용하는 경우 특별한 처리 없이 선언된 debounce 함수는 재렌더링 시 계속 다시 선언되어 제대로 작동하지 않게 됩니다.
그러므로 함수형 컴포넌트를 사용한다면, useCallback를 활용하여 debounce 함수가 계속 유지 될수 있게 해야합니다.
- withRouter가 아닌 Hoc를 만들어서 각페이지에 명시적으로 감싸주어 인지도 쉽고 응집도가 높은 코드로 개선해 보았습니다.
- 기존 withRouter을 사용하여 pathname if문 처리한 것
-app.js에 Hoc를 활용하여 footer처리
- 서스펜스 API, s3에 이미지 업로드시 이미지 압축하기, 리액트스럽게 컴포넌트 잘 분리하기,리프레쉬 토큰활용하기(미완성)
