React

Create React App(CRA)로 시작하기

퓨어프 2023. 11. 23. 15:31
반응형

Create React App(CRA)는 리액트를 배우기에 간편한 환경이다 - (리액트 문서 참조)

CRA을 이용하면 웹팩이나 바벨같은 복잡한 설정을 몰라도 리액트를 쉽게 시작할 수 있다.

 

 

cra는 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해줍니다.
Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요합니다.

 

 

 

1. node.js 설치

먼저, 초기 설정을 위해 node.js를 설치해준다.

(react는 node.js 기반의 라이브러리로, CRA는 node.js 서버에서 실행되기 때문에 node.js를 설치)

https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#create-react-app

(리액트 문서에는 Node 14.0.0 이상의 버전 및 npm 5.6 상위버전이 필요하다고 나와있다)

 

https://nodejs.org/ko/download/

 

 

 

 

 

위 링크를 누르면 아래와 같이 다운을 위한 페이지가 나온다.

개인 컴퓨터 사양과 환경에 맞게 다운로드해준다.

 LTS버전의 Windows Installer 64-bit를 설치해주었다.

 

 

 

 

 

CRA 실행

 cmd에서  npx create-react-app 앱이름(npm create-react-app 앱이름)

npx create-react-app my-app
cd my-app
npm start

 

 

앱이름(my-app)라는 폴더안으로 이동을 해서 npm start를 해주면 된다.

 

위 그림과 같이 생성이 된다.

 

 

 

public 폴더와 src 폴더 어떻게 사용되는 것인가?

 

 

 

public : 앱이 컴파일될 때 사용하지 않는 모든 것

  • 앱을 컴파일하는 데 필요하지 않은 요소들.
  • 절대경로 사용이 가능해진다!
  • import 해올 일이 있을 때, ../../이렇게 상대경로로 써주지 않아도 되고, 그냥 파일명 써주면 가능하다!
  • 정적파일을 담는 곳. 사용자가 직접 웹브라우저상으로 볼 수 있는 index.html같은 파일들, image 파일들이 담긴다.
  • 경로를 동적으로 참조해야 할 때 사용

 

 

src : 앱이 컴파일 될 때 사용하는 모든 것

  • 개발하면서 작업하는 파일 대부분을 넣는 폴더(index.js, 그 외 컴포넌트 같은 js파일, css파일 등)

예를 들어, 컴포넌트 안에서 사용하는 이미지는 src폴더에 있어야 하지만 파비콘과 같이 앱 밖에서 사용하는 이미지는 public 폴더에 있어야 한다.

 

 

이미지 파일 가져오기

📁 public
<img src="/image.jpg" />
📁 src
<img src={require('../../assets/image.jpg')} />

 

 

src폴더에 있는 이미지는 require를 통해 가져올 수 있다.

 

src폴더에서 require를 통해서 가져 온 이미지가 갖는 장점

  1. Scripts and stylesheets get minified and bundled together to avoid extra network requests.
    추가 네트워크 요청을 피하기 위해 스크립트와 스타일시트가 축소되고 함께 번들됩니다.
  2. Missing files cause compilation errors instead of 404 errors for your users.
    파일이 없으면 사용자에게 404 오류 대신 컴파일 오류가 발생합니다.
  3. Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
    결과 파일 이름에는 콘텐츠 해시가 포함되므로 브라우저가 이전 버전을 캐싱하는 것에 대해 걱정할 필요가 없습니다.

webpack's asset bundling을 사용하면 /src내의 파일들이 rebuilt된다!
-> rebuild를 빠르게 하기 src내부의 파일만 webpack에서 처리되므로 /src안에 모든 JS, CSS 파일을 넣어야 한다. 안그럼 webpack에서 볼 수 없음!

 

 

그렇다면 반대로 public 폴더로 가져온다면?

  1. 파일이 후처리(post-process)되거나 경량화(minify)되지 않음
  2. 파일 경로를 잘못 입력하거나 해당파일이 존재하지 않을 경우 컴파일 단계가 아닌 사용자가 접근할 때 404 오류를 응답받음
  3. 결과 파일명에 content hash가 포함되지 않기 때문에, 파일이 수정될 때마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 한다. 
    혹시 import를 안하고 인라인으로 src 내의 이미지 파일을 불러오고 싶다면!
 <img src={require("../../../assets/Logo.svg").default}/>



 

 

 


참고 
https://stackoverflow.com/questions/44643041/do-i-store-image-assets-in-public-or-src-in-reactjs
https://create-react-app.dev/docs/using-the-public-folder/#when-to-use-the-public-folder
https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a

반응형