개발 알다가도 모르겠네요

두 번째 프리코스 과제는 우테코에서 제공하는 라이브러리를 활용하여 구현하는 과제로 1주차보다는 구현하는데 시간이 좀 더 걸렸다. 피어리뷰를 통해 1주차 과제 구현과 코딩 방식에 대한 피드백을 받았고, 2주차 과제에서는 피드백을 의식하면서 코드를 작성하려고 노력했다. 구현하면서 크게 세 가지 토픽에서 깨달은 점이 있다. 코딩 스타일 indent depth를 최대 2까지만 허용하는 요구사항이 있었기에 eslint를 적용하여 depth를 넘기지 않도록 강제하였다. Airbnb Style Guide로 코딩 스타일을 설정하여 형식과 규칙에 어긋나거나 가독성이 떨어지는 코드를 효율적으로 바꿀 수 있었다. 또한 prettier를 통해 들여쓰기나 따옴표, 세미콜론 등의 스타일을 강제하여 코딩 스타일을 일관되게 유지하고..

프리코스 첫 주 과제는 기존에 많이 접했던 코딩테스트 유형의 문제들이었기에 풀이 자체는 그렇게 어렵지는 않았다. 하지만 기존에는 신중하게 생각하지 않았던 개발 내외적인 부분들이 많았기에, 이를 하나하나 보완해나가는 것에 중점을 두었다. 이 과정에서 대표적으로 세 가지 토픽에서 깨달은 점이 있었다. Javascript Syntax 기존에 자바스크립트를 접했기 때문에 기본 문법은 숙지한 상태였지만 includes, flat, from, spread, reduce, forEach, map과 같이 숙달되지 않은 문법들이 많았기에 최대한 적용하여 숙련도를 높이고자 노력했다. 세부적으로는 splice와 slice의 차이점을 파악하였고, Map과 Object의 장단점을 파악해서 상황에 맞게 적용하는 법을 학습했다. ..

App의 state에 선택한 언어 추가 App 컴포넌트의 Suggestion 컴포넌트 생성하는 쪽에 선언해둔 onSelect 코드에 selectedLanguages를 자신의 state에 추가해보자. //App.js import { fetchLanguages } from "./api.js"; import SearchInput from "./SearchInput.js"; import Suggestion from "./Suggestion.js"; export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { this.state..

화살표 방향키 입력으로 seleectedIndex 변경 키보드 이벤트를 통해, selectedIndex 값을 바꿀 수 있도록 해보자. //Suggestion.js export default function Suggestion({ $target, initialState }) { this.$element = document.createElement("div"); this.$element.className = "Suggestion"; $target.appendChild(this.$element); this.state = { selectedIndex: 0, items: initialState.items, }; this.setState = (nextState) => { this.state = { ...this.s..

컴포넌트 구조 App 컴포넌트가 세 컴포넌트를 제어하는 형태이다. SelectedLanguages, SearchInput, Suggestion 각각의 컴포넌트는 서로 의존성을 띄지 않는 형태로 작성해야 재사용이 가능하다. App 컴포넌트 작성 // App.js export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { //TODO: 구현해야함 }; } 그 후, App 컴포넌트를 생성하는 index.js를 선언, index.html에서 불러오게 한다. // index.js import App from "./App.js"..