TIL #26. 리액트-CRA

ceres·2020년 2월 22일
0

TIL

목록 보기
7/34

(20/2/22) 생활코딩

리액트란?

페이스북에서 만든 자바스크립트 UI Library
컴포넌트 사용시 1.가독성 2.재사용성 3.유지보수가 좋아짐

개발환경 구축하기

1) node.js
terminal 에서 node -v 입력 후 버전 정보 나오는게 없다면 node.js 공식사이트에 가서 다운받는다.

2) npm (node package manager)
node.js로 만들어진 앱들을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 도구이다. node.js 계의 앱스토어나 플레이스토어라고 생각하면 된다.
node.js를 설치하면 자동으로 설치된다.
npm -v : npm 버전을 볼 수 있다.
npm install 패키지명 : npm을 이용해 패키지를 설치할 때 사용하는 명령어이다.
npm install 패키지명 -g : -g는 global의 약자로 전역 설치를 하겠다는 뜻이다. 특정 디렉토리 안에서만 쓰이는 모듈이 아니라 전역으로 사용되는 패키지를 설치할때 사용하는 명령어이다.

예시)

npm install -g create-react-app
//-g : global의 약자. 해당 컴퓨터 어디서나 사용 가능하게함.
// create react app을 install 해달라는 의미
//만약 권한이 없어서 error가 뜨는 상황이 된다면 sudo를 붙여서 실행하면 된다.
//비밀번호를 입력하라고 나오면 입력하면 된다.
sudo npm install -g create-react-app 
//잘 설치가 되었는지 확인하는 법
create-react-app -v
//버전 정보가 나온다. 

3) CRA
리액트 애플리케이션 초기 세팅 도구(tool)
react 초기설정을 해줘 사용을 쉽게 할 수 있도록 도와준다.
프로젝트를 할 때마다 CRA를 새로 설치
저장하면 자동으로 upload 해줌

CRA(create-react-app)

디렉토리 정해주기

  • desktop에 폴더 만들기
    이때 폴더이름이 react로 하면 안된다.
    ex) desktop/wecode/project :
    desktop 에 wecode라는 폴더를 만들고 그 안에 project라는 폴더를 만들어 주었다.

CRA설치

터미널에서 설치하고 싶은 폴더로 들어가 CRA를 설치해준다.
cd desktop/wecode/project 명령어로 해당 폴더에 들어간다. (cd 까지만 치고 해당 폴더를 끌고 와도 된다.)
npx create-react-app 만들 폴더 이름 명령어로 CRA를 설치한다.

공식사이트 방법
npm: 프로그램을 설치하는 프로그램이라면
npx: react-app을 인치로 설치해서 딱한번 설치하고 지우는 방법이다. 컴퓨터 공간을 낭비하지 않을 수 있고 가장 최신 버전을 받을 수 있다는 장점이 있다.

npx create-react-app 폴더이름
cd 폴더이름
npm start //해당 웹페이지가 열린다. vsc 실행후 terminal에 명령어를 입력해도 동일한 결과가 나온다.
			//ctrl + c 를 누르면 웹페이지가 꺼진다. 

CRA 기본구조

(파일을 다운 받으면 주석처리 되어있는 부분은 일단 지우고 구조를 살펴보자)

1) node_modules

설치 소스들이 있는 곳이다. github에 올리면 안됨으로 gitignore에 /node_modules라고 작성해야한다.

2) public

  • index.html : 웹브라우저 상에서 보이는 결과물은 index.html 파일을 실행한 결과이다.

    <div id="root"></div>

    리액트를 통해서 만든 컴포넌트들은 id="root" 태그로 들어간다.
    이 태그 안쪽에 들어가 있는 컴포넌트들은 src 디렉터리 안에 있는 파일들이다.
    개발자 도구를 보면 id="root"태그 안에 컴포넌트 들이 있는 것을 볼 수 있다.

3) src

대부분의 파일은 이곳에 있다.

  • index.js : 진입 파일이다. entry file이라고 한다. 모든 컴퍼넌트 파일은 이곳을 통해 index.html 에 구현된다. 이름을 함부로 바꾸면 안된다.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App'; 
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    부분을 나눠서 보자

    ReactDOM.render(<App />, document.getElementById('root'));
    //index.html에 APP 컴퍼넌트를 render(보여주겠다) 라는 의미이다. 
    document.getElementById('root')
    //여기서 root는:index.html의 <div id="root"></div> root를 의미한다.
    //만약 root 이름을 바꾸고 싶다면 이 두개를 다 바꿔주면 된다. 
    <App />
    //리액트를 통해 만든 사용자 정의 태그, 컴퍼넌트 이다. 
    //컴퍼넌트의 실제 구현은 위의 `import App from './App';` 에서 이루어진다. 
    import App from './App'; 
    //APP 이라는 컴퍼넌트를 ./App 에서 가져온다는 의미이다. 
    ./APP 
    //./App.js 파일을 의미한다. 뒤에 js 가 생략되어있다고 생각하자
    //실제 구현은 src 폴더의 App.js 파일에 있다.
  • APP.js :

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    //아래가 컴퍼넌트를 만드는 템플릿이다. 
    class App extends Component{
      render() {
        return (
        //실제 구현되는 APP 컴퍼넌트는 div태그 내부이다.
        //실제 개발할때는 <div> </div> 사이를 지우고 그 내부에 코드를 짜면 된다. 
          <div className="App">
           //이부분에 코드를 짜면 된다.
          </div>
        );
      }
    }
    export default App;

4) git ignore

github에 올리고 싶지 않은 것을 작성하는 곳이다.
node.modules는 꼭 여기에 작성해주자.

5) package.jason

라이브러리/패키지 세팅 리스트 정보(종류, 버전) 들어있는 파일이
모든 프로젝트마다 package.json 하나씩 존재

  • dependencies

    리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
    실제 코드는 node.modules 폴더에 존재
    실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재하기 때문에 공유할 때 내가 작성한 코드 + package.json(설치한 패키지 정보) 넘겨야한다.
    다른 사람이 그것을 받아서 npm install 만 입력하면 package.json에 정보가 있는 관련 모듈 전부 다운 받아진다.

    라이브러리 새로 설치 시
    npm으로 설치 시 (ex. npm install slider) node modules에 자동으로 설치된다.
    하지만 dependencies에 자동으로 추가 되는 것은 아니다.
    dependencies에 추가하려면 —save를 붙여야한다. (ex. npm install slider —save)


배포하는 법 (안됨. 나중에 더 보기)
npm run build : build 폴더 생성. 크기가 작아짐
npx serve -s build : 로컬 호스트 알려줌

0개의 댓글