[3. 어디서부터 어떻게 시작해야하는지]
[3-1. 문제 정의 및 쪼개기]
- 요구사항 천천히 똑바로 읽고 이해하기 > 체크리스트 만들기
- ⚠️ 절대 코드를 먼저 짜기 말고, 요구사항 정리하기
- 체크리스트 형식으로 정리해두고, 체크해나가면서 하기
[3-2. 컴포넌트 구조 생각해보기]
- 마크업 보며, 컴포넌트로 바꾸어보기
- ⭐️ 개발 우선순위 잘 정하기 (
여기까지 최대 30분 정도) - input이 있어야 suggestion이 뜨고, SelectedLanguage로 등록할 수 있다.
- 모두 100%씩 만드는게 아니고, 중간중간 왔다갔다 하며 완성시킨다.
실전 문제 풀이
1. 체크리스트 정의 (20분)
문제 핵심 이해
- 프로그래밍 언어를 검색할 수 있는 서비스
- 1) 검색어를 입력하면 해당 검색어를 기준으로 서버에 요청
- 2) 서버에서 받은 검색어 목록을 렌더링
- 3) 검색어를 선택하거나 엔터키를 누르면 아래 요구사항에 맞게 동작
- API URL
- 프로그래밍 언어 조회
Get/languages- QueryParameter: keyword
?keyword=${keyword}
https://wr4a6p937i.execute-api.ap-northeast-2.amazonaws.com/dev`/languages?keyword=java` [ "Java", "JavaFX Script", "JavaScript", "Join Java" ]
필수
[ 언어검색 ]
처음 접속 시 화면에는 input창 한 개만 존재한다.
검색어 입력 시, 입력된 검색어를 API로 요청하여 추천 검색어 리스트를 받는다.
화살표 위, 아래를 통해, 추천 검색어 리스트를 순회가능하도록 한다.
현재 몇 번 째 언어를 순회 중인지
Suggestion__item--selected class 이용하여 표시한다.화살표 키를 누를 때에는 검색 동작이 발생하면 안된다.(예외처리)
첫번째 요소에서 화살표 위 누르면 맨 끝으로, 맨 끝에서 화살표를 누루면 맨 처음으로 와야함
순회 중 상태에서, 엔터키를 누를 경우 ‘[언어 선택]’ 동작이 발생한다.
input내 검색어를 모두 삭제할 경우, 추천 검색어와 해당 창이 보이지 않도록 한다
[ 언어선택 ]
언어선택 동작은 선택처리된 언어에서 엔터키 혹은 클릭 시 발생하며,
발생 시 현재 선택 처리 된 언어를 alert창으로 띄운다.
다른 문자열 없이, 언어명 그 자체만 alert창으로 띄운다.
[ 선택된 언어 렌더링 ]
alert으로 선택된 검색어는
SelectedLanguauge에 렌더링 한다.이미 선택된 언어를 다시 선택하여도, 중복으로 들어가면 안된다.
이미 선택된 언어를 다시 선택할 경우, 가장 뒤 순서로 들어간다.
- JavaScript, TypeScript, Python > JS 선택 > TypeScript, Python, JavaScript
옵셔널
화면 접속 시 input에 자동 focus가 된다.
추천 언어 목록에서, 입력 키워드와 일치하는 문자열에 대해
Suggestion__item--matched
클래스를 이용하여, 강조처리를 한다.검색어 입력하는 동안 API 호출 지연 처리 (debounce)
- 모듈 참고 (link)
- eventListener에 등록시 debounce 처리
검색어에 따른 API 응답 캐시처리
브라우저를 닫았다 다시 켜면 초기화 되어야 함 (sessionStorage)
- request.js의 getLanguageList 에서 처리하여, App.js에서는 해당 로직이 관여하지 않도록 설정
화면을 닫았다 다시 켜도 선택된 언어 목록이 유지되도록 만든다. (localStorage)
화면을 닫았다 다시 켜도 입력중이던 검색어, 검색된 언어 목록이 유지되도록 만든다. (localStorage)
- app.js의 초기 state를
getItem()으로 지정
- 입력어 추가, 변경 시
setItem(), removeItem()
2. 개발 우선 순위 정하기 5분
2.1 컴포넌트 구조 그리기
<App>
<SelectedLanguage />
<SearchInput />
<Suggestion />
</App>
2.2 API 더미 데이터 확인
- API URL
- 프로그래밍 언어 조회
Get/languages- QueryParameter: keyword
?keyword=${keyword}
https://wr4a6p937i.execute-api.ap-northeast-2.amazonaws.com/dev`/languages?keyword=java` [ "Java", "JavaFX Script", "JavaScript", "Join Java" ]
2.3 어플리케이션 흐름 확인
- SearchInput에서 검색어 입력 >> 입력된 검색어를 키워드로 API 요청 >> 추천검색어 리스트를
Suggestion에 렌더링
Suggestion에 있는 추천검색어 리스트 순회 >> 순회 중인 검색어 표시
- 검색어 엔터 및 클릭으로 선택 >> alert창으로 띄움 >>
SelectedLanguage에 순서에 맞게 렌더링
3. Feat_개발 환경 준비 (2:35 ~) 30분
- App.js 세팅
- <SelectedLanguage />, <SearchInput />, <Suggestion /> 만들고, 마크업 세팅
4. Feat_언어검색 (2:06~) 1시간30분
- onChangeKeyword에 따른 API 요청
- App.js로 부터 onChange 함수를 callback함수로 내려 받아 사용
- 리스트 순회 기능 구현
- 전역에 키보드 이벤트 등록
- currentIdx를 state로 관리하고, template에서 일치하는 idx일 경우 class 추가하도록 함
5. Feat_언어선택 30분
순회 중 상태에서, 엔터키를 누를 경우 ‘[언어 선택]’ 동작이 발생한다.
- App.js에서 submit Event함수를 정의 후 Suggestion의 setEvent에서 이벤트 할당
이슈
- onSelectLanguage= (현재선택된 language) ⇒ alert
언어선택 동작은 선택처리된 언어에서 엔터키 혹은 클릭 시 발생하며,
발생 시 현재 선택 처리 된 언어를 alert창으로 띄운다.
다른 문자열 없이, 언어명 그 자체만 alert창으로 띄운다.
alert으로 선택된 검색어는
SelectedLanguauge에 렌더링 한다.- onSelectLanguage에서 alert 이후, App의 state에 SelectedLanguage를 추가한다.
이미 선택된 언어를 다시 선택하여도, 중복으로 들어가면 안된다.
이미 선택된 언어를 다시 선택할 경우, 가장 뒤 순서로 들어간다.
- JavaScript, TypeScript, Python > JS 선택 > TypeScript, Python, JavaScript
언어는 최대 5개까지 가능하다.
- [a,b, c] ⇒ ‘c 입력 시’ ⇒ [c, b, a]
- 입력 값의 idx를 찾는다 ⇒ 없다면, push
- 있다면, 해당 idx의 값 지우고, 가장 뒤에 push
6. Feat. Optional 구현
- useLocalStorage, sessionStorage 모듈 구현
- 검색어 저장 기능 구현
- api 캐싱 구현
- debounce 모듈 생성
- debounce 적용
Error
- onChange 시 ‘change’ 요청하여 헤메임
- ‘keyup’ 이벤트로 변경 해결
- Cors Error
- 요청 url 입력시 ‘/’ 빼트려서 발생함
suggestion에서 키보드 이벤트가 한 번 누를 떄 마다 여러번 발생하는 오류
- 보이지 않는 것에 대한 기준 필요할 듯
- 테스트시 어떤 것이 통과하는 것에 합당한지
style.display = ‘none’element.hidden = true
- setEvent내부에서, keyup 이벤트 감지하지 못하는 이슈
- ⇒ 전역 이벤트로 할당