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

1. Intro

1주차 과제를 제출하고 깃헙을 통해서 리더분들의 리뷰뿐만 아니라 동기분들의 리뷰를 통해서 많은 것을 배울 수 있었다.

과제를 진행하면서 가장 의문이 많이 남았던 부분은 함수에 관련된 것이었다.

• 어떻게 하면 하나의 일만 하는 함수를 만들 수 있을까?
• 어떻게 하면 재사용이 용이한 함수를 만들 수 있을가?
• 어떻게 하면 식별자를 통해서 함수를 잘 설명할 수 있을까?

위와 같이 어떻게 하면 좋은 함수를 만들 수 있을지에 대한 고민을 많이 했었다.

2. 라이브 세션

2.1 프론트엔드의 역사

• Server Side Rendering

  • 마크업과 JS 코드를 분리 개발 (php, jsp, asp)
    • 서버에서 템플릿 언어를 통해 화면을 그리고
    • Javascript를 통해서 이벤트 바인딩/Ajax 데이터 통신
  • DOM 직접 접근
  • 명령형 프로그래밍

• Client side 영역에서의 템플릿 사용과 Server side 영역에서의 템플릿 사용이 혼용되며 문제점 발생

• Client Side Rendering

  • 컴포넌트 추상화: UI와 기능을 하나의 단위로 묶어서 관리
    • 각 컴포넌트는 독립적일수록 좋다.
    • 하나의 부모 요소에서 시작하지만 형제 컴포넌트끼리 의존성 없는 것이 좋다.
      컴포넌트 방식으로 생각하기

2.2 잘하는 프론트엔드 엔지니어

• 서버에서 주는 데이터를 어떻게 효율적으로 잘 그릴 것인가
• 그리기 위해서 어떠한 전략을 사용할 것인가

2.3 라이브 코딩

• TodoList 생성자함수 구현
  • this.state: 인스턴스 객체의 상태 관리
  • this.setState: 인스턴스 객체의 상태를 업데이트하는 함수
  • this.render: 인스턴스 객체의 상태에 따라 UI를 그리는 함수
  • 유효성검사
    • new.target: new 키워드를 사용해 함수를 호출했는지 확인
    • Array.isArray(데이터): 데이터가 배열인지 확인

2.4 어떻게 함수를 잘 만들 수 있을까

• 이 질문에 대한 답변으로 해당 책을 추천을 받았다. 프로그래머스의 뇌

2.5 시맨틱 태그

• HTML 마크업을 디자인적으로 사용하지 말고, 의미론적으로 사용하자.
  • 큰 글자 <h1>, 작은 글자 <h3>와 같이 사용하지 말자.

3. 2주차 과제

• 투두리스트 앱 컴포넌트로 분리하기
  • TodoInput 컴포넌트 만들기
    • 새로운 todo 데이터 입력 받기
  • TodoCount 컴포넌트 만들기
    • todos 상태에 따라 렌더링 변경
  • Event Delegate 사용하기
    • li 요소에 포함된 토글, 삭제 버튼에 대한 클릭 이벤트 위임
  • CustomEvent 사용하기

// CustomEvent 생성
const catFound = new CustomEvent('animalfound', {
  detail: {
    name: 'cat'
  }
});
const dogFound = new CustomEvent('animalfound', {
  detail: {
    name: 'dog'
  }
});

// 적합한 이벤트 수신기 부착
obj.addEventListener('animalfound', (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// 콘솔에 "cat"과 "dog"가 기록됨

• local storage 사용하기

// localStorage에서 데이터 가져오기
localStorage.getItem(key);
// localStorage에 데이터 저장하기
localStorage.setItem(key, value);

4. Outro

이번 과제를 통해서 자바스크립트로 컴포넌트를 만들어 보면서 리액트를 사용해 컴포넌트를 구현하는 것보다 어렵다는 느낌을 받았고,

리액트에서는 JSX와 같은 사용자 편의성이 높은 문법들이 제공되어 돔과 관련된 귀찮은 작업들, 상태를 관리하고 상태를 업데이트하고 리렌더링 하는 일들이 리액트 단에서 해결해주기 때문에 리액트가 얼마나 편리한 도구인지 깨닫게 되었던 시간이었다.