React 독학 [ Create React App / Node.js 설치]

Create React App (CRA) 란?

-React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 "보일러플레이트"

-수많은 React용 보일러플레이트가 있지만 Facebook에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰임

-프로젝트 생성에 필요한 다양한 기능을 Command로 제공 

장점

개발자가 온전히 개발에 집중할 수 있도록 함

상대적으로 덜 중요한 코드는 노출되지 않음

대부분의 모든 브라우저에서 해석될 수 있도록 transcomile 지원

-Babel 내장

-배포 시 코드 번들링

-Webpack 내장

 

 

Node.js 란?

주로 서버 프로그래밍에 사용되는 JavaScript 기반의 소프트웨어 플랫폼으로 프론트엔드 개발자의 접근성이 높히며

HTTP통신 관련 라이브러리 내장, NPM을 통한 방대한 라이브러리를 제공하고 있다.

위에서 배운 CRA로 프로젝트를 생성 시 개발 환경 및 테스트 서버로 이용됨

 

여기서 NPM이란? 

Node.js에서 사용하는 각종 패키지를 저장하는 저장소 라고 생각하면 된다.

Node.js 설치 시 함께 설치되며 우리가 사용하는 React 와 관련된 모듈들이 NPM에서 배포되고 있다.

패키지 관리 뿐만 아니라 서버 실행 및 관리에 필요한 다양하고 편리한 명령어를 제공하고 있음

 

NPM 명령어

npx  : npm 패키지를 1회성으로 내려받아 실행할 때 사용하는 명령어

cd  <디렉토리명> : 디렉토리명 으로 이동한다.

npm start : 프로젝트를 실행한다.

npm install : package.json 에 정의된 의존성 패키지들을 설치한다.

npm install <패키지명> : npm 서버로부터 원하는 패키지(라이브러리)를 내려 받는다.

npm install <패키지명>@<version> : 특정 버전의 패키지 내려받기

npm install <git 레포지토리 주소> : npm이 아닌 git 레포지토리로 부터 패키지 내려받기

npm build : 프로젝트를 빌드한다. 파일을 압축하고 번들링 할 때 사용.

(Ctrl + C) :npm start 후 종료를 하고 싶을때 명령 중지

 

 

디렉토리 구조를 알아보자

 

 

 

설치한 라이브러리를 프로젝트 내에서 불러오기 

1. CSS나 import 하는 것 만으로 역할을 하는 라이브러인 경우

import "패키지명.확장자"
ex) import "./App.css";

 

2. 기본적으로 패키지를 불러와 활용할 때에는 할당 할 이름을 작성

import 할당할이름 form "패키지명"
ex) import Axios from "axios"  // axios 패키지를 Axios 이름으로 import

 

3. 패키지 내의 일부 메소드나변수만 가져올 때 효율적인 방법

import { a , b } form "패키지명"

 

4. 패키지에 default로 export 되는 객체가 존재하지 않을 경우 *as 이름 으로 불러오기 가능

import *as something from "패키지명"

 

 

 

Node.js 설치방법 - 추후 추가 예정

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere