๋ณธ ๊ฒ์๊ธ์ PC๋ฒ์ ์ ์ต์ ํ ๋์ด์์ผ๋ฉฐ ํจ์คํธ์บ ํผ์ค ์ํฌํฐ์ฆ 3๊ธฐ๋ก ํ๋ํ๋ฉฐ
"ํ ๋ฒ์ ๋๋ด๋ Node.js ์น ํ๋ก๊ทธ๋๋ฐ ์ด๊ฒฉ์ฐจ ํจํค์ง Online"์ ๋ฌด๋ฃ๋ก ํ์ฐฌ๋ฐ์ ์์ฑํ ๊ฒ์๊ธ์ ๋๋ค.
NODEJS๊ฐ์ NODEJS๊ฐ์ NODEJS๊ฐ์ NODEJS๊ฐ์ NODEJS๊ฐ์
์์์ ๋ณด์ด๋ ์์ด์ฝ๋ค ๋ค๋ค ๋ฌด์์ธ์ง ๋ฐ๋ก ์ ๊ฒ์ด๋ค.
์ด๋ฌํ ์ดํ๋ค์ ํน์ง์ ์น ์ดํ๋ฆฌ์ผ์ด์ ์ด๋ผ๋ ์ ์ธ๋ฐ
์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์ฐ๋ฆฌ๊ฐ ๊ธฐ์กด๊น์ง ์๊ณ ์๋ ์น์ฌ์ดํธ์๋ ์ด์ง ๋ค๋ฅด๋ค.
์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์ํํธ์จ์ด ๊ณตํ์ ๊ด์ ์์ ์ธํฐ๋ท์ด๋ ์ธํธ๋ผ๋ท์ ํตํด ์น ๋ธ๋ผ์ฐ์ ์์ ์ด์ฉํ ์ ์๋ ์์ฉ ์ํํธ์จ์ด๋ฅผ ๋งํ๋ค.
๊ณผ๊ฑฐ์ ์นํ์ด์ง์ ๊ฒฝ์ฐ MVC์ ํํ๋ฅผ ์ง๋๊ณ ์์๋ค.
Model - ๋ฐ์ดํฐ์ ๋น์ฆ๋์ค ๋ก์ง์ ๊ด๋ฆฌํ๋ค.
View - ๋ ์ด์์๊ณผ ํ๋ฉด์ ์ฒ๋ฆฌํ๋ค.
Controller - ๋ช ๋ น์ ๋ชจ๋ธ๊ณผ ๋ทฐ ๋ถ๋ถ์ผ๋ก ๋ผ์ฐํ ํ๋ค.
์ด๋ฌํ ํน์ง๋ค์ ๊ฐ์ง๊ณ ์๋๋ฐ MVC๋ ๋ชจ๋ธ๊ณผ ๋ทฐ์ ์์กด์ฑ ๋๋ฌธ์ ๋ชจ๋ธ์์ ๊ฐ์ด ๋ฐ๋๋ฉด ๋ทฐ์์๋ ๋ฐ๋๊ฒ ๋๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์ ํ์ด์ค๋ถ์์ ๋ฆฌ์กํธ๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ๋ฐํ๊ฒ ๋๋ค.
์ปดํฌ๋ํธ ํํ๋ก ๊ตฌํํ๊ณ ๊ด๋ฆฌํ๋ฉด์ ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ๋ค๋ ๊ฒ
ํ๋ฒ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํด๋ณด์.
์ฌ์ค ์ค์ ์ฝ๋ฉ ๊ณผ๋ชฉ์์ ๋ฆฌ์กํธ๋ฅผ ์ ํด๋ด์ ์ด๋์ ๋์ ๊ฐ๋ ์ ์๊ณ ์๋ ์ํ์๋ค.
import React from "react"; ๋ฅผ ํตํ์ฌ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๋ง ์๊ณ ์์๋๋ฐ ๊ฐ์ฌ๋์ CDN์ ํตํด ๋ฆฌ์กํธ๋ฅผ importํ์๋ค.
// import React from 'react';
// import ReactDom from 'react-dom';
// ํจ์ํ ์ปดํฌ๋ํธ
function helloWorldButton() {
// ๋น๊ตฌ์กฐํ ํ ๋น
const [isClick, setClickState] = React.useState(false); // ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ์ค์ ํ๋ ๋ฉ์๋
const text = isClick ? "Bye world!" : "Hello world!";
return React.createElement("button", {
onClick: () => setClickState(!isClick)
}, text);
}
const rootContainer = document.getElementById("react-root");
ReactDOM.render(React.createElement(helloWorldButton), rootContainer);์ฐ์ index.js์ด๋ค.
์ปดํฌ๋ํธ์๋ ํจ์ํ ์ปดํฌ๋ํธ์ ํด๋์คํ ์ปดํฌ๋ํธ๊ฐ ์๋๋ฐ ํจ์ํ ์ปดํฌ๋ํธ๊ฐ ์ต์ ํ๋ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ํ์ จ๋ค.
ํด๋์คํ ์ปดํฌ๋ํธ๋ ๋ฆฌ์กํธ ๊ณต์ ํํ์ด์ง์์ ํ์ธ ๊ฐ๋ฅํ๋ค.
React – ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ
A JavaScript library for building user interfaces
ko.reactjs.org
<html>
<body>
<div id="react-root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>์ด๊ฑด index.html์ด๋ค.
index.js๋ฅผ ์คํํ๋ค๊ณ ๋ณด๋ฉด ๋๋ค.
์์ ์ฝ๋๋ฅผ ์คํํ๋ฉด ํน์ element๋ง ๋ณํํ๋ ๊ฑธ ๋ณผ ์ ์๋๋ฐ ์๋ ์ฌ์ง์ ๋ณด์
์ด๊ฒ ๋ฐ๋ก ๋ฆฌ์กํธ์ ์ฅ์ ์ด๋ค. ๊ธฐ์กด ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํ๋ฉด์ ๋ ๋๋ง์ ์ต์ํํ๋ ๊ฒ์ด๋ค. ์ค์ ๋ก ์์์ ์ธ๊ธํ ์ฌ๋ฌ ์น ์ดํ๋ฆฌ์ผ์ด์ ๋ค์ ๋ณด๋ฉด ํน์ ๊ธฐ๋ฅ์ ์ํํด๋ ํ๋ฉด์ด ๊น๋นก๊ฑฐ๋ฆฌ์ง ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ค๋์ ๋ฆฌ์กํธ์ ๋ํด ์ฝ๊ฐ ๋ง์ ๋ดค๋ค. ํ์คํ ์ ์ ํ๋ค. ์ฒ์ ์ ํ์ง๋ ์๊ณ ๋ฆฌ์กํธ, ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ์ค์ ์ฝ๋ฉ ๋ ์ ํ์ง๋ผ ์ต์ํ๋ฐ๋ ๊ทธ๋ฅ ์ ์ ํ๋ค. 17์ผ์ ์ข ๊ฐ์ ํ์ง๋ง DB๊ณผ์ ๋๋ฌธ์ ์๊ฐ์ด ์๋์ง๋ผ ์ ๋๋ก ์๊ฐ์ ๋ชปํ์ง๋ง ๋ด์ฃผ๋ถํฐ๋ ์์ผ์ ๋๋ ์ ์ด์ฌํ ๋ค์ด๋ณผ ์๊ฐ์ด๋ค. ์ค๋๋ถํฐ ์ธํด๋ ํ๊ณ ์์ด์ ๋ฐ์์ง๋ง ์ฌ๋ฏธ์์ผ๋๊น ์ถฉ๋ถํ ๋ณํํ ์ ์๋ค๊ณ ๋ณธ๋ค. js์ ๋ํด ์ด๋์ ๋ ์์ผ๋ฅผ ๊ฐ์ง๊ณ ์๋ค๋ฉด ํฅ๋ฏธ๋กญ๊ฒ ๋ค์ ์ ์๋ ๊ฐ์๋ผ๊ณ ์๊ฐํ๋ค.
"ํ ๋ฒ์ ๋๋ด๋ Node.js ์น ํ๋ก๊ทธ๋๋ฐ ์ด๊ฒฉ์ฐจ ํจํค์ง Online"์ ๋ฌด๋ฃ๋ก ํ์ฐฌ๋ฐ์ ์์ฑํ ๊ฒ์๊ธ์ ๋๋ค.
๋
ธ๋JS ๋
ธ๋JS ๋
ธ๋JS ๋
ธ๋JS ๋
ธ๋JS
ํ ๋ฒ์ ๋๋ด๋ Node.js ์น ํ๋ก๊ทธ๋๋ฐ ์ด๊ฒฉ์ฐจ ํจํค์ง Online | ํจ์คํธ์บ ํผ์ค
12๊ฐ์ง ํ๋ก์ ํธ๋ก ๋ฐฐ์ฐ๋ Node.js! ๋ธ๋ผ์ธ๋ ์ฑ ํด๋ก ์ฝ๋ฉ, MBTI ํ ์คํธ ์ฌ์ดํธ, ํด์ฆ ์ฌ์ดํธ, ๋ธ๋ฐ์น ์น ํฌ๋กค๋ฌ ๋ฑ ์ ์ ๋ค์ด ์ข์ํ๋ ์ฌ์ดํธ๋ฅผ ๋ด ์์ผ๋ก ์ง์ ๋ง๋ค์ด ๋ณผ ์ ์์ด์! ํ๋ก ํธ์๋+๋ฐฑ
fastcampus.co.kr
