프로그래머스에는 순수 javascript만을 이용하여 과제를 작성하는 것이 많이 준비되어 있다. 그 중 하나인 프로그래밍 언어 검색을 풀어보고 풀어보는 것에서 그치지 않고 어째서 이런 코딩을 했고 보너스 점수를 받는 부분도 한번 더 작성해보려 한다.
예전에 한 번 풀어봤던 경험이 있지만, 그때는 분명 다른 프론트 선배분들의 블로그의 도움을 받았던 기억이 난다. 그래서 다시 한번 스스로 푸는 시간을 가졌다.🙆
(만약 코드가 궁금해서 들어오신 분이 계시다면 맨 아래로 내려주세요. git 주소를 올려두겠습니다.)
과정
우선 컴포넌트 분리를 고려한다.
이 과제 테스트에는 편리하게도 class를 구분지어 첫 index.html에 띄워져있다. 이를 고려하여 문제를 해석한다.
컴포넌트는 3개로 분리할 것이다.
- 입력을 하여 검색을 하는 컴포넌트 - SearchInput.js
- 입력되어 있는 값에 따라 서버에 비동기 요청을 하여 배열을 받아와 보여줄 컴포넌트 - Suggestion.js
- 받아온 배열을 클릭 또는 키보드를 이용하여 선택하면 최대 5개까지 저장하여 보여줄 컴포넌트 - SelectedLanguage.js
App
- 입력값에 따라 서버에서 받아온 데이터(배열), 받아온 데이터에서 select 한 배열을 관리할 state
- 위에서 설명한 3개의 컴포넌트들을 화면에 보여주기 위해서 불러와 인스턴스를 생성
- SearchInput에 props로 onChange를 전달하여 입력한 값에 따라 불러오는 데이터를 다르게 한다.
SearchInput
- App.js에서 onChange를 props로 전달해서 관리.
- form의 enter로 인한 화면 새로고침을 막기위한 preventDefault
- input의 입력값이 변경될 때 마다 onChange
- 상,하,좌,우,Enter값을 제외한 입력값으로 프로그래밍 언어 검색
Api
- onChange 메서드를 App -> SearchInput으로 내려서 사용하기 전 비동기 요청을 하는 함수를 분리를 한다
- 이 과제에서는 하나이지만 실제 프로젝트라고 가정하고 재사용성을 고려하여 코드를 작성한다
Suggestion
- SearchInput.js의 키보드 이벤트에 따라 서버로 비동기 요청을 하고 => App.js의 state의 배열에 넣는다.
- 서버로부터 받아온 검색어에 따른 언어 배열을 보여준다.
- 이 컴포넌트에서 클릭 혹은 키이벤트인 상,하,Enter을 이용하여 선택을 하면 부모(App.js)로 전달을 해야한다.
- 따라서 App.js로부터 선택을 했을 때의 메서드를 props로 전달받아 사용한다.(addEventListener)
SelectedLanguage
- Suggestion.js에서 언어를 선택한다면 제한된 최대개수만큼의 배열을 렌더링하여 보여주는 컴포넌트이다.
- 최대 보여줄 개수만 컨트롤 하면 되는 컴포넌트이기 때문에 되게 단순하게 구현이 가능하다.
생각보다 오래 걸렸던 것 같다. 시간 내에 겨우겨우 풀었다. 아무래도 조금 더 연습이 필요할 것 같고, 추가점수를 주는 부분 같은 것은 구현을 못했는데 그 부분 까지 해봐야 할 것 같다.
공부 기록