프론트엔드 개발을 위한 자바스크립트 스터디 회고

개요

근래에 자바스크립트 딥 다이브 라는 책을 정독하고 정리해보는 시간을 가지며 자바스크립트 본질에 대해 다시 한번 점검하는 시간을 가졌었다.

정말 좋은 책인 것은 틀림없고 그 동안 무지하게 확실히 이해하지 못하고 넘어갔던 자바스크립트의 스코프, 클로저 등의 개념을 짚고 갈 수 있는 좋은 시간이었다.

👉 자바스크립트 딥 다이브 정리 NOTE

최근에는 작은 애플리케이션을 개발하면서 이론적으로 학습한 내용을 한 번 더 점검하자는 취지하에 프로그래머스에서 운영하는 프론트엔드 개발을 위한 자바스크립트 라는 스터디 참여했었다.

크게 투두 리스트, 짤 검색기 2가지의 애플리케이션을 개발해볼 수 있다. 작은 규모의 두 가지 애플리케이션 개발이었지만, 내 생각 이상으로 많은 것을 얻어갈 수 있는 시간이라 생각한다.

이번 회고 글에서는 이 스터디에 참여하면서 알게된 유익한 지식을 남겨보려한다.

본론

this, 생성자 함수나 클래스를 통한 컴포넌트(객체) 단위의 개발, fetch 를 통한 비동기 통신, async ~ await 를 통한 비동기 처리, Event Delegation 등의 개념도 실제로 구현을 하며 고민해보면서 이론으로 이해한 것보다 훨씬 유익하게 관련 지식을 내 것으로 만들 수 있었다.

하지만, 내가 결론 내린 이 스터디를 통해 알 수 있었던 핵심은 이거다.

🎯 Vanilla JS 만으로 컴포넌트 단위 개발

그동안 React 에만 익숙했다면 React 에서의 컴포넌트 단위로 분할해서 JSX로 표현하면 렌더링되던 자연스럽던 것이 순수하게 vanilla JS 만을 이용해서 이와 비슷하게 구현하려고 하면 초반에 흠칫할 수 있다 생각한다. ( 나 처럼 )

하지만, 이번 스터디를 통해 알게된 핵심은 다음과 같다.

💡 상태(state)의 변경 → 해당 state 를 사용하고 있는 컴포넌트의 리렌더링

예시를 하나 들어보자.

A 라는 컴포넌트 를 내가 생성하겠다면 내부적으로 구조는 다음과 같으며, 또 다른 컴포넌트를 생성한다해도 형태는 비슷하다.

function A({ 부모 Element, A컴포넌트에서 사용할 초기 state }) {
  // 컴포넌트 Element 생성
  this.$A = DOM 생성

  // 컴포넌트를 부모 Element 에 연결
  $부모 Element.appendChild(this.$A)

  // 컴포넌트에서 사용하는 state
  this.state = A컴포넌트에서 사용할 초기 state

  // 컴포넌트 state 업데이트 -> 이후 변경된 state 기반으로 컴포넌트 리렌더링
  this.setState = (새로운 state) => {
    this.state = 새로운 state
    this.render()
  }

  // 렌더링 함수
  this.render = () => { 
        this.$A.innerHTML = ...
  }

  // 초기 렌더링을 위한 호출 (필요에 따라)
  this.render() 

    // 이벤트 등록 (필요에 따라)
    ...
 }

내부적으로 필요한 작업이 추가 될 수 있겠지만, 하나의 컴포넌트를 구성요소는 위와 비슷하며 작동원리 또한 비슷하다는 것이다.

setState 함수를 통한 state 의 변경 → 이후 변경된 state 를 통해 render 함수를 호출하여 변경된 내용으로 리렌더링

이와 같은, 단방향적인 컴포넌트 단위의 개발을 알게 되면서 내가 느낀 장점은 다음과 같다.

• 일관성 있는 컴포넌트 단위의 개발로 디버깅이 쉽다.
• state 관련 로직를 담당하는 컴포넌트와, 변경되는 state 를 통해 렌더링하는 것에만 초점을 둔 컴포넌트의 명확한 분리
• 이를 통해 조금의 변화에도 대응가능한 확장성 있는 개발 효과

결론

주의할 점은 핵심이라고 말한 컴포넌트 단위의 개발이 React 에서 개발하는 것과 똑같은 것 아니냐 ? 라고 생각할 수 있다는 것이다.

결과적으로는 일단 엄연히 다른 방식이다. 이와 관련된 내용은 검색해보면 다양한 자료가 있으니 찾아보면 될 것이다.

다만, 인지해야할 부분은 이렇게 vanilla JS 로 컴포넌트 단위의 개발이 어떤식으로 작동되는 가를 완벽하게 이해한다면, React 나 Vue 같은 SPA 를 개발하기 위한 그 어떤 라이브러리나 프레임워크가 등장해도 핵심적인 작동원리는 비슷하다는 것을 알고 빠르게 적응할 수 있다는 것이다.

마지막으로, 미쳐 다 언급하지 못한 자바스크립트의 핵심 개념들을 직접 애플리케이션을 개발하며 능력있는 현업 프론트엔드 개발자 멘토분들의 코드리뷰를 통해 발전시킬 생각이 있다면 해당 스터디를 해보는 것을 추천한다.

이번 스터디를 통해 구현한 결과물을 확인할 수 있는 링크를 공유하며 글을 마친다.

• 👉 투두 리스트 ( with Vanilla JS )
• 👉 짤 검색기 ( with Vanilla JS )