자바스크립트 라이브러리 / 프레임워크와 React

자바스크립트 라이브러리와 프레임워크 필요성

• 웹 애플리케이션에서 유저 인터페이스 동적 처리 시 각 DOM 요소 작업 필요
• getElementById()로 찾아와서 이벤트 처리하고 코드 작성
• 프로젝트 커지고 인터페이스도 다양해짐.
• 프로젝트 관리를 하기 위해 많은 DOM 요소나 코드를 관리하고 정리하는 일이 어려워짐
• 사용자 인터페이스에만 집중할 수 있는 라이브러리 또는 프레임워크 필요
• 많은 라이브러리나 프레임워크가 만들어지고 사용되며 생산성, 유지보수성 향상
• 대표적인 자바스크립트 라이브러리 / 프레임워크
  • Angular
  • React
  • Vue.js
• 프레임워크 / 라이브러리
  • 프레임워크
    • 뼈대(기반 구조를 의미)
    • 제어의 역전
    • 여러 클래스, 컴포넌트로 등으로 구성
    • 작업하는 방법이 정의되어 있다.
  • 라이브러리
    • 활용 가능한 도구의 집합
    • 사용자가 정의한 클래스를 호출해서 사용
  • 차이
    • 제어권이 누구에게 있는가?
    • 라이브러리 : 사용자(개발자)가 주도적으로 호출해서 사용
    • 프레임워크 : 제어권이 프레임워크에 있어, 정해진 틀 안에서 코드를 작성해야 함.
  • Angular
    • SPA(Single Page Application) 개발을 위한 구글의 클라이언트 즉, 자바스크립트 프레임워크
      • SPA : 웹 서비스를 요청할 때 마다 서버로부터 페이지 전체를 호출하는 방식이 아니라 최초 한 번만 페이지 전체를 로딩하고 이후부터는 변경된 데이터만 호출하는 방식
    • 많은 기능 내장
    • 타입스크립트 사용 기본
      • 자바스크립트 기반(자바스크립트의 상위 집합인 타입스크립트를 기반으로 함)
    • MVC 프레임워크를 이용해서 잘 설계되고 구조화된 웹 애플리케이션을 쉽게 구현할 수 있다.
    • Angular 버전
      • AngularJS : Angular 1.x 버전
        • JavaScript dnlwn
      • Angular : Angular 2.x 이상 버전(현재 버전 : 12)
        • JS가 빠짐 : JavaScript에 국한되지 않는 새로운 프레임워크 제공
  • React
    • UI를 집중적으로 잘 만들기 위해 (구)페이스북(현 메타)에서 만든 자바스크립트 라이브러리
    • 컴포넌트에 집중되어 있는 라이브러리
      • 컴포넌트
        • 동작 가능한 하나의 부품 개념으로 애플리케이션의 화면을 구성하는 뷰(View)를 생성하고 관리
        • 여러 컴포넌트를 조립하여 하나의 완성된 애플리케이션 생성
        • 잘게 나누어진 컴포넌트 모듈들을 조합해서 애플리케이션을 개발하는 오늘날의 개발 접근 방법(Web Modularity / 컴포넌트 기반 개발)을 React가 보편화 시킴
    • Angular와 달리 뷰(UI)만 신경쓰고 나머지는 Third Party 라이브러리를 필요
    • 공식 라이브러리 개념이 없고, 여러 솔루션을 사용
    • 생태계가 넓고 활성화되어 있음
    • 특징
      • 제일 먼저 가상 돔을 성공적으로 사용
      • 이후 다른 많은 라이브러리에서 가상 돔 개념 채택
      • Virtual DOM
        • 브라우저 DOM 기반으로 데이터가 변경될 때 마다 페이지에서 새로운 뷰를 만들어 전체 DOM을 새로 넣기 때문에 성능상 문제
          • 변화가 있을 때 마다 실제 DOM에 변경된 내용을 넣는 것이 아니라 자바스크립트로 만들어진 가상의 DOM에 렌더링 후 기존의 돔과 비교해서 변경된 것만 업데이트하는 방법으로 해결
      • 생태계 조성(가치사슬, 협력관계)
        • 다양한 생태계를 가지고 있어 좋고 많은 라이브러리들이 많이 만들어지고 있음
  • Vue
    • 앵귤러와 리액트의 장점 포함
    • CDN 방식으로 불러 와서 사용
    • 공식 라우터와 상태관리 라이브러리 존재
    • 앵귤러처럼 디렉티브 기능 있고 리액트처럼 가상 돔(Virtual DOM) 기반 컴포넌트 있음
      • 디렉티브 : DOM을 통해 HTML의 태그에게 기능을 부여하거나 표현하는데 사용

React 환경설정

• 설치 프로그램
  • Node.js
    • Chrome V8 JavaScript 엔진(V8 Engine)으로 빌드된 JavaScript 런타임
    • 자바스크립트를 웹 브라우저 영역 외에 서버, 모바일 애플리케이션, 데스크탑 애플리케이션 등의 영역에서 사용 가능하게 해 줌
    • React 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만 프로젝트를 개발하는 데 필요한 도구들이 Node.js를 사용하기 때문에 설치 필요
    • Visual Studio Code
    • NPM (Node Package Manager)
      • 자바스크립트 패키지 매니저 도구
      • Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리
      • React 역시 하나의 패키지
  • Create-React-App
    • 리액트 프로젝트 생성 도구
    • CRA 사용하면 간편하게 리액트 개발 환경 구축
    • 자동으로 다수의 패키지들이 설치되고 WebPack 및 Babel 설정도 자동으로 설정(나중에 번들 옵션 사용 가능)
    • 초기 단계에서 WebPack과 Babel 직접 설정할 일 없음
      • WebPack
        • 모듈 번들러 (Module Bundler)
        • 모듈화된 코드를 하나의 파일로 합치고(번들링) 코드 수행할 때마다 웹 브라우저로 리로딩
        • 코딩할 때 편의를 위해 여러 개의 모듈로 나누어 작업
        • 그렇지만 브라우저에서 파일 단위 모듈 시스템을 이용하게 되면 많은 네트워크 비용 낭비됨
        • 웹 애플리케이션의 규모가 커지면서 많은 양의 파일들이 하나로 모여 구성되는데 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러 필요
        • 리액트에서 웹팩(Webpack)이라는 모듈 번들러 사용
          • 파일들의 관계가 복잡하고 무겁기 때문에 브라우저에서 이해하고 처리하기 힘들어 지는 문제 해결
          • 파일들 간의 의존성 관계 정리 및 최적화, JSX 파일을 합쳐서 하나의 자바스크립트 파일로 만들어줌
      • Babel
        • 자바스크립트 변환 도구
        • Babel is a JavaScript Compiler
        • 자바스크립트 ES6 문법을 이전의 ES5로 변환
        • 최신 버전의 브라우저에서는 ES6 문법을 바로 실행 가능하지만, 구버전의 브라우저에서는 실행되지 않는 문제가 발생해서 변환이 필요
        • 리액트 컴포넌트에서 사용하는 JSX 문법도 정식 자바스크립트 문법이 아니기 때문에 변환 필요
        • Babel을 통해 React를 일반 브라우저에서 실행 가능하도록 변환 작업 수행

설치

• mac 기준
  • node.js 설치
  • npm 설치
  • terminal -> 원하는 디렉토리로 이동 -> create-react-app 원하는 프로젝트 이름
  • 실행은 terminal에서 프로젝트가 있는 디렉토리로 이동 후 npm start
  • 종료는 Control + c