Prologue
사내 주니어 개발자 교육을 담당하게 되었다.
현재 프로젝트는 Vue와 Nuxt 기반으로 진행하고 있는데, 교육을 받게 될 주니어는 퍼블리셔에서 이제 막 개발자로 전향한 상태라 간단한 코드 정도만 읽을 줄 아는 수준.
어디서부터 개발을 진행해야할지, 어디까지 알려줘야할지 고민이 많았는데 최대한 빠른 현업 투입을 위해 간단한 토이 프로젝트를 진행해보며 Vue/Nuxt 사용법을 익히는 것을 목표로 하기로 했다.
토이 프로젝트로 진행할 내용은 간단한 회원가입 페이지와 제품 페이지 만들기.
간단한 프로젝트이지만, 기본적인 Vue/Nuxt 환경설정부터 Router, Vue Component, Derective, Store, 유효성 체크, REST API까지 프론트 전반적인 내용을 접해보기 좋을 것 같아 이 내용을 과제로 선정했다.
차후에 또 다른 주니어 개발자를 교육해야 할 경우에 재사용하려고 회고 겸 기록을 남겨둔다.
기능 요구사항
- 회원가입 페이지
1) 사용자 입력 정보
- 이름
- 휴대폰 번호
- 주소
- 이메일
- 신용카드 정보
2) 유효성 검증
- 모든 항목 빈값 불가
- 공백만 입력할 경우 불가
- 이름: 2글자 이상 문자열
- 휴대폰: 01로 시작 / 10~11자리 숫자 / 공백, 하이픈 입력 가능
- 주소: 우편번호 검색 API 사용
- 이메일 형식 체크
- 신용카드: 16자리 숫자 / 공백, 하이픈 입력 가능
3) 사용자 입력 정보는 Store에 저장
- 제품 검색 페이지
1) 제품 목록은 REST API로 제품 정보 받아옴
2) 제품 목록 정렬 및 필터링
3) 제품 클릭 시 상세 페이지 이동
그럼 이제 Start! 😊
