react의 tool

1. 설치 방법

yarn Mac 사용 개발자:

brew로 설치 하세요: brew install yarn

brew가 설치되어져 있지 않다면 여기에서 확인해 보세요: https://brew.sh/

/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/master/install.sh>)"

위에 명령어를 복사하셔서 터미널에 붙여서 실행하시면 설치가 된답니다.

Windows 사용 개발자:

yarn 사이트에 가시면 설치 파일을 받으 실 수 있어요 :)

https://classic.yarnpkg.com/en/docs/install/#windows-stable

윈도우용 터미널: https://cmder.net/

NodeJS: https://nodejs.org/en/

Git: https://git-scm.com/downloads

저의 iTerm 셋팅: https://gist.github.com/kevin-smets/8568070

사용한 커맨드:

git -v

node -v

npm -v

brew install yarn

yarn -v

 

2. 툴 설명

깃

소스코드 버전관리를 하고 나중에 github으로 올리는 것

nodeJS

자바스크립트를 실행할 수 있는 환경

→ 웹 브라우저 밖에서도 운영체제 위에서나 노드JS 환경이 있다면 자바스크립트로 코드를 작성하고 실행할 수 있다.

어느곳에서나 자바스크립트로 프로그래밍이 가능하게 하는 프레임워크

(백엔드 서버 만들 때, 서버 사이드 렌더링, 커맨드 라인 툴이나 스크립트를 만들 때)

npm

패키지 매니저 외부 라이브러리 필요할 때 사용함

간단하게 명령어 하나로 라이브러리 설치 업데이트 삭제 가능하다. 라이브러리 손쉽게 관리 가능. npm을 이용하면 package.json 이 생성 여기 안에 우리가 쓰고 있는 라이브러리, 버전, 정보가 들어가있고 이걸 손쉽게 관리하는 것이 npm 이다.

npx

npm 은 앱 매니저이고 npx는 설치가 아니고 실행할 수 있게 도와줌

라이브러리를 npm은 실행하진 못하는데, npx는 원하는 패키지를 실행할 수 있게 도와주는 툴이다. 실행하고자하는 외부 라이브러리나 패키지가 있다면 해당하는 라이브러리를 실행할 수 있다.

yarn

페이스북에서 만들어진 패키지 매니저 npm에서 약간 부족했던 아이들을 보완하기 위해서 만들어 졌다. yarn도 npm 위에서 동작하기 때문에 npm에서 쓰는 package.json을 유지하고 호환하면서 관리할 수 있음!

성능 더 빠름, 버전 관리 잘 이루어짐, 보안적으로 더 안전함'

 

 

3. create react app

유용한 툴을 자동적으로 설치할 수 있게 해준다.

create react app으로 react app을 만들고 설정하는 방법

1. react를 사용하고 싶은 폴더를 터미널로 들어간다.
   1. cd 를 이용해서 폴더 안으로 들어가면 됨
2. npx, npm, yarn 별로 app을 실행하는 코드가 다르지만,npm : npm init react-app my-app이 명령어를 터미널에 입력해서 app을 create 한다
   • react-app 이라는 것은 페이스북에서 만든 패키지이다.
3. yarn : yarn create react-app my-app
4. npx : npx create-react-app my-app
5. 그 후 리액트를 실행하고 싶으면,npm start or yarn start 를 한다.

• 비주얼 스튜디오 코드를 터미널에서 바로 갈 수 있도록 하고 싶다면, 비주얼 스튜디오 코드의 shell로 가서 code를 설치한 후, 터미널에서 code 가고싶은 폴더이름 을 치고 엔터 누르면 갈 수 있음~

4. 프로젝트 구조 설명

create react app을 이용해서 react를 만들었다면, 그 폴더 안에는 많은 것들이 설치되어 있다.

외부에 있는 것들

• .gitignore
• 명시되어 있는 폴더나 파일은 깃에 정보가 유지되지 않는다. 빌드는 프로젝트를 실행하면, 실행하면서 만들어지는 임시파일이라 깃에 정보가 유지하고싶지 않기 때문에 깃이그노어로 들어가지 못하게 만들어준다. 프로젝트를 실행했을 때 부수적으로 생기는 아이들. 버전 관리에 포함이 되면 안되는 아이들이 들어있다.
• package.json
• npm에서 버전을 관리할 때 내 프로젝트에서 외부적으로 쓰이고 있는 라이브러리와, 그 라이브러리의 버전들이 명시되어 있다.
• yarn.lock
• yarn을 이용할 경우에 포함되는 것

폴더들

• node_modules
• 외부라이브러리를 추가했을 때 자동적으로 추가가 되는 것, package.json 안에 있던 것들이 노드모듈 안에 다 들어와있다.
• public
• 우리가 사용자에게 배포를 할 때 외부적으로 보여지는 대표적인 것들이 들어가있다. favicon 이라든지, 기본적인 index.html, 관련된 로고 이미지들이 있다.
• manifest.json
• 웹 어플리케이션에서 필요하지는 않지만, 나중에 PWA라고 해서 프로그래시브 웹 어플리케이션을 만들 때 ( 모바일에서 저장하는 웹어플리케이션) 필요하다.
• robots.txt
• 웹크롤링할 때 사용

소스(src) 폴더

• index.js → 제일 첫번째 제일 최상위에 있는 루트 (지금 화면에 나오는 것)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

여기서 보면, 이렇게 root가 있고, <App /> 라고 되어있다.

그렇다면,

여기 보이는 src 코드의 App.js가 먼저 실행되는 것이다. 최상위 루트가 App / 을 해주었으니까 최상위루트인 index.js가 App.js를 실행해라 라고 명령했다.

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이것이 App.js 인데, 여기서<p> 태그에 있는 reload 대신 hello라고 바꾸면, 우리화면에서도 hello라고 바꾸어지는 것을 볼 수 있다.

뭔가 할 필요 없이 그냥 hello를 저장만하면 바뀐다~

5. 숨겨진 툴 파헤치기

본격적인 리액트 앱을 만들기에 앞서, 도대체 수많은 리액트 개발자들이 어떤 툴을 공통적으로 이용하길래 자동화된 툴이 생겼을까? 어떤 툴들이 있을까를 알아본다.

우선, 기본적으로 깃이 설치되어 있다.

yarn eject를 이용하면 숨겨진 툴을 볼 수 있다.

** eject를 여는 순간 이 박스를 열어서 아이템을 다 밖으로 빼놓는 순간, 다시 이 박스를 포장할 수 없다. 그래서 eject를 사용해야 할 때는 내가 정말 필요해서 무언가 세부적으로 설정해야 할 때만 열어봐야 한다.

eject를 열고 소스파일들을 살펴보면, config라는 폴더가 있다.

여기서는 webpack이 있다.

• webpack : 코드를 모듈화해서 번들링해서 배포할 수 있게 도와준다.
• babel, typescript 등등도 들어가있고, postcss도 들어가 있는 것들
• 우리가 바벨과 웹팩을 어떻게 설정해야 하는지 몰라도 기본적으로 설정되어있어서 쉽게 만들고 쓸 수 있다

숨겨진 툴 설명

• babel → 브라우저나, 예전 버전의 브라우저가 이해할 수 있는 소스코드로 변환해준다. 타입스크립트나, jsx라는 순수 자바스크립트가 아닌 친구들을 브라우저가 이해할 수 있도록 js로 변환해주는 좋은 일을 하고 있다.
• 자바스크립트 트랜스컴파일러. 최신버전 2015+을 예전 버전으로 문법을 바꾸어준다. (예전 브라우저도 이해할 수 있게~)
• webpack → 우리가 멋지게 만든 프로젝트, 소스코드를 사용자에게 간편하게 전달할 수 있도록 모듈을 번들링해줌
• 우리의 코드를 번들링해서 즉 우리가 작성하는 소스코드나 리소스 이미지를 묶어서 번들단위로 사용자에게 제공할 수 있도록 도와준다. 메인페이지를 열었을 때 자바스크립트 abc가 필요하고 이런 이미지가 쓰이면 이것을 잘 번들링해서 사용자에게 보내주고 이미지들을 번들링해서 모아주고 우리가 자바스크립트를 작성하는 것을 소스코드를 조금 줄여주고 긴 변수나 함수의 이름을 다른사람들이 알아보지 못하도록 이름도 이상하게 만들어놓을 수도 있음
• eslint : 즉각적으로 우리의 코드에 잘못된 점이 있다면 경고 사인을 보내준다.
• 코드를 잘못짜거나 무슨 문제가 있다면 잘못됐다고 알려준다.
• jest : 자바스크립트를 코드로 작성할 때 유닛테스트를 할 수있게 도와주는 테스팅 프레임워크이다. (테스트를 잘 할 수 있게 도와준다.) TDD.
• PostCss → 제공하는 프레임워크에 맞게 css를 작성하면 그 css를 다시 브라우저가 이해할 수 있는 css로 변환해준다.
• css 전처리기 중 하나 less, sass 같은 것이다. postcss는 굉장히 다양한 플로그인이 있어서 우리가 원하는 것을 조금 추가해서 할 수 있다. 현업에서 많이 쓰인다.

6. 개발 유용 툴

1. 크롬 브라우저로 작업할 때 정말 유용한 꼭 설치해야 하는 디버깅 툴 리액트로 만들어진 어플리케이션이 있다면 브라우저 콘솔창을 이용해서 컴포넌트도 확인할 수 있고 유용하게 디버깅도 할 수 있고 좋다.
2. React Developer Tools
3. reactjs snippet컴포넌트를 일일히 수동적으로 하지 않아도 rcc + 엔터 만 누르면 바로 리액트 컴포넌트가 생길 수 있도록 도와준다.
4. 비주얼스튜디오 코드에서 다운받을 수 있다.
5. Auto Importimport를 자동적으로 해주는 유용한 것이다.
6. 비주얼 스튜디오 코드에서 다운받을 수 있다.