[1주차 스터디 후기/15기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

https://programmers.co.kr/learn/courses/13885

[스터디/15기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

프로그래머스에서 진행하는 자바스크립트 스터디에 참여하게 되었다.
해당 스터디는 리더분들이 과제를 내주시면 1주일 동안 그 과제를 진행하면서 각자 자유롭게 코드 리뷰를 하면서 함께 성장하는 방식으로 진행된다.

먼저 첫 세션을 하기 전에 사전과제를 풀었는데, 클로저, 호이스팅, this바인딩 등 중요한 개념들 위주로 문제가 나왔고 솔직히 나한테는 조금 난이도가 있었다. 그냥 풀었으면 반타작 정도 했을 것 같은데 vscode 켜놓고 코드를 직접 돌려보면서 왜 이렇게 나올까 고민해가면서 답변을 적으니 그래도 모든 문제에 답변은 할 수 있었다.

그렇게 OT 형식의 1주차 세션이 끝나고 드디어 과제를 받았다! 📖

[1주 차 과제]
- TodoList라는 이름의 컴포넌트를 작성합니다.
- function style의 문법, class style의 문법 어느 것을 사용해도 좋습니다. ... 후략 ...

나는 왠지 함수로 클래스의 역할을 하도록 하는게 아직은 조금 어색한 느낌이 들어서 class style의 문법을 선택했다✨ 

 

그렇게 클래스형으로 TodoList 컴포넌트를 만드는데

class TodoList {
    constructor(data) {
      validateData(data); // => 할당할때마다 매번 함수를 실행해줘야 한다 😥
      this.data = data;
    }
        // 컴포넌트 구현 💻
}

const validateData = (data) => {
    // 유효성 검사 ✅
};

이렇게 PR 올리고 나서 아무리 생각해도 constructor에서 유효성 검사할 때 외부 함수를 쓰는 게 너무 마음에 들지 않았다.  그래서 괜스레 구글링하다가 뒤늦게 생각이 나서 getter, setter를 딱 쓰는데..

class TodoList {
    constructor(data) {
      this.data = data; // => 그냥 알아서 유효성 검사가 된다 ✨ like a 매직
    }
    
    set data(data) {
      // 유효성 검사 ✅
      this._data = data;
    }
    // 컴포넌트 구현 💻
}

코드가 거짓말같이 깔끔해지는 마법 🧙‍♀️  getter, setter의 존재를 몰랐던 것도 아니고 심지어 Java 팀플 하면서 주구장창 썼던 건데, JS에서는 이렇게까지 철저하게 외면할 수 있었나 싶다. 막상 이번에 적용시켜보니까 "아 맞다, 이렇게 쓰는 거였지! "하는 마음과 동시에, 새삼스럽게 setter, getter가 동작하는 거 자체가 재밌고 신기했다.

확실히 책으로 공부할 때와는 느낌이 다른 게, 이런 식으로 미션이나 프로젝트를 하면 머릿속에 지식으로만 있었던 개념들을 이리저리 조립해보면서 진정으로 체화되는 느낌을 받는 것 같다. 그래서 플젝하는게 중요하단 것을 알고는 있지만, 왠지 혼자 하는 프로젝트는 익숙한 것만 계속 쓰게 되는 느낌이 들어서 책이나 인강에 더 시간을 할애하게 된다.

 

 

아직 알고 있는 건 너무 적고, 앞으로 배워야 할 건 너무 많다는 생각에 조금은 조급한 마음이 들어서 계속 공부를 해서 머릿속을 채워 넣고 싶은 마음이 더 앞서게 되는 것 같다. 이럴 때 이렇게 매주 미션을 하고 코드 리뷰를 받는 형태의 스터디를 하는 게 정말 많은 도움이 될 것 같고 앞으로 있을 미션들이 기대됐다. 회사에서는 거의 퍼블리싱 위주로 일을 하다 보니까 자바스크립트에 집중할 일이 별로 없었는데 이렇게 자바스크립트로 미션을 하면서 하루 종일 어떻게 하면 더 좋은 코드가 될지 고민하는 과정이 진짜 너무 재밌고 신났다.

계속 우당탕탕거리긴 했지만 그래도 이것저것 고민해가면서 최대한 깔끔하게 짜려고 나름대로 열심히 했는데, 다른 분들은 어떤 방식으로 구현을 하셨을지, 리더분들과 스터디원분들이 어떻게 코드리뷰를 해주실지 기대된다.

 

 

---

 

내가 짠 코드에 대해 리뷰를 받았다!

 

코드리뷰를 진행했는데 생각했던 것보다 더 재미있었다!

위 사진처럼 리더님들께서 내 코드를 리뷰해주시는 것도 도움이 많이 됐고, 다른 분들의 코드리뷰를 해주시는걸 보면서 내 코드에도 적용시켜보면서 새로운 내용을 알게 되기도 했다.

 

수동적으로 코드리뷰를 받기만 하는 게 아니라 나도 다른 수강생분들께 코드리뷰를 해드리면서 "이 코드에서 어떻게 하면 가독성과 성능이 더 향상될까?" 고민하는 시간을 갖기도 하고, 질문에 답변을 해드리기 위해서 고민하고 찾아보면서 내가 애매하게 알았던 개념들도 확실하게 정립되는 시간을 가졌다.

 

다른 수강생분 질문에 답변을 달기도 했다.

 

전체적으로 내 코드에 대해 좋은 말을 많이 들어서 기분이 좋았다 🥰