TIL 42 | React 환경 구축하기

meow·2020년 8월 30일
0

React

목록 보기
3/33
post-thumbnail

React 작업 시작하기

React 개발 환경으로 사용할 디렉토리를 생성하고, React 앱에게 이곳을 개발환경으로 만들어달라고 요구한다고 생각하면 쉽다. 디렉토리에 세팅을 하는 방법을 알아보자.

  1. 아래 코드 예시처럼 먼저 터미널에서 해당 디렉토리로 이동한다.
> cd /Users/username/Desktop/react-app
  1. 터미널에 > create-react-app .을 친다.
  2. 작업이 다 끝나면 해당 디렉토리에 필요한 파일들이 생겨난 것을 확인할 수 있다.
  3. 해당 디렉토리를 에디터에서 연다.
  4. Vs Code 터미널에서 npm run start를 입력하면 아래와 같은 메세지와 함께 샘플 웹 애플리케이션이 브라우저에서 실행된다.

위 주소는 개발중인 앱을 확인할 수 있는 주소라고 생각하면 된다. 가장 최소한의 앱을 구현해서 미리 볼 수 있게 해준다.

실행을 끄고 웹앱을 종료하고 싶으면 단축키 ctrl+C를 입력하면 된다. 그러면 웹 브라우저 역시 새로고침하면 연결이 끊긴 것을 확인할 수 있다.

디렉토리 구조

VS code 를 통해 확인할 수 있는 (React가 자동으로 생성해준) 디렉토리의 구조이다.

JS 코딩은 어디서 할까?

public 디렉토리 내부의 index.html 파일을 확인해보면 내부에 <div id="root"></div> 가 있는 것을 확인할 수 있다. 이 안에 리액트 요소들이 들어간다. 리액트 웹앱에서 개발자 도구로 확인해보면, 실행되고 있는 화면의 태그들이 모두 이 #root 내부에 포함된 것을 확인할 수 있다. id 값은 변경할 수 있다.

#root 내부에 들어간 컴포넌트들은 src 디렉토리 안에 있는 파일들이다. 개발을 하게 되면 대부분의 파일들이 src 파일에 들어간다고 생각하면 된다. 이 많은 파일들 중에 진입파일이라고 할 수 있는 것이 바로 index.js 파일이다.

index.js 파일을 분석해보자.

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

<App />이 리액트를 통해서 만들어진 컴포넌트이고, import를 통해서 ./App, 즉 App.js로부터 들어온다고 생각하면 된다. 이 App.js 과 같은 파일을 편집하는 것이 리액트를 하는 것! 이라고 생각하자. 우리가 파일을 수정할때마다 웹브라우저에 반영이 되기 때문에 그때그때 확인이 가능하여 매우 편리하다.

CSS 코딩은 어떻게 할까?

다시 index.js로 돌아가보자.

import './index.css'; 이 파일을 수정하면 된다.

Deploy(배포)

npm run start로 실행된 웹앱은 상당히 무거운 resource를 가지고 있다. 이를 다른 사람들이 사용할 수 있도록 배포할때는 파일의 무게를 훨씬 가볍게 줄여주어야 한다.

터미널에서 > npm run build 를 입력하면 build 라는 디렉토리가 생성된다. 그 안에 생성된 index.html 파일을 열어보면 공백이 전혀 없는 것을 볼 수 있다. 불필요하게 용량을 차지하는 것들을 다 삭제하여 생성된 파일이라고 생각하면 된다. 다른 파일들도 알아서 용량을 줄이고, 보안적, 심미적으로 좋지 않은 내용을 없애는 작업을 한 후 로드할 수 있도록 알아서 처리를 해준다.

이렇게 실제로 서비스를 할때는 build 안에 있는 파일을 사용하면 된다.

> npx serve -s build : build 안에 있는 파일을 서버에 올린다.

profile
🌙`、、`ヽ`ヽ`、、ヽヽ、`、ヽ`ヽ`ヽヽ` ヽ`、`ヽ`、ヽ``、ヽ`ヽ`、ヽヽ`ヽ、ヽ `ヽ、ヽヽ`ヽ`、``ヽ`ヽ、ヽ、ヽ`ヽ`ヽ 、ヽ`ヽ`ヽ、ヽ、ヽ`ヽ`ヽ 、ヽ、ヽ、ヽ``、ヽ`、ヽヽ 🚶‍♀ ヽ``ヽ``、ヽ`、

0개의 댓글