[230504] Node.js | React 프로젝트 생성/배포 | JSX

🧩 Node.js

크롬의 자바스크립트 엔진인 V8 엔진을 사용하여 작성된 자바스크립트 코드를 컴파일하고 실행할 수 있는 환경(런타임)을 제공

🔍 자바스크립트 엔진
자바스크립트 코드를 해석하는 프로그램
브라우저라는 프로그램 위에서 자바스크립트 코드가 작동하는데 브라우저는 자바스크립트로 만든게 아니라서(C나 C++로 만들어짐) 자바스크립트가 뭔지 모른다.
-> 중간에서 브라우저에 자바스크립트를 넣었을 때 브라우저가 자바스크립트를 해석할 수 있도록 도와준다.

🔍 런타임
컴퓨터가 현재 실행중인 OS와 별개로 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신

브라우저의 최상위 객체: window
node.js에는 window 객체 없음
-> window에서 제공하는 기능(프로퍼티, 메서드) 사용할 수 없음

console.log()는 사용 가능 -> 다른 객체로 가져옴
node.js의 최상위 객체: global
global.console.log()

NPM (Node Package Manager)
개발자들이 자바스크립트 패키지를 쉽게 설치, 업데이트, 삭제할 수 있도록 도와주는 관리 프로그램

🔍 패키지(라이브러리, 프레임워크를 통틀어서)
Node.js 환경에서 실행가능한 소프트웨어
React 역시 NPM을 통해 다운받아서 설치할 수 있는 라이브러리의 하나

• 패키지를 사용하면 개발자들은 빠르고 효율적으로 자신의 소프트웨어를 개발할 수 있다.
• 리액트 프로젝트에 도움을 줄 수 있는 여러 강력한 도구들을 추가로 다운로드하여 개발을 좀 더 수월하게 할 수 있다.
• 프로젝트 관리, 협업에 용이하다.
• Webpack, PARCEL과 같은 번들러를 통해 프로젝트를 배포하기 좋은 상태로 만들 수 있다.

명령어

• node
  node.js 런타임 환경에 들어감
  node.js에서 사용할 수 있는 명령어 입력 가능
• .exit
  node.js 런타임 환경 빠져나옴
• ls
  list
• cd
  change drive
  cd .. 상위 드라이브로
• npm start
  개발 서버 실행
  브라우저에 프로젝트 보여줌
• ctrl c
  node.js 런타임 환경에서 나가기
  서버 끄기
• npm i
  node_modules 설치

⚛️ React 프로젝트 생성/배포

생성

npx create-react-app my-app

• npx(npm package execute): 설치 후 실행까지 담당
• create-react-app
react-app 초기세팅을 편하게 해주기 위한 node 라이브러리
  create-react-app 패키지(CRA)만으로 여러 필요한 패키지들이 자동으로 다운로드(ex. 웹팩)되고 기본적인 세팅을 제공한다.
• my-app
  생설할 프로젝트 이름

App.js가 메인페이지고, index.js가 메인페이지를 보여지게 한다.
보통 컴포넌트는 components라는 폴더를 만들어 넣는다. Menu.jsx, Menu.css

💡 import "./App.css";
자바스크립트 안에서 import로 불러올 수 있는 파일은 자바스크립트뿐이지만
웹팩(모듈 번들러)이 자바스크립트 안에 CSS 불러오는 것을 가능하게 만들어준다.

💡 파일들은 모두 제각각 분리되어 있는데 어떻게 합쳐지는거지?
public 폴더의 index.html, src 폴더의 App.js, index.js와 같은 파일들을 하나로 묶는 작업은 웹팩이 해준다. CRA가 기본적으로 의존하고 있는 모듈로, 브라우저에서 개발자 화면으로 보면 추가하지 않았던 bundle.js 파일을 확인할 수 있다. 이것이 바로 모듈 별로 분리되어 있던 JS 파일을 하나로 묶은(번들링한) 결과물이다.

배포

1. github page 만들기
2. package.json에 아래 코드 추가
   homepage 는 React 애플리케이션을 빌드하고 배포할 때 사용되는 루트 경로를 지정한다. homepage의 값이 지정되면 빌드된 애플리케이션의 index.html 파일에서 사용하는 리소스 경로가 homepage에 설정한 경로를 기준으로 생성된다.

{
	"homepage": "github page url",
	...
}

3. npm run build하면 build 폴더로 번들링된 파일들이 올라옴
   
   💡 build 폴더
   하나의 작업으로 웹팩이 번들링, 압축, 난독화해준다.
   백엔드가 서버에 전달하는 파일

4. build 안에 있는 파일 github page에 업로드

⚛️ JSX

JavaScript XML의 약자
리액트에서 사용하는 특수한 문법
JavaScript 코드에서 마치 HTML을 사용해 UI 컴포넌트를 만드는 것 같은 편리한 개발 경험을 제공한다.
UI 코드의 가독성과 유지보수성이 높아진다.

문법

• 태그는 꼭 닫혀 있어야 한다.
  태그를 열었으면 꼭 <div></div> 이렇게 닫아주어야 한다.
  HTML에서는 input, img, br 태그 등을 사용할 때 닫지 않고 사용하기도 하지만 리액트에서는 그렇게 하면 안된다.

• 컴포넌트의 최상위 부모 요소는 1개 즉, 단일해야 한다.

// 컴파일 실패
function App() {
  return (
	<p>안녕, 라이캣 1호!</p>
	<p>안녕, 라이캣 2호!</p>
  );
}

function App() {
  return (
	<div>
	  <p>안녕, 라이캣 1호!</p>
	  <p>안녕, 라이캣 2호!</p>
	</div>
  );
}

• 주석
  JSX 문법 안이 아니라면 일반적인 JS 문법의 주석을 사용할 수 있다.

function App() {
  // 주석
  /**
   * 주석
   */
  return (
    <div>
      {/* JSX 안의 주석 */}
      <h1>안녕, 라이캣 1호!</h1>
      <h1>안녕, 라이캣 2호!</h1>
    </div>
  );
}

💡 리액트는 JS로 만들어졌다!!

• 모든 프로퍼티 이름은 카멜 케이스(CamelCase) 대문자 구분을 따른다.

• 문자를 제외한 속성값은 중괄호({ })를 사용한다.

<p hello="mallang" hello2={"mallang"} hello3={10}>안녕하세요</p>

• 'true' 값을 갖는 속성은 속성 이름만으로 표현할 수 있다. 만약 false라면 중괄호를 사용한다.

<input type="radio" checked />
<input type="radio" checked={false} />

• 'class' 속성은 'className'으로 표기한다.
  JSX는 JS 코드로 이루어져있기 때문에 class라는 단어는 이미 JS에서 예약어로 사용하고 있어 이용할 수 없다. HTML의 id는 그냥 id로 사용한다.

<div className="newClass" />

• 인라인 스타일은 객체 형태로 사용한다.

<div style={{backgroundColor:"black", color:"white"}}></div>

• 스타일을 정의할 때는 '-'를 사용할 수 없다. 카멜 케이스를 사용하여 작성한다.
  JSX는 JS 코드로 이루어져있기 때문에 '-'를 변수명에서 사용할 수 없기 때문에 '-'를 사용할 수 없다. css 파일을 만들어 사용할 때는 그대로 사용할 수 있다.

• 자바스크립트 사용하기
  중괄호 안에서 JavaScript의 다양한 문법을 사용할 수 있다.

{100 + 1}
{'hello' + 'world'}
{[1, 2, 3].map(x => x**2)}
{함수()}
{변수}
{값?'one':'two'}

스타일도 변수에 넣어 사용할 수 있다. style={somStyle}

const someStyle = {backgroundColor:"black", color:"white"}

💡 Each child in a list should have a unique "key" prop?

item을 구별해주는 식별자로 no, id를 전달해주는데, key의 값으로 사용한다.
최적화와 관련있다.

사용자의 인터랙션을 통해 li 안에 있는 정보가 바뀌는 경우
ex. 다음 버튼 누르면 리스트 목록이 갱신
UI의 모습 자체는 동일, 안에 있는 내용만 바뀜 => 소소한 변화로 인지한다.

리액트는 화면의 변화가 있을 때 컴포넌트를 다시 렌더링 해주는데 전체를 싹 바꾸지 않고 현재 컴포넌트의 모습과 새롭게 그려야하는 컴포넌트의 모습의 바뀐 부분만 비교하고 필요한 부분만 새로 그려준다.

li 안에 있는 내용이 바뀌어야 할 때 현재 키와 바뀔 키를 비교한다.
키를 통해 빠른 렌더링을 가능하게 한다.