[Java 풀스택 과정 강의] 1월 22일

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

일지가 2주나 밀렸다. 일이 너무 많았다… Github에는 꾸준히 무얼 배웠는지 등을 기록하고 있지만 일지를 자꾸 누락하게 되었다. 그러므로 밀린 일지를 천천히 채워보려고 한다. 일단 React부터 시작한다. 16일부터 21 사이는 Github 특강 및 jQuery 실전이었기 때문에 React부터 시작하겠다.

 

 

React 이론

React에 대한 이론적인 부분을 배웠다. React의 이론에 대해서는 TIL에서 다룬 적도 있기 때문에 길게 설명하지는 않겠다.

 

[Java 풀스택 개발자] React의 언어체계

[Java 풀스택 개발자] React의 언어체계

 

간단히 말하면, React는 자바스크립트 라이브러리이다. 현재 JS 라이브러리는 다음과 같은 종류가 있다.

 

- jQuery

- React

 

jQuery의 경우 레거시에 가까운 언어로, React의 등장 후, 다양한 프레임워크의 탄생으로 밀려나고 있는 추세다. 한편 프레임워크는 다음과 같은 종류가 있다.

 

- Next.js

React 기반의 오픈소스 자바스크립트 웹 프레임워크이다. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하고 있으며, 최근에 떠오르는 추세다.

 

- Vue.js

React와 같이 사용되던 프레임워크다. SPA에 특화되어 있다. Angular처럼 디렉티브 기능이 있으며, 리액트처럼 가상 돔(Virtual DOM)을 기반으로 한 컴포넌트가 존재한다.

 

- Nuxt.js

Vue.js 기반의 오픈 소스 메타 프레임워크이다. Vue.js에서 아쉬운 부분을 보강하기 위해 나타난 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원한다.

 

- Angular

SPA의 개발을 위해 만들어진 구글의 클라이언트 측 자바스크립트 프레임워크이다. 타입 스크립트를 기반으로 한다.

 

최근 1년간 npm download 통계를 보면 이렇다.

 

단, jQuery나 Vue의 경우는 CDN 선호가 더 높기 때문에 어느 정도 감안해서 보면 좋다.

 

- TypeScript

JS의 수퍼셋Superset 프로그래밍 언어이므로 확장 언어에 가깝다. 

 

React의 특징은 (1) 가상돔(Virtual DOM) (2) SPA  (3) 컴포넌트 기반 이라는 특징이 있는데, 이 부분은 위의 TIL 링크에서 아주 잘 설명해놓았다.

 

 

React 설치

React는 CDN과 같은 방식으로 사용하는 걸 권장하지 않는다. 그러하여 npm을 통한 패키지 설치가 주가 되는데, 이를 위해서는 Node.js를 설치할 필요가 있다. Node.js는 크로스 플랫폼, 오픈 소스 자바스크립트 런타임 환경이다. Node.js는 V8 자바스크립트 엔진에서 실행된다. Node.js 다운로드는 다음에서 할 수 있다.

 

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

 

덧붙여 React의 경우 로컬 개발 서버를 사용한다(일반적으로 Host는 3000번). 이걸 위해서는 터미널 혹은 파워셸 사용을 해야하므로 지원되는 편집 프로그램을 사용하는 것이 좋다. node.js를 설치했으면, 터미널에서(windows 환경이라면 cmd 권장) npm install react (프로젝트등 설치 폴더)를 사용한다. 다만 npm이 아니라 npx를 사용하는 방법도 있다. npx를 통한 설치법은 npx create-react-app my-app 형태가 된다.

npm 명령어를 사용할 경우, 패키지를 설치하고 관리하게 된다. 그러나 npx의 경우 패키지 설치 없이 한 번만 설치를 진행한다. 그러므로 npm으로 설치한다면 CLI 도구라는 것을 한 차례 더 설치하게 된다. npx의 경우 꾸준히 최신 버전으로 업데이트 하게 되지만, npm으로 설치한다면 버전을 고정할 수 있다는 장점이 있다. 개발에서 툴의 버전이 무조건 높다고 좋은 것은 아니기 때문에(특히 협업에서) 각자 편한대로 사용하면 좋다.

그리고 실행은 리액트 프로젝트 폴더에서 npm start을 하면 된다. 터미널 관련 명령어는 이미 포스트가 많기 때문에 생략하겠다.

 

 

React의 기본 구조

React에는 Apps.js가 존재한다. 이것이 기본적인 출력으로 나타난다. React의 컴포넌트 구조에 대해서는 다른 곳에서 지겨울 정도로 설명했지만, React는 함수 컴포넌트라는 걸 쓸 수 있다. 그 함수 컴포넌트의 기본 구조는 이러하다.

 

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

 

(1) import로 React를 import하여 들여온다.

(2) import로 같은 폴더의 App.css를 가져온다. - 컴포넌트의 경우도 이런식으로 import해서 들여오게 된다.

 

그리고 function App(){ … } 이 부분이 함수 컴포넌트이다. 여기서 return이 바로 컴포넌트의 중심인데, DOM을 만들어서 return(반환)한다. 참고로 이 컴포넌트에는 상위 DOM이 단 하나 들어 있어야 한다.

그리고 마지막으로 export default (컴포넌트명);을 사용하게 되는데, 이것을 통해 함수 컴포넌트를 export할 수 있다. export하지 않을 경우, 외부에서 이 컴포넌트를 import할 수도 없다. 컴포넌트에 대한 import와 컴포넌트 사용은 다음 일지에서 이야기하겠다.