๋”ฐํŒŒ๐Ÿ•
Hwaiian Pizza IT Pub
๋”ฐํŒŒ๐Ÿ•
  • ALL (62)
    • Front-End (13)
      • HTML & CSS (2)
      • JavaScript (7)
      • React (2)
      • TypeScript (0)
      • Jquery (0)
      • Git (1)
      • Editor (0)
    • Algorithms (44)
      • Baekjoon (28)
      • Programmers (13)
      • Algorithms (3)
    • Computer Science (0)
      • Math (0)
    • Conference (1)
    • Life (3)
      • Book (0)
hELLO ยท Designed By ์ •์ƒ์šฐ.
๋”ฐํŒŒ๐Ÿ•
Front-End/React

[๋ฆฌ์•กํŠธ TIL] ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ 2022 - ์†Œ์Šค์ฝ”๋“œ ์ˆ˜์ •๋ฐฉ๋ฒ•(์ˆ˜์ •)

[๋ฆฌ์•กํŠธ TIL] ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ 2022 - ์†Œ์Šค์ฝ”๋“œ ์ˆ˜์ •๋ฐฉ๋ฒ•(์ˆ˜์ •)
Front-End/React

[๋ฆฌ์•กํŠธ TIL] ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ 2022 - ์†Œ์Šค์ฝ”๋“œ ์ˆ˜์ •๋ฐฉ๋ฒ•(์ˆ˜์ •)

2022. 6. 16. 23:59
๋ฐ˜์‘ํ˜•

 

์ด ํฌ์ŠคํŒ…์€ ๊ณต์‹ React ์ž์Šต์„œ๋ฅผ ๋ณด๊ณ  ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์–ป์€ ์ง€์‹๊ณผ ๊ฒฐ๊ณผ๋ฌผ์„ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ด๋ฏ€๋กœ

์ž์„ธํ•˜๊ณ  ํ™•์‹คํ•œ ์ •๋ณด๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ณต์‹ ์‚ฌ์ดํŠธ๋ฅผ ํ™•์ธ ๋ฐ”๋ž๋‹ˆ๋‹ค. (๐Ÿ‘‹ ๊ณต์‹ ์‚ฌ์ดํŠธ ์ตœ๊ณ )

 

 

 

 

 

 

 

๋ฆฌ์•กํŠธ ์†Œ์Šค์ฝ”๋“œ ์ˆ˜์ •๋ฐฉ๋ฒ•


 

 

๋ฆฌ์•กํŠธ๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ํƒœ๊ทธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค.

์˜ค๋Š˜ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๋А๋‚€ ์  a to z ๊ฐ€ ์•„๋‹ˆ๋ผ a ๋ž‘ z๋ฅผ ์•Œ๋ ค์ค˜์„œ ์‹ ๊ธฐํ–ˆ๋‹ค.

์„ค์น˜ํ•ด์„œ ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •๊นŒ์ง€๊ฐ€ ์•„๋‹ˆ๋ผ ์„ค์น˜! ์ˆ˜์ •! ๋ฐฐํฌ! ๋Š” ์ด๊ฑฐ๋‹ค! ๋А๋‚Œ์ด์—ˆ๋‹ค.

 

 

 

 

โœ… ์„ค์น˜ - ๐ŸŸฉ ์ˆ˜์ • - ๐ŸŸฉ ๋ฐฐํฌ

 

๊ณผ์ • ์ค‘์— ์„ค์น˜๊นŒ์ง€๋Š” ๋๋ƒˆ๋‹ค.

์ด์ œ๋Š” ์ˆ˜์ •์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณผ ์ฐจ๋ก€๋‹ค.

์ˆ˜์ •์„ ์ž˜ํ•˜๊ธฐ๋Š” ์–ด๋ ต๋‹ค ์ธ์ƒ์„ ๋ฐ”์ณ์•ผ ํ•˜๋Š” ์ผ์ด๋‹ค. < ์˜ˆ?

ํ•˜์ง€๋งŒ ์ˆ˜์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ 5๋ถ„์ด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋‹ค.

 

 

src - index.js

npm ์„ ์ด์šฉํ•ด์„œ creative react app์„ ๊ตฌ๋™์‹œํ‚ค๋ฉด index.js ํŒŒ์ผ์„ ์ฐพ๊ณ  ์ ํ˜€์žˆ๋Š” ๋Œ€๋กœ ๋™์ž‘ํ•œ๋‹ค.

 

 

 

๋งŒ์•ฝ์— vscode๋ฅผ ๊ป๋‹ค๊ฐ€ ๋‹ค์‹œ react๋ฅผ ๊ตฌ๋™์‹œํ‚ค๊ณ  ์‹ถ์œผ๋ฉด

ctrl + j๋กœ terminal์„ ์—ด๊ณ  npm start๋ฅผ ์ž…๋ ฅํ•˜๋ฉด index.js์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋ช…๋ น์–ด๊ฐ€ ํ„ฐ๋ฏธ๋„์— ๋œจ๊ณ  ์ฐฝ์ด ๋œฌ๋‹ค.

 

 

 

index.js ์ฝ”๋“œ

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App' /* src ์— ์žˆ๋Š” App.js ํŒŒ์ผ */
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

<App /> ์€ './App.js' ํŒŒ์ผ์„ ๋งํ•˜๋ฉฐ ๊ทธ ํŒŒ์ผ์„ ์ฝ๊ณ  ํ™”๋ฉด์— ๋ณด์—ฌ์ค€ ๊ฒƒ์ด๋‹ค.

 

๋งŒ์•ฝ์— App.js ์— ์žˆ๋Š” ๋‚ด์šฉ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์ˆ˜์ •ํ•˜๋ฉด ๋น™๊ธ€๋น™๊ธ€ ๋Œ์•„๊ฐ€๋˜ ๋กœ๊ณ  ํ™”๋ฉด์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฐ”๋€๋‹ค.

style์ ์šฉ์€ src - App.css์—์„œ ์˜จ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

import๋ฅผ ํ†ตํ•ด์„œ ํŒŒ์ผ๋“ค์ด ์–ด๋–ป๊ฒŒ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

 

 

 

 

 

App.js์ฝ”๋“œ

import logo from "./logo.svg";
import "./App.css";

function App() {
    return <div className = "App" > Hello React! </div>;
}

export default App;

 

 

 

๊ฐ„๋žต ์š”์•ฝ

  • index.js / index.css โžก๏ธ ์ „์—ญ์ ์ธ ์„ค์ •
  • App.js / App.css โžก๏ธ ๋‚ด์šฉ์„ ์ˆ˜์ •ํ•˜๋ฉด์„œ UI๋ฅผ ํŽธ์ง‘

 

 

 

 

์‹คํ–‰๋œ ํ™”๋ฉด์— ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์— ๋“ค์–ด๊ฐ€์„œ ๋ณด๋ฉด div class๊ฐ€ App ์ธ ๊ฒƒ์€ App.js์—์„œ ์˜จ๋‹ค.

๊ทธ๋Ÿฌ๋ฉด ๊ทธ ์ƒ๋‹จ์— ์žˆ๋Š” id๊ฐ€ root์ธ ๋†ˆ์€ ๋ญ๋ƒ?

 

 

 

 

index.js ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ๋ณด์ž

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App' /* src ์— ์žˆ๋Š” App.js ํŒŒ์ผ */
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

App ํƒœ๊ทธ๊ฐ€ id ๊ฐ’์ด root์ธ ํƒœ๊ทธ๋กœ rendering ๋˜๋ผ๋Š” ์ฝ”๋“œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

public - index.html ์— ๋“ค์–ด๊ฐ€๋ฉด id๊ฐ€ root์ธ div ํƒœ๊ทธ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋‹ค.

 

 

index.html ์ฝ”๋“œ

์ง ! ์ € root๊ฐ€ ์ด root๊ฐ€ ๋งž๋А๋ƒ? ์ธ ๊ฒƒ์„ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด style์„ ์ฃผ๊ณ  ํ™•์ธํ•ด๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋‹ค.

์•„๋ž˜์— ๋ณด์ด๋Š” ๊ฑฐ์ฒ˜๋Ÿผ ๋นจ๊ฐ„์ƒ‰ ํ…Œ๋‘๋ฆฌ๊ฐ€ ์ณ์ง€๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

 

 

 

 

 

react ํŒŒ์ผ๋“ค์ด ์–ด๋–ค ์‹์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋Š”์ง€ ์•Œ์•„๋ดค๋‹ค.

root๋ฅผ ์ˆ˜์ •ํ•˜๋ ค๋ฉด index.html๋กœ ๊ฐ€์•ผ ํ•˜๊ณ 

App.js๋Š” ์–ด๋””์— ์œ„์น˜ํ•˜๊ณ  ์žˆ๊ณ  ์–ด๋–ค css ํŒŒ์ผ๊ณผ ์—ฐ๊ฒฐ๋˜์–ด์žˆ๋Š”์ง€!

์ฒ˜์Œ์ด๋ผ ๊ทธ๋Ÿฐ์ง€ ํ—ท๊ฐˆ๋ฆฐ๋‹ค๐Ÿ™ƒ

 

์œ ์ง€๋ณด์ˆ˜๋ฅผ ์œ„ํ•ด์„œ ์ „์—ญ์ ์ธ ๊ฒƒ๊ณผ ์„ธ๋ถ€์ ์ธ ๊ฒƒ์„ ๋‚˜๋ˆˆ ๊ฑฐ ๊ฐ™๋‹ค.

์›น์„ ์ง์ ‘ ๋งŒ๋“ค๊ณ  ๋ฆฌ์•กํŠธ๋กœ ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์ณ์•ผ์ง€ ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ์ด ๋” ํ™•์‹คํ•˜๊ฒŒ ์ดํ•ด๋  ๊ฒƒ ๊ฐ™๋‹ค.

๋‹ค์Œ์—๋Š” ๋ฐฐํฌ ๊ณผ์ •๊ณผ jsx์— ๋Œ€ํ•œ ๊ฐ„๋žต ๊ฐœ๋…๋“ค์„ ์ •๋ฆฌํ•ด์„œ ํฌ์ŠคํŒ…ํ•  ์˜ˆ์ •์ด๋‹ค.

 

 

 

 

 

 

 

 

[๋ฆฌ์•กํŠธ TIL] ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ 2022 - ๊ธฐ๋ณธ๊ฐœ๋…(๋ฆฌ์•กํŠธ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ), ์‹ค์Šตํ™˜๊ฒฝ ๊ตฌ์ถ•

 

[๋ฆฌ์•กํŠธ TIL] ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ 2022 - ๊ธฐ๋ณธ๊ฐœ๋…(๋ฆฌ์•กํŠธ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ), ์‹ค์Šตํ™˜๊ฒฝ ๊ตฌ์ถ•

์ด ํฌ์ŠคํŒ…์€ ๊ณต์‹ React ์ž์Šต์„œ๋ฅผ ๋ณด๊ณ  ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์–ป์€ ์ง€์‹๊ณผ ๊ฒฐ๊ณผ๋ฌผ์„ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ด๋ฏ€๋กœ ์ž์„ธํ•˜๊ณ  ํ™•์‹คํ•œ ์ •๋ณด๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ณต์‹ ์‚ฌ์ดํŠธ๋ฅผ ํ™•์ธ ๋ฐ”๋ž๋‹ˆ๋‹ค. (๐Ÿ‘‹ ๊ณต์‹ ์‚ฌ

hawaiian-pizza-it.tistory.com

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'Front-End > React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[๋ฆฌ์•กํŠธ TIL] ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ 2022 - ๊ธฐ๋ณธ๊ฐœ๋…(๋ฆฌ์•กํŠธ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ), ์‹ค์Šตํ™˜๊ฒฝ ๊ตฌ์ถ•  (0) 2022.06.14
  • ๋ฆฌ์•กํŠธ ์†Œ์Šค์ฝ”๋“œ ์ˆ˜์ •๋ฐฉ๋ฒ•
  • index.js ์ฝ”๋“œ
  • App.js์ฝ”๋“œ
  • ๊ฐ„๋žต ์š”์•ฝ
  • index.html ์ฝ”๋“œ
'Front-End/React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [๋ฆฌ์•กํŠธ TIL] ์ƒํ™œ์ฝ”๋”ฉ ๋ฆฌ์•กํŠธ 2022 - ๊ธฐ๋ณธ๊ฐœ๋…(๋ฆฌ์•กํŠธ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ), ์‹ค์Šตํ™˜๊ฒฝ ๊ตฌ์ถ•
๋”ฐํŒŒ๐Ÿ•
๋”ฐํŒŒ๐Ÿ•
์ €์ชฝ ์†๋‹˜์ด ๋ณด๋‚ด์‹  ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค. ๋””๋ฒ„๊น… ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?๐Ÿน

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.