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

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

감사한 기회로 프로그래머스의 자바스크립트 스터디에 참여할 수 있었다!(궁금하신 분들은 링크 클릭!) 참여했던 이유는 매번 코딩을 하면서도 코드를 확인 받을 기회가 없었다. 이번 스터디를 참여하면서 느낀 것이지만 스스로 코드를 짜보는 경험이 정말 별로 없었다.

물론 클론코딩이 잘못된 학습방법은 아니지만 클론 코딩 위주로 학습을 해왔기 때문에 보통 디버깅을 하는 과정 역시 에러의 원인을 찾기 보다는 오타를 찾는 과정이었다. 스스로 코드를 짜면서도 '좋은 코드란 무엇일까?'에 대한 고민을 시작하는데 도움을 얻어보고자 신청하고 참여하게 되었다. 지금은 오티와 세션1만을 참여했지만 함께 하시는 리더님, 멘토님, 동기님들 덕분에 매일 엄청나게 배우고 있다.

그땐 그랬지 ⏰

첫 세션에서는 Todo-List의 초기작업으로 기능별로 컴포넌트를 만드는 학습을 하였다. 과거의 나는 로토 리더님이 말씀해주신 것처럼 자바스크립트를 하드코딩했었다.

const A = document.queryselector('#id').innerHTML =`
blah blah blah 
`

그렇기 때문에 불필요 하게 변수 선언도 많이 했고 코드의 로직을 남과 심지어 내일의 나도 알기가 힘들었다. 또한 이런 코드는 에러가 날 확률이 굉장히 높고 재사용이 거의 불가능에 가깝다! 이번 Todo-list를 만들면서 나는 이렇게 구현해봤다.

function TodoList(data) {
      this.data = data;

      this.getData = function(){
        const userInputs = this.data.reduce((acc,cur) => `${acc}<div>${cur.text}</div>`, ' ');
        return userInputs
      }

      this.render = function () { 
        document.getElementById("todo-list").innerHTML =this.getData();
      }
    }


    const todoList = new TodoList(data);
    todoList.render();

나름 무척 큰 도전이었다!

✔️ reduce 사용

우선 원시적인 for loop를 벗어났다!(for loop 그만해! 그러다 우리 다 죽어!!) map과 reduce를 접한 뒤에 for loop의 단점이 보였는데, 빠르고 간편하다는 장점이 있을지 모르겠지만 count를 올리는 i 등 불필요한 변수들이 추가되기도 하며 함수 실행도 삽입을 하기가 어려워진다. 반면에 reduce를 쓰면 그런 부분은 많이 줄일 수 있고 가독성이 높아진다. 더 나아가 map을 쓰면 reduce보다 함수 등이 더 드러나서 다른 사람들이 내 코드를 볼 때 도움이 될 수 있다. 이번 주에는 map, reduce 등에 대해서도 깊이 공부해봐야겠다.

✔️ what's this!

클론 코딩을 하면서 가장 큰 문제점, 그리고 이번 스터디의 하나의 큰 산처럼 느껴졌던 것이 바로 this의 사용이었다. 따라서 타이핑을 했었기 때문에 this에 대해서 깊이 고민해볼 필요가 없었다. 대부분의 클론 코딩이 구현에 초점이 맞춰져 있기 때문에 코드의 로직 자체가 복잡한 경우는 많지 않았다. (물론 다시 한 번 말씀드리지만 클린 코딩이 잘못된 공부법은 아니다. 다만 초기와 감을 유지할 때는 좋지만 반드시 바닥에서 다시 올라가는 시간이 필요하다고 생각한다) 그래서 this가 지금 무엇을 가리키고 있을까?에 대해서 생각을 하며 코딩을 했다.

✔️ Github 어디까지 써봤니!

깃허브를 개인적으로만 쓰다보니 간단히 vscode를 통해서 커밋만을 했었다. 그리고 심어지는 잔디를 보고 뿌듯해했다. 그러나 이렇게 branch를 생성하고 올리는 과정은 낯설었다. 그런데 이런 일련의 과정과 코드리뷰를 통한 commet 남기기를 할 수 있었다. 그리고 merge...? 머지...? 하면서 마스터 브랜치와 머지를 했다가 새벽 2시에 식겁하고 커밋 되돌리기까지 비동기적인 학습을 할 수 있었다.

세션 후 변경

function  Todolist($target, initialstate){
  target.innerHTML =
... 자세한 코드는 스터디의 내용이 포함되기 때문에 비공개합니다 ... 
... 양해부탁드립니다 ...
	}
this.render()
}

const todoList = new TodoList({
  $target : document.queryselector('#id')
  initialState : data
})

와! 저렇게 할 수 있구나!!! 하고 진짜 실시간 세션을 들으면서 감탄하면서 지켜봤다. 특히나 저렇게 $target을 파라미터로 설정하면 조금 더 재사용하기가 용이해진다. 자바스크립트를 쓰면서 '왜 나는 JS를 CSS처럼 사용하는가'를 해결할 수 있었다. 세션 2와 이후의 과제, 코딩을 할 때도 이렇게 parameter에 신경을 쓰면서 코딩을 해나가야겠다.

render는 리액트만의 것이 아니다! & 에러처리

특히나 render함수를 구현해보면서(그것도 무척 간단!) render를 하는 것이 리액트에서만 가능한 것이 아니라 자바스크립트에서도 가능하며, 이전부터 해왔다는 이야기를 들었다. 이것 역시 큰 배움이었다. 또한 지금까지 에러처리를 해본 적이 없었다. 그러나 디테일과 작성자의 의도나 센스는 에러처리에서 나온다는 생각을 많이 했다. 앞으로 클론코딩 및 토이 프로젝트를 할 때도 에러처리를 의식적으로 넣어봐야겠다.

변수명은 이름이다

변수명 함부로 짓지마라! 변수명에 대한 코드리뷰도 많이 받았다. 이는 다양한 코드들을 보면서 일정한 패턴을 만들어봐야겠다. 근데! 아직 이 function이 전체적인 로직에서 어떤 것을 담당해야하는지에 대한 이해가 부족한 것도 하나의 이유인 것 같아서 역시 이 또한 JS를 조금 더 딥하게 파봐야겠다.