우선 React를 실행하기 위해서는 Node.js 를 설치해야한다.
Node.js 설치하러 바로가기
🎈 Node란?
자바스크립트가 브러우저 밖에서도 동작하게 하는 환경이다.
(1) 왜 React를 하는데 Node.js 를 설치해야 할까?
React 는 분명 view 를 담당하는 라이브러리인데, 왜 Node.js를 설치해야할까?
그 이유는 바로 프로젝트 개발 환경을 구축하는 주 프로그램들이 Node.js 기반이기 때문이다.
🎈 npm이란?
Node Package Manager의 약자로 말 그대로 노드기반의 패키지를 관리해주는 것이다.
✅ 버전 CHECK
npm -v
node -v
와 같은 명령어를 통해 버전을 check 한다!
이 때, 버전을 check하는 이유는 정말 버전이 궁금해서 그럴 수도 있지만, 잘 깔렸는지 확인하기 위함이니 처음 깔았을 땐 반드시 확인해보자 😀
🎈 CRA(Create-React-App)란?
리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구(toolchain)
(1) 왜 CRA(Create-React-App)를 사용할까?
📌 CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공
📌 CRA를 사용하면 하나의 명령어로 리액트 개발환경 구축이 가능
(2) CRA 설치하는 법
① 설치하고 싶은 경로로 진입
cd 설치하고 싶은 경로② 프로젝트 설치
npx create-react-app 프로젝트 명③ 프로젝트로 진입
cd 프로젝트 명④ 로컬 서버 띄우기
npm start
(3) CRA 기본 폴더 및 파일 구성
CRA 설치 시 초기 폴더 구성은 아래와 같다.
# node.modules - package.json - .gitignore
① node.modules
→ CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
② package.json
→ CRA 기본 패키지 외에 추가로 설치된 라이브러리 / 패키지 정보(종류, 버전)이 기록되는 파일
③ .gitignore
→ github에 올리고 싶지 않은, 굳이 안올려도 되는 파일을 작성할 수 있음
# index.html - index.js - App.js
① index.html
→ <div id="root"></div> 코드가 포함되어 있다.
② index.js
→ import 파일을 불러온다.
→ ReactDOM.render( <App /> , document.getElementById('root'))
ReactDom 이라는 객체 안에 render 키 값에 접근했더니 함수가 존재한다.
인자는 두 개로, 첫 번째 인자(<App />) 는 화면에 보여주고 싶은 컴포넌트, 두 번째 인자는 화면에 보여주고 싶은 컴포넌트 위치(document.getElementById('root'))를 나타낸다.
③ App.js
→ 현재 화면에 보여지고 있는 초기 컴포넌트
# 그 외
① public 폴더
→ index.html
→ images
→ data
② styles 폴더
→ components
→ pages
→ styles
+) 📢 components vs pages
componentes
여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리 (ex: nav, footer)
pages
page componentes는 pages 폴더에서 관리
해당 페이지에서만 사용하는 컴포넌트는 해당 페이지 컴포넌트 폴더 하위에서 관리한다.
+) 📢 reset.scss vs commom.scss
reset.scss
css 초기화
commom.scss
공통으로 사용하는 css 속성 정의
