프로그래머스 자바스크립트 스터디 Mission3 리뷰

[Mission3]는 ajax를 이용해 서버에서 데이터를 불러오고 불러온 데이터로 화면을 구현하는 과제였다. 이번 과제를 하기 위해서 며칠 전부터 딥다이브에서 해당 과제 범위까지 공부를 했는데 내 코드를 만드는 것은 또 다른 일이었다. 이 과정이 모두 끝나고 이전에 노마드 코딩에서 JS로 구현했던 투두리스트와 비교하는 시간을 가져봤다. API를 사용했었지만 혼자서 사용해 보려니 어려움을 느꼈다. 또한 '혼자만의 힘으로 해봐야지!'라는 의욕 과다의 시기였기 때문에 다른 사람의 코드를 보지 않고 구현하려고 했는데 열정은 좋았으나 이후의 Q&A에서 이유를 절실히 느꼈지만 열정만큼 좋은 성과를 내지 못했다.

나의 코드

App.js

*** dummy data ***


const searchInput = new SearchInput();
const searchResult = new SearchResult(dummyData, '#search-result');

export default function App(){

  this.setState = (nesxtState) => {
    this.state = nesxtState;
    searchInput.setState (this.state)

  }
  
  this.onSearch = function() {
    fetchData: value => {
      fetch(`*** API주소 ***`)
      .then(response => response.json())
      .then(data => {
        this.setState(data);
      })
    }
  }

APP은 위와 같이 설계를 해주었다. 위에 더미 데이터를 쌓아두고 처리를 해주었다.

주안점을 둔 부분: setState의 동작 이애하기.

이 과제를 하기 전 2주차만 하더라도 사실 setState의 기능은 알았지만 원리는 이해하지 못하고 있었다. 왜냐하면 setState의 기능이 그렇게 극적이지는 않았기 때문이다. 그러나 실제로 더미 데이터를 불러오고 검색을 통해 상태를 바꿔보면서 기능을 이해할 수 있었다. 역시나 언제나 적당히 알고 넘어가는 태도가 가장 위험하다.

searchInput 구현

export default function SearchInput($target, onSearch) {
  const $app = document.getElementById('app')

  const $form = document.createElement('form');
  $app.appendChild($form);

  const $SearchInput = document.getElementById('search-keyword');
  $form.appendChild($SearchInput);

  this.$target = $SearchInput

  $SearchInput.addEventListener('keyup', (e) => {
    const value = e.target.value;
    *** 자세한 내용은 생략 ***
  })

  this.setState = function(nextData){
    this.data = nextData;
    this.render()
  }
}

searchInput은 App의 하위에 있는 컴포넌트이다. 중점을 뒀던 것은 이벤트 리스너와 setState간의 내용을 주고 받는 과정에 대해서 생각해보는 것이었과 searchInput과 App이 강결합되지 않도록 하는 것이었다. 그래서 자세한 내용은 App에 구현을 하고 리스너 내부에서 메소드를 통해서 받아와 동작 시에만 호출을 하도록 구현했다.

실시간 세션의 소중함

프로그래밍 실력을 올리는데 지름길은 없다.

Mission3에서는 많은 점들이 부족했다. 그래서 Mission4에서는 어떤 방식을 통해서든 완주를 위해 구현을 마무리해보자는 🔥 의지를 불태웠던 동기부여가 되었다. 그리고 이럴 때 프로그래머스 스터디의 엄청난 장점이 발휘된다. 우리가 인강을 들으면 보통 정적인 상태로 문답을 주고 받는다. Q&A에 올리면 강상님이 답을 해줄 수도 있고 해주지 않을 수도 있으며 기다리기만 해야 한다.

하지만 프로그래머스 스터디는 실시간으로 다양한 질문을 올릴 수 있다. 현직에 계신 다른 스터디원 분들의 깊은 고민에서부터 닉네임을 짓게된 에피소드까지 다양한 질의응답이 이어진다. 이번 주 실시간 세션에서 가장 깊이 배운 점은 리더이신 로토님과 멘토님들이 처음 프로그래밍을 공부하고 커리어를 쌓아가던 과정이었다. 학교에서도 그렇지만 코드를 주루루루룩 막힘 없는 사람들을 보고 우리는 '재능이 있다'라고 쉽게 표현을 해버리지만 대부분의 경우 그 말은 자신의 노력 부족을 변명으로 돌리고 그 사람의 노력을 깎아버리는 태도라고 생각이 들었다. 로토님도 처음에 책 한 권에 있는 모든 코드를 타이핑 하면서 학습하셨고 노트에 구조를 그리면서 구현하는 연습을 하셨다고 말씀해주셨다.

최근에 다양한 부트 캠프가 경쟁적으로 마케팅을 벌이는 까닭에 99일, 100일 혹은 N일 정도면 프론트엔드 개발자로 취업 혹은 완성이 되는 것처럼 느껴질 때가 있다. 그래서 기존에 프로그래밍을 하면서 느꼈던 호기심과 기쁨이 조급함과 불안함으로 바뀔 때가 있었다. '나도 100일이 되어가는데 저 사람들은 취직까지 한다는데 나는 이런 과제도 해결하지 못하나?'와 같이.

그러나 로토님은 프론트엔드 개발자가 생각보다 익혀야 하는 부분이 넓어서 1년 반에서 2년은 걸릴 거라고 말씀해주셨는데 그게 생각보다 큰 위로가 되었다. 그러나 그렇게 말씀해주신 것이 마치 집행 유예를 받은 것으로 느끼지 않도록 앞으로 1년 정도 남은 시간을 계속해서 매일의 마침표를 느낌표와 물음표로 바꿔가며 성장해나가야겠다.