๐CRA๋ฅผ ์ฌ์ฉํ ํ๋ก์ ํธ ์ธํ
์ ๋ฒ ์ฃผ์ฐจ ๊ณผ์ ๋ก CRA(Create React App)์ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ์ธํ ํ๋ค.
์ถ๊ตญ์ ์ฝ์์ ๋๊ณ ๊ธํ๊ฒ ์งํํ๋ํฐ๋ผ, ์ฌ๋ฌ ์๋ฌ๋ค์ ๋ง์ฃผํ์ง๋ง ์ฐจ๊ทผ์ฐจ๊ทผ ํด๊ฒฐํ์ง ๋ชปํด ์์ฌ์์ด ๋จ์๋ค.
์ค๋ ์ฝ๋ฉ์ผ๊ธฐ๋ ๋ฉํ ๋๊ป ๋ฐ์ ํผ๋๋ฐฑ ์์ฃผ๋ก ๊ธฐ๋ก์ ํด๋ณด๋ คํ๋ค.
๐dependencies์ devDependencies์๋ ์ด๋ค ์ฐจ์ด๊ฐ ์์๊น?
dependencies์๋ ์ ํ๋ฆฌ์ผ์ด์ ๋์๊ณผ ์ง์ ์ ์ผ๋ก ์ฐ๊ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๋ค.
npm install ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ช
devDependencies์๋ ํ๋ก๊ทธ๋จ ๋์๊ณผ ์ง์ ์ ์ธ ์ฐ๊ด์ ์์ง๋ง, ๊ฐ๋ฐํ ๋ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๋ค. devDependencies์ ์ค์น๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ฐฐํฌํ ๋ ํฌํจ๋์ง ์๋๋ค. eslint์ prettier์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ devDependencies๋ก ์ค์นํ๋๊ฒ ์ข์ ๋ณด์ธ๋ค.
npm install ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ช
--save-dev, npm install ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ช
-D
๐npm package.json์ version๊ณผ caret(^)
์บ๋ฟ(^)์ ๋ฌด์์ ์๋ฏธํ ๊น?
๐CRA๋ก ์์ฑ๋ html์๋ ์ <div> ํ๊ทธ ํ๋๋ง ์กด์ฌํ ๊น?
CRA๋ก ์์ฑ๋ ํ๋ก์ ํธ์์ htmlํ์ผ์ index.html ํ๋๋ฟ์ด๋ค. ํ๋์ html ํ์ผ์ ํตํด ๋ชจ๋ ํ์ด์ง๊ฐ ๋ ๋๋ง ๋๋ค. ๊ทธ๋์ SPA(Single Page Application)์ธ ๊ฒ์ด๋ค.
//index.html
<body>
<div id="root"></div>
</body>
์ด๋ป๊ฒ ํ๋์ html ํ์ผ๋ก ์ฌ๋ฌ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๊ฒ ๋๋ ๊ฒ์ผ๊น?
index.js๋ฅผ ์ดํด๋ณด์.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
react-dom์์ ReactDOM์ importํ๊ณ , ํจํค์ง์ ์๋ render ํจ์๋ฅผ ์ฌ์ฉํ๋ค. ์ด render ํจ์๋ index.html ํ์ผ์์ root id๋ฅผ ๊ฐ์ง ํ๊ทธ๋ฅผ ์ฐพ์ ๊ฑฐ๊ธฐ์ ์๋ App ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋ง ํ๋ค. App ์ปดํฌ๋ํธ๋ ์ฌ๋ฌ ๊ฐ์ ํ์ ์ปดํฌ๋ํธ๋ค๋ก ๊ตฌ์ฑ๋๋๋ฐ, ํ์์ ์๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ค์ด App์ด๋ผ๋ ์ต์์ ์ปดํฌ๋ํธ์ ์ฐ๊ฒฐ๋์ด ๊ฒฐ๊ณผ์ ์ผ๋ก ํ๋์ html ํ์ผ์ ๋ชจ๋ ๋ ๋๋ง ๋๋ ๊ฒ์ด๋ค. (๋ณดํต์ Router๊ฐ ์ต์์์ ์์นํ๋ค.)
๐<head> ์์ ๋ค์ด๊ฐ๋ meta ํ๊ทธ๋ค์ ์ด๋ค ์ญํ ์ ํ ๊น?
๐ meta ํ๊ทธ๋?
๋ฉํ ์์๋ ์น๋ฌธ์ HTML์์ <head> ์์ ๋ฐ์ ๋ค์ด๊ฐ๋ ์น ํ์ด์ง ํ๋กํ์ผ ์ ๋ณด๋ฅผ ๋ด์ ํ๊ทธ์ด๋ค. ํ์ด์ง ํ์ดํ ์ ๋ณด, ์ฝํ ์ธ ์์ฝ ์ ๋ณด, ํ์ด์ง๋ฅผ ๋ํํ๋ ํค์๋ ์ ๋ณด, ํ์ด์ง์ accessํ๋ ๊ฒ์์์ง ๋ก๋ด์ ๋์ ์ง์ ๊ณผ ๊ด๋ จํ ์์ฑ ์ ๋ณด๋ฅผ ๊ฒ์์์ง์๊ฒ ์ ๋ฌํ๋ ์ญํ ์ ํ๋ค.
๋ฉํํ๊ทธ๋ SEO(๊ฒ์์์ง์ต์ ํ)์ ๊ด๋ จ์ด ๊น์๋ฐ, ์ต๊ทผ์ ์ผ๋ถ ํค์๋ ๊ฒ์ ๊ฒฐ๊ณผ์์๋ ๊ฒ์์์ง์ ํ๋จ์ ์ํด ์์ฝ๋ฌธ์ ๋ด์ฉ์ด ํ์ดํ์ ํ์ฉ๋๋ ๊ฒฝ์ฐ๊ฐ ํ์ธ๋๊ธฐ๋ ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ ํ ๋ฉํ ์์์ ์ค์์ฑ์ ์๋นํ๋ค๊ณ ํ ์ ์๋ค.
1. ์์ฝ๋ฌธ ๋ฉํ (meta description) ํ๊ทธ: ํ์ด์ง ์ฝํ ์ธ ์ ๋ํ ๊ฐ๋ตํ ์์ฝ ์ ๋ณด
2. ๋ก๋ณดํธ ๋ฉํ (meta robot) ํ๊ทธ: ๊ฒ์ ์์ง์ ํฌ๋กค๋ฌ์๊ฒ ํ์ด์ง๋ฅผ ์์ธ์ ํ ๊ฒ์ธ์ง ํ์ด์ง ๋ด๋ถ์ ๋งํฌ๋ฅผ ๋ฐ๋ผ์ ์ด๋ํ ๊ฒ์ธ์ง์ ๋ํด ์ ํ ์ ๋ณด
3. ํ์ดํ ๋ฉํ ํ๊ทธ: ์น ํ์ด์ง์ ํ์ดํ ์ ๋ณด
4. ํค์๋ ๋ฉํ ํ๊ทธ: ์น ํ์ด์ง ์ฝํ ์ธ ์ ๊ด๋ จ์ฑ์ด ๋์ ํค์๋ ์ ๋ณด
์ผ๋ฐ์ ์ธ ๋ฉํ ํ๊ทธ๋ ์นํ์ด์ง์ ์์ค ์ฝ๋ ์ผ๋ถ์ ๋ถ๊ณผํ๋ฉฐ ํ์ด์ง ์์ฒด์๋ ํ์๋์ง ์์ผ๋ฉฐ, ํ์ด์ง์ ํน์ ์์ญ์ ํ์๋๋ ํ์ดํ๊ณผ ๋์คํฌ๋ฆฝ์ ๊ณผ ๊ฐ์ ๋ฉํ ๋ฐ์ดํฐ๊ณผ๋ ๋ค๋ฅด๋ค. ํ์ค ํ๊ทธ์ ๋ก๋ด ํ๊ทธ์ ๊ฐ์ ์ผ๋ฐ์ ์ธ ๋ฉํ ํ๊ทธ๋ ์ฌ์ฉ์(๋ฐฉ๋ฌธ์)์๊ฒ ๋ณด์ฌ์ง์ง ์๋๋ค.
๐ ์ฃผ์ meta ํ๊ทธ
- <meta charset='utf-8'>
- html ํ์ผ์ ์ธ์ฝ๋ฉ์ ์๋ ค์ฃผ๋ ํ๊ทธ์ด๋ค. ๋ค์ํ ๊ฒฝ์ฐ์ ํ๊ธ์ด ๊นจ์ง์ง ์๊ณ ์ ๋ณด์ฌ์ฃผ๋๋ก ํด์ค๋ค.
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- meta viewport ํ๊ทธ๋ ์ ํ์ด ์์ดํฐ, ์์ดํจ๋ ๋ฑ ์์ฌ์ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์ ๋ทฐํฌํธ ํฌ๊ธฐ ์กฐ์ ์ ์ํด ๋ง๋ค์๋ค. ํ์ด์ง๋ฅผ ํ๋์ ์ฅ์น์์๋ง ๋ณด๋ ๊ฒ์ด ์๋๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ ๋์์ธ์ ์ํด width๋ฅผdevice-width๋ก ์ ์ด ์ฌ์ฉ์ค์ธ ์ฅ์น์ ๋์ผํ๊ฒ ๋ทฐํฌํธ๋ฅผ ์ค์ ํ๋ ๊ฒ์ด๋ค.
- <meta name=”description” content=”ํ์ด์ง ์์ฝ๋ฌธ” />
- ์์ฝ๋ฌธ(description) ๋ฉํ ํ๊ทธ๋ฅผ ์ ์ ํ ๋ ๋ค์(name)์์ฑ์ description์ด๋ผ๊ณ ์ ์ํ๊ณ ๋ด์ฉ(content) ์์ฑ์ ์น ํ์ด์ง๋ฅผ ์์ฝํ ๋ด์ฉ์ ์ ๋๋ค.
๐robots.txt๋?
์น์ฌ์ดํธ์์ ํฌ๋กค๋งํ๋ฉฐ ์ ๋ณด๋ฅผ ์์งํ๋ ๊ฒ์์์ง ํฌ๋กค๋ฌ(๋๋ ๊ฒ์ ๋ก๋ด)๊ฐ ์ก์ธ์ค ํ๊ฑฐ๋ ์ ๋ณด์์ง์ ํด๋ ๋๋ ํ์ด์ง๊ฐ ๋ฌด์์ธ์ง, ํด์๋ ์ ๋๋ ํ์ด์ง๊ฐ ๋ฌด์์ธ์ง ์๋ ค์ฃผ๋ ์ญํ ์ ํ๋ ํ ์คํธ ํ์ผ์ด๋ค.
์ฌ์ฉ ๋ชฉ์ : robots.txt ํ์ผ์ ๊ฒ์์์ง ํฌ๋กค๋ฌ๊ฐ ์น์ฌ์ดํธ์ ์ ์ํ์ฌ ์ ๋ณด ์์ง์ ํ๋ฉฐ ๋ณด๋ด๋ ์์ฒญ(request)์ผ๋ก ์ธํด ์ฌ์ดํธ ๊ณผ๋ถํ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.
robots.txt๋ ์น์ฌ์ดํธ์ ์ต์์ ๊ฒฝ๋ก(=๋ฃจํธ)์ ์์ด์ผ ํ๋ค. ์ฆ, ์ฌ์ดํธ๋ฅผ ์น๊ณ ์ฌ๋์ ํ ๋ฐ๋ก robots.txt๋ฅผ ๋ฃ์ผ๋ฉด ๋ณผ ์ ์๋ค๋ ๊ฒ์ด๋ค. ex) https://…/robots.txt
'FE > ์ฝ๋ฉ์ผ๊ธฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๐ณ7์8์ผ TIL๐ถ (0) | 2024.07.09 |
---|---|
๐ณ7์5์ผ TIL๐ถ (1) | 2024.07.05 |
๐ณ7์4์ผ TIL๐ถ (0) | 2024.07.05 |
๐ณ7์3์ผ TIL๐ถ (0) | 2024.07.03 |
๐ณ7์2์ผ TIL๐ถ (0) | 2024.07.03 |