06_Oct_2021 ๐ฐ์๋ฆฌ์ค AI ํธ๋ TIL: React ํ๋ก์ ํธ ์์ฑํ๊ธฐ
Create React App
๊ผญ Create React App์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒ์ ์๋๊ณ , ์ง์ script๋ฅผ ์์๋ก ์ถ๊ฐํด์ ์ฌ์ฉํด๋ ๋ฌด๋ฐฉํ๋ค (๋จ์ง ํ๋ก์ ํธ ํ๊ฒฝ ์ค์ ์ ์ฝ๊ฒ ๋์์ค ๋ฟ์ด๋ค.)
Create React App(CRA)๋?
-
React ํ๋ก์ ํธ๋ฅผ ์์ฝ๊ฒ ์์ฑํ ์ ์๋๋ก ๋์์ฃผ๋ '๋ณด์ผ๋ฌํ๋ ์ดํธ(Boilerplate)'
-
์ ๋ง์ React์ฉ ๋ณด์ผ๋ฌํ๋ ์ดํธ๊ฐ ์์ง๋ง Facebook์์ ์ง์ ๋ง๋ค์ด ๊ด๋ฆฌํ๋ ๋ณด์ผ๋ฌํ๋ ์ดํธ์ด๊ธฐ ๋๋ฌธ์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ค.
-
ํ๋ก์ ํธ ์์ฑ์ ํ์ํ ๋ค์ํ ๊ธฐ๋ฅ์ Command๋ก ์ ๊ณตํ๋ค.
CRA์ ์ฅ์
- ๊ฐ๋ฐ์๊ฐ ์จ์ ํ React App ๊ฐ๋ฐ์ ์ง์คํ ์ ์๋๋ก ๋์์ค๋ค.
- ์๋์ ์ผ๋ก ๋ ์ค์ํ ์ฝ๋๋ ๋ ธ์ถ๋์ง ์๋๋ค.
- ๊ฐ๋ ฅํ Command๋ฅผ ์ง์ํ๋ค.
- (๋๋ถ๋ถ์) ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ํด์๋ ์ ์๋๋ก transcompile์ ์๋์ผ๋ก ์ง์ํ๋ค.
Transcompile์ด๋?: ๋ธ๋ผ์ฐ์ ์์ ํด์ํ ์ ์๋ JS ๋ฒ์ ์ด ๊ฐ๊ฐ ๋ค๋ฅธ๋ฐ, ์ด๋ฅผ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ํด์ํ ์ ์๋๋ก ๋ณํ์ ํ๋ ์์ .
- Babel
- ๋ฐฐํฌ ์ ์ฝ๋ ๋ฒ๋ค๋ง
- Webpack
Node.js / NPM
- Create React App์ผ๋ก React ํ๋ก์ ํธ ์์ ์ Node.js ๊ฐ๋ฐ ํ๊ฒฝ์ ์ ๊ณตํ๋ค.
- Node.js์ NPM์ ๋ํด ์๊ณ ์๋ค๋ฉด ์ดํด์ ํฐ ๋์์ด ๋๋ค.
Node.js
- ์ฃผ๋ก ์๋ฒ ํ๋ก๊ทธ๋๋ฐ์ ์ฌ์ฉ๋๋ JavaScript ๊ธฐ๋ฐ์ ์ํํธ์จ์ด ํ๋ซํผ
- 2009๋
๋ฐํ, 2021๋
๊ธฐ์ค v16๊น์ง ์
๋ฐ์ดํธ ๋์ด์๋ค.
- ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ ์๋ฒ ๊ฐ๋ฐ ์ ๊ทผ์ฑ์ ๋์ฌ์ฃผ์๋ค.
- HTTP ํต์ ๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ด์ฅํ๊ณ ์๋ค.
- NPM์ ํตํ ๋ฐฉ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ๊ณตํ๋ค.
- Create React App์ผ๋ก ํ๋ก์ ํธ ์์ฑ ์ ๊ฐ๋ฐ ํ๊ฒฝ ๋ฐ ํ
์คํธ ์๋ฒ๋ก ์ด์ฉ๋๋ค.
NPM
- Node.js ํ๊ฒฝ์์ ์ฌ์ฉํ๋ ๊ฐ์ข
ํจํค์ง๋ค์ ๊ด๋ฆฌํ๋ ์ ์ฅ์.
- Node.js ์ค์น ์ ํจ๊ป ์ค์น๋๋ค.
- ํจํค์ง ๊ด๋ฆฌ ๋ฟ๋ง ์๋๋ผ ์๋ฒ ์คํ ๋ฐ ๊ด๋ฆฌ์ ํ์ํ ๋ค์ํ๊ณ ํธ๋ฆฌํ ๋ช
๋ น์ด๋ฅผ ์ ๊ณตํ๋ค.
- React์์ ์ฌ์ฉ๋๋ ๋ค์ํ ๋ชจ๋๋ค์ด NPM์์ ๋ฐฐํฌ๋๊ณ ์๋ค.
- ์ฃผ๋ก ์๋ฒ ํ๋ก๊ทธ๋๋ฐ์ ์ฌ์ฉ๋๋ JavaScript ๊ธฐ๋ฐ์ ์ํํธ์จ์ด ํ๋ซํผ
- 2009๋ ๋ฐํ, 2021๋ ๊ธฐ์ค v16๊น์ง ์ ๋ฐ์ดํธ ๋์ด์๋ค.
- ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ ์๋ฒ ๊ฐ๋ฐ ์ ๊ทผ์ฑ์ ๋์ฌ์ฃผ์๋ค.
- HTTP ํต์ ๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ด์ฅํ๊ณ ์๋ค.
- NPM์ ํตํ ๋ฐฉ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ๊ณตํ๋ค.
- Create React App์ผ๋ก ํ๋ก์ ํธ ์์ฑ ์ ๊ฐ๋ฐ ํ๊ฒฝ ๋ฐ ํ ์คํธ ์๋ฒ๋ก ์ด์ฉ๋๋ค.
- Node.js ํ๊ฒฝ์์ ์ฌ์ฉํ๋ ๊ฐ์ข ํจํค์ง๋ค์ ๊ด๋ฆฌํ๋ ์ ์ฅ์.
- Node.js ์ค์น ์ ํจ๊ป ์ค์น๋๋ค.
- ํจํค์ง ๊ด๋ฆฌ ๋ฟ๋ง ์๋๋ผ ์๋ฒ ์คํ ๋ฐ ๊ด๋ฆฌ์ ํ์ํ ๋ค์ํ๊ณ ํธ๋ฆฌํ ๋ช ๋ น์ด๋ฅผ ์ ๊ณตํ๋ค.
- React์์ ์ฌ์ฉ๋๋ ๋ค์ํ ๋ชจ๋๋ค์ด NPM์์ ๋ฐฐํฌ๋๊ณ ์๋ค.
Node.js๋ฅผ ์ค์นํ ๊ฒฝ์ฐ, ์์ ์ ์ธ LTS(Long-Term-Support) ๋ฒ์ ์ ์ค์นํ๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
React ํ๋ก์ ํธ ์์ฑ
bash
npx create-react-app <dir name>
cd <dir name>
npm start
- npx: npm ํจํค์ง๋ฅผ 1ํ์ฑ์ผ๋ก ๋ด๋ ค ๋ฐ์ ์คํํ ๋ ์ฌ์ฉํ๋ ๋ช
๋ น์ด.
- cd: ๋๋ ํ ๋ฆฌ ๋ช
์ผ๋ก ์ด๋ํ๋ค.
- npm start: ํ์ฌ ๋๋ ํ ๋ฆฌ์ ํ๋ก์ ํธ๋ฅผ ์คํํ๋ค.
npm install(ํน์ i)
npm install ํจํค์ง๋ช
npm start
npm bulid
(ctrl + c)
npm install: package.json์ ์ ์๋ depnedency(์์กด์ฑ ํจํค์ง)๋ค์ ์ค์นํ๋ค.
npm install ํจํค์ง๋ช
: npm ์๋ฒ๋ก๋ถํฐ ์ํ๋ ํจํค์ง๋ฅผ ๋ด๋ ค ๋ฐ๋๋ค.
npm start: ํ๋ก์ ํธ๋ฅผ ์คํ(Node.js ์๋ฒ ์ด์ฉ.)
npm build: ํ๋ก์ ํธ๋ฅผ ๋น๋
(Ctrl + C): ๋ช
๋ น์ ์ค์งํ๋ค.(npm start ํ ์ข
๋ฃํ๊ธฐ).
CRA ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ
- ./.node_modules/: npm์ ์ด์ฉํด ์ค์นํ ํจํค์ง ๋ชจ์
- ./public/: ์ ์ ์ธ ํ์ผ๋ค์ ๋ชจ์๋์ ๊ณณ (index.html ๋ฑ)
- ./src/: ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ์ํ ํ์ผ๋ค์ ๋ชจ์ ๋์ ๊ณณ (App.js, index.js)
- ./.gitignore: Git์ ์ด์ฉํ ๊ฒฝ์ฐ ๋ถํ์ํ ํ์ผ์ ๋ฌด์ํ ์ ์๋๋ก ํ๋ ์ค์ ํ์ผ
- ./package.json: ํ๋ก์ ํธ์ ๊ดํ ์ ๋ณด์ ์ฌ์ฉํ๋ ํจํค์ง๋ค์ ๋ช
์ธํ๋ ํ์ผ
- ./README.md: ๋ด ํ๋ก์ ํธ์ ๊ดํ ์ค๋ช
์ ์์ฑํ๋ ํ์ผ
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น ๋ฐ ๋ถ๋ฌ์ค๊ธฐ
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
bash
npm install
//package.json ํ์ผ ๋ด์ ์ ์๋ ํจํค์ง ๋ชจ๋ ์ค์น
npm install ํจํค์ง๋ช
//npm ์๋ฒ๋ก๋ถํฐ ํจํค์ง ๋ด๋ ค๋ฐ๊ธฐ
npm install ํจํค์ง๋ช
@version
//ํน์ ๋ฒ์ ์ ํจํค์ง ๋ด๋ ค๋ฐ๊ธฐ
npm install Git ๋ ํฌ์งํ ๋ฆฌ ์ฃผ์
//npm์ด ์๋ Git ๋ ํฌ์งํ ๋ฆฌ๋ก๋ถํฐ ํจํค์ง ๋ด๋ ค๋ฐ๊ธฐ
Package.json
dependencies(์์กด์ฑ)๋ผ๋ ํค ์๋์ ์ค์นํ ํจํค์ง ๋ชฉ๋ก์ด ๋์ด๋๋ค.
์ค์นํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ๋ก์ ํธ ๋ด์์ ๋ถ๋ฌ์ค๊ธฐ
JS
1. CSS๋ importํ๋ ๊ฒ ๋ง์ผ๋ก ์ญํ ์ ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๊ฒฝ์ฐ ํจํค์ง๋ช
๋ฐ๋ก import
import 'ํจํค์ง๋ช
'
2. ๊ธฐ๋ณธ์ ์ผ๋ก ํจํค์ง๋ฅผ ๋ถ๋ฌ์ ํ์ฉํ ๋์๋ ํ ๋นํ ์ด๋ฆ์ ์์ฑ
import something from 'ํจํค์ง๋ช
'
3. ํจํค์ง ๋ด์ ์ผ๋ถ ๋ฉ์๋๋ ๋ณ์๋ง ๊ฐ์ ธ์ฌ ๋๋ ๊ตฌ์กฐ๋ถํดํ ๋น์ผ๋ก import
import { a, b } from 'ํจํค์ง๋ช
'
4. ํจํค์ง์ default๋ก export๋๋ ๊ฐ์ฒด๊ฐ ์กด์ฌํ์ง ์์ ๊ฒฝ์ฐ * as '์ด๋ฆ'์ผ๋ก ๋ถ๋ฌ์
import * as something from 'ํจํค์ง๋ช
'
5. ๋ณ๋์ CSS ํ์ผ์ ์์ฑ ํ ํ๋ก์ ํธ์ ์ ์ฉํ ๊ฒฝ์ฐ, import์ ์คํ์ผ ์ ์ฉ
import './App.css';
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(06_Oct_2021 ๐ฐ์๋ฆฌ์ค AI ํธ๋ TIL: React ํ๋ก์ ํธ ์์ฑํ๊ธฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://velog.io/@juanito_y247/06Oct2021-์๋ฆฌ์ค-AI-ํธ๋-TIL-React-ํ๋ก์ ํธ-์์ฑํ๊ธฐ
์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์
๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
bash
npx create-react-app <dir name>
cd <dir name>
npm start
- npx: npm ํจํค์ง๋ฅผ 1ํ์ฑ์ผ๋ก ๋ด๋ ค ๋ฐ์ ์คํํ ๋ ์ฌ์ฉํ๋ ๋ช ๋ น์ด.
- cd: ๋๋ ํ ๋ฆฌ ๋ช ์ผ๋ก ์ด๋ํ๋ค.
- npm start: ํ์ฌ ๋๋ ํ ๋ฆฌ์ ํ๋ก์ ํธ๋ฅผ ์คํํ๋ค.
npm install(ํน์ i)
npm install ํจํค์ง๋ช
npm start
npm bulid
(ctrl + c)
npm install: package.json์ ์ ์๋ depnedency(์์กด์ฑ ํจํค์ง)๋ค์ ์ค์นํ๋ค.
npm install ํจํค์ง๋ช
: npm ์๋ฒ๋ก๋ถํฐ ์ํ๋ ํจํค์ง๋ฅผ ๋ด๋ ค ๋ฐ๋๋ค.
npm start: ํ๋ก์ ํธ๋ฅผ ์คํ(Node.js ์๋ฒ ์ด์ฉ.)
npm build: ํ๋ก์ ํธ๋ฅผ ๋น๋
(Ctrl + C): ๋ช
๋ น์ ์ค์งํ๋ค.(npm start ํ ์ข
๋ฃํ๊ธฐ).
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
bash
npm install //package.json ํ์ผ ๋ด์ ์ ์๋ ํจํค์ง ๋ชจ๋ ์ค์น npm install ํจํค์ง๋ช //npm ์๋ฒ๋ก๋ถํฐ ํจํค์ง ๋ด๋ ค๋ฐ๊ธฐ npm install ํจํค์ง๋ช @version //ํน์ ๋ฒ์ ์ ํจํค์ง ๋ด๋ ค๋ฐ๊ธฐ npm install Git ๋ ํฌ์งํ ๋ฆฌ ์ฃผ์ //npm์ด ์๋ Git ๋ ํฌ์งํ ๋ฆฌ๋ก๋ถํฐ ํจํค์ง ๋ด๋ ค๋ฐ๊ธฐ
Package.json
dependencies(์์กด์ฑ)๋ผ๋ ํค ์๋์ ์ค์นํ ํจํค์ง ๋ชฉ๋ก์ด ๋์ด๋๋ค.
์ค์นํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ๋ก์ ํธ ๋ด์์ ๋ถ๋ฌ์ค๊ธฐ
JS
1. CSS๋ importํ๋ ๊ฒ ๋ง์ผ๋ก ์ญํ ์ ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๊ฒฝ์ฐ ํจํค์ง๋ช ๋ฐ๋ก import import 'ํจํค์ง๋ช ' 2. ๊ธฐ๋ณธ์ ์ผ๋ก ํจํค์ง๋ฅผ ๋ถ๋ฌ์ ํ์ฉํ ๋์๋ ํ ๋นํ ์ด๋ฆ์ ์์ฑ import something from 'ํจํค์ง๋ช ' 3. ํจํค์ง ๋ด์ ์ผ๋ถ ๋ฉ์๋๋ ๋ณ์๋ง ๊ฐ์ ธ์ฌ ๋๋ ๊ตฌ์กฐ๋ถํดํ ๋น์ผ๋ก import import { a, b } from 'ํจํค์ง๋ช ' 4. ํจํค์ง์ default๋ก export๋๋ ๊ฐ์ฒด๊ฐ ์กด์ฌํ์ง ์์ ๊ฒฝ์ฐ * as '์ด๋ฆ'์ผ๋ก ๋ถ๋ฌ์ import * as something from 'ํจํค์ง๋ช ' 5. ๋ณ๋์ CSS ํ์ผ์ ์์ฑ ํ ํ๋ก์ ํธ์ ์ ์ฉํ ๊ฒฝ์ฐ, import์ ์คํ์ผ ์ ์ฉ import './App.css';
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(06_Oct_2021 ๐ฐ์๋ฆฌ์ค AI ํธ๋ TIL: React ํ๋ก์ ํธ ์์ฑํ๊ธฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@juanito_y247/06Oct2021-์๋ฆฌ์ค-AI-ํธ๋-TIL-React-ํ๋ก์ ํธ-์์ฑํ๊ธฐ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค