혼자 공부하는 자바스크립트 추가 진행

#	진도	기본 미션	선택 미션
6주차(추가) (2/16 ~ 2/19)	Chapter 09 ~ 10	Chapter 09 ~ 10 주요 키워드 정리	p. 459 리액트 프레임워크를 사용해서 '할 일 목록' 추가 구현

 

 

■ 기본 미션

 □ Chapter 09

  . 객체 지향 패러다임: 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론을 의미

  . 추상화: 프로그램에서 필요한 요소만을 사용해서 객체를 표현하는 것

  . 클래스: 객체를 안전하고 효율적으로 만들 수 있게 해주는 문법

  . 인스턴스: 클래스를 기반으로 생성한 객체를 의미

  . 생성자: 클래스를 기반으로 인스턴스를 생성할 때 처음 호출되는 메소드

  . 상속: 어떤 클래스가 갖고 있는 유산(속성과 메소드)을 기반으로 새로운 클래스를 만드는 것

  . private 속성/메소드: 클래스 내부에서만 접근할 수 있는 속성/메소드

  . 게터: get () 형태로 값을 확인하는 기능을 가진 메소드

  . 세터: set () 형태로 값을 지정하는 기능을 가진 메소드

  . 오버라이드: 부모가 갖고 있는 메소드와 같은 이름으로 메소드를 선언해서 덮어 쓰는 것

 

 □ Chapter 10

  . 리액트: 사용자 인터페이스(UI)를 쉽게 구성할 수 있게 도와주는 라이브러리

  . 컴포넌트: 리액트에서 화면에 출력되는 요소

  . JSX: 자바스크립트 코드 내부에서 HTML 태그 형태로 컴포넌트를 만들 수 있게 해주는 자바스크립트 확장 문법

  . Node.js: 자바스크립트를 웹 브라우저가 아닌 곳(서버 등)에서 실행할 수 있게 해주는 플랫폼

   - Node.js 웹 서버 개발: 웹 애플리케이션은 프론트엔드만으로 만들어지지 않기에 백엔드도 간단하게 만들 수 있어야 하며, Node.js를 활용해 웹 서버를 만드는 방법도 확인이 필요

  . React Flux 패턴(Redux 등): 리액트로 데이터를 쉽게 교환하기 위해서 만들어진 라이브러리로 큰 규모의 웹 애플리케이션 개발을 쉽게 하려면 알아야 하는 내용

   - MobX: 리액트에서 Flux 패턴을 활용할 수 있게 해주는 라이브러리

 

 

■ 선택 미션

기존에 작성했던 '할 일 목록' 애플리케이션을 리액트로 구현하였습니다.

전에는 코드가 한 장 반 정도 분량이었는데, 이번에는 두 장 반 분량으로 한 장이 더 늘어났습니다.

데이터 교환을 위해 데이터와 상태를 전달하면서 코드가 복잡해졌는데, 관련된 내용을 앞으로 더 공부해야 할 거 같습니다.

 . 로컬 스토리지 기능이 엉켜 결과가 제대로 나오지 않을 때는, [Console]탭에서 localStorage.clear() 입력