๋ชฉ๋ก2022/02 (81)
whatisthis?
Node. Node JS ์๋ฒ ์์ฑํ๊ธฐ ์ฐ์ server.js ํ์ผ์ ๋ง๋ค๊ณ , ์๋ ์ฝ๋๋ฅผ ์์ฑํจ. server.js const http = require('http'); // ์๋ฒ๋ฅผ ๋ง๋๋ ๋ชจ๋ ๋ถ๋ฌ์ด // http ๋ชจ๋ ๋ด์ createServer ๋ฉ์๋ http.createServer((request, response) =>.. mywebproject.tistory.com ์ง๋ ํฌ์คํ ์์ server.js๋ฅผ ์์ฑ ํ cmd์ฐฝ์์ node server.js๊น์ง ์งํํ์๋ค. server.js const http = require('http'); // ์๋ฒ๋ฅผ ๋ง๋๋ ๋ชจ๋ ๋ถ๋ฌ์ด // http ๋ชจ๋ ๋ด์ createServer ๋ฉ์๋ http.createServer((request, response) =>..
์ฐ์ server.js ํ์ผ์ ๋ง๋ค๊ณ , ์๋ ์ฝ๋๋ฅผ ์์ฑํจ. server.js const http = require('http'); // ์๋ฒ๋ฅผ ๋ง๋๋ ๋ชจ๋ ๋ถ๋ฌ์ด // http ๋ชจ๋ ๋ด์ createServer ๋ฉ์๋ http.createServer((request, response) => { // ์๋ฒ ๋ง๋๋ createServer ๋ฉ์๋ console.log('server start!'); }).listen(8080); // 8080ํฌํธ์ ์ฐ๊ฒฐ(listen) Node.js๋ ๋ชจ๋ ์์คํ ์ ๊ตฌ์ถํ๊ณ ์์ต๋๋ค. ** ๋ชจ๋ = ํ์ํ ๊ฒ๋ง ๋ถ๋ฌ์ค๋ ๊ฒ http ์๋ฒ๊ฐ ํ์ํ๋ http ๋ชจ๋์ require ๋ฉ์๋๋ฅผ ํตํด์ ๋ถ๋ฌ์ http ๋ณ์์ ์ ์ฅํ์์ต๋๋ค. ์ ์๊ฐ์ ๋งํ๋ npm์ ํจํค์ง๊ฐ ์ด์ ๋น..
Node.js๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ธ๋ผ์ฐ์ ์ธ์ ๋ค๋ฅธ ํ๊ฒฝ์์๋ ์ฌ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ๋ฐํ์์ ๋๋ค. http์๋ฒ๊ฐ ๋ด์ฅ๋์ด ์๊ธฐ ๋๋ฌธ์ ๋ณดํต์ ์๋ฒ๋ก ๋ง์ด ์ฌ์ฉํฉ๋๋ค. ํ์ง๋ง ์์ฉ ํ๋ก๊ทธ๋จ์ ์คํํ๋ ๋ฐ ์ธ ์๋ ์์ต๋๋ค. ์นํฉ, ๋ฐ๋ฒจ๊ณผ ๊ฐ์ ๋๊ตฌ๋ค๊ณผ ์ผ๋ ํธ๋ก ๊ฐ์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฐ์คํฌํ ํ๋ก๊ทธ๋จ์ ๋ง๋๋ ํ๋ ์์ํฌ๊ฐ ๋ชจ๋ Node.js๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์๊ฐ๋๋ค. ํํ๋ค ์๊ฐํ๊ธฐ๋ก๋ ์๋ฒ๊ฐ ์์ฒญ ๋ณต์กํ๋ค๊ณ ์๊ฐํ์ง๋ง, Node.js์์๋ 10์ค๋ ์ ๋๋ ์ฝ๋๋ก ์๋ฒ๋ฅผ ๊ตฌ๋ํ ์ ์์ต๋๋ค. +) ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์, ๋ค๋ฅธ ์๋ฒ ์ธ์ด๋ฅผ ๋ฐฐ์ฐ์ง ์์๋ ๋ผ์ ๋ถ๋ด์ด ํจ์ฌ ๋ํฉ๋๋ค. ์ด์ฐจํผ ํด๋ผ์ด์ธํธ(์น ๋ธ๋ผ์ฐ์ ) ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ธ ์ ๋ฐ์ ์์ต๋๋ค. ๊ทธ๋ฐ๋ฐ ์๋ฒ ์ธ์ด๋ JSP๋ PHP, A..
PropTypes ๋ง์ฝ, ์ฐ๋ฆฌ๊ฐ fontSize์ ํด๋นํ๋ prop์ ๊ฐ์ number๋ก ์ฃผ์ง ์๊ณ text๋ก ์ฃผ๋ฉด ์ด๋ป๊ฒ ๋ ๊น? return ( ); function Btn({ text, fontSize }) { return ( {text} ); } React๋ ์ด๊ฒ์ ์ค๋ฅ๋ผ๊ณ ์๋ ค์ฃผ์ง ์๋๋ค. ์๋๋ฉด ๋ฌธ๋ฒ์ ์ผ๋ก๋ ํ๋ฆฐ ๊ฒ์ด ์์ผ๋ฏ๋ก. ๋ฐ๋ผ์, ์ฐ๋ฆฌ๋ propTyes๋ผ๋ ํจํค์ง๋ฅผ ๋ค์ด๋ฐ์์ ์ฌ์ฉํ ์ ์๋ค. propTyes๋ ์ปดํฌ๋ํธ๋ช .propTypes๋ผ๊ณ ํ์ฌ ๊ฐ์ฒด์ ํ์์ผ๋ก ์ปดํฌ๋ํธ์ prop๋ณ๋ก ํ์ ์ ์ง์ ํด์ค ์ ์๋ค. ์๋ฅผ ๋ค๋ฉด, Btn ์ปดํฌ๋ํธ์ text ์์ฑ์ string์ผ๋ก, fontSize ์์ฑ์ number๋ก ์ค์ ํด์ค๋ค. Btn.propTypes = { text: PropTypes.s..
React. React Js - props props๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ props = ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก๋ถํฐ ์์ ์ปดํฌ๋ํธ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๋ฐฉ์. (๋ถ๋ชจ->์์) ๋ถ๋ชจ์ props๋ฅผ ์ฌ์ฉํ๋ฉด ์์ ์ปดํฌ๋ํธ(ํจ์)์ ์ธ์๋ก props ๊ฐ์ฒด๊ฐ ๋ค์ด๊ฐ๊ฒ ๋จ mywebproject.tistory.com ์ง๋ ํฌ์คํ ์ธ props์ ์์ ๋ฅผ ์ด์ด์ ์งํํจ. ์ง๋์๊ฐ์ ํ๋ ๊ฒ์ ๋ณต์ตํด๋ณด์. Btn ์ปดํฌ๋ํธ๋ฅผ ์ค์ ํ๋ App ์ปดํฌ๋ํธ์์ return ( ); ์์ ๊ฐ์ด text๋ผ๋ property๋ฅผ ์ฃผ๊ณ , (text ๋์ banana๋ผ๊ณ ์ด๋ฆ ๋ถ์ฌ๋ ok. ์ด๋ฆ์ ์๊ด X) function Btn({text}) { return ( {text} ); } Btn ์ปดํฌ๋ํธ์์ props๋ผ๋ ํ๋ผ๋ฏธํฐ(=๊ฐ์ฒด์) ์ text๋ฅผ..
props๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ props = ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก๋ถํฐ ์์ ์ปดํฌ๋ํธ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๋ฐฉ์. (๋ถ๋ชจ->์์) ๋ถ๋ชจ์ props๋ฅผ ์ฌ์ฉํ๋ฉด ์์ ์ปดํฌ๋ํธ(ํจ์)์ ์ธ์๋ก props ๊ฐ์ฒด๊ฐ ๋ค์ด๊ฐ๊ฒ ๋จ. >> ํ๋์ ๋ฒํผ์ ๋ง๋ค์ด์ props๋ฅผ ์ด์ฉํด ๋ฒํผ์ ์คํ์ผ์ ๊ด๋ฆฌํด์ ์ฌ์ฌ์ฉ ํ ์ ์๊ฒ๋จ. - ์> ์ฐ๋ฆฌ๊ฐ ๋ฒํผ์ ๋๊ฐ๋ฅผ ๋ง๋๋๋ฐ, ๋์์ธ(์ฆ, style์์ฑ)์ ๊ฐ๊ฒ ํ๊ณ ์์ ํ ์คํธ๋ง ๋ค๋ฅด๊ฒ ํ๊ณ ์ถ์ ๋๋ 1 / ์ฐ์ Btn์ด๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ ๋ค. function Btn() { return ( ); } 2 / Btn ์ปดํฌ๋ํธ๋ฅผ ์ค์ ํ App์ปดํฌ๋ํธ๋ฅผ ๋ง๋ ๋ค. function App() { return ( ); } ์ฐ์ ์ Btn ์์ ํ ์คํธ๋ฅผ ๋ค๋ฅด๊ฒ ์ค์ ํด์ผํ๋ฏ๋ก Save Changes..
React. React JS - Unit Converter (CSS์ถ๊ฐ) Unit Converter (์์ ) React) React JS - practice. ๋จ์๋ณํ๊ธฐ (Unit Conversion) React JS ๊ธฐ์ด ์์ ์ค์ต - ๋จ์ ๋ณํ๊ธฐ (Unit Conversion) ๋ถ(M) - ์๊ฐ(H) M = H * 60 H = M / 60 function App() { retu.. mywebproject.tistory.com - km์์ mile๋จ์ ๋ณํ๊ธฐ ๊ธฐ๋ฅ ์ถ๊ฐ - select๋ฉ๋ด ํฌํจํ๋ App ์ปดํฌ๋ํธ - css ๋ณ๊ฒฝ converter.html style.css * { margin: 0; box-sizing: border-box; font-family: -apple-system, BlinkM..
Unit Converter (์์ ) React) React JS - practice. ๋จ์๋ณํ๊ธฐ (Unit Conversion) React JS ๊ธฐ์ด ์์ ์ค์ต - ๋จ์ ๋ณํ๊ธฐ (Unit Conversion) ๋ถ(M) - ์๊ฐ(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } โโ ์ฃผ์ ์ฐ๋ฆฌ๋ jsx๋ฅผ ์ฌ์ฉ์ค์ธ ๊ฒ์ด์ง H.. mywebproject.tistory.com index.html style.css @import "./reset.css"; * { margin: 0; box-sizing: border-box; font-family: "Noto Sans KR", sans-serif; } html { ..
React JS ๊ธฐ์ด ์์ ์ค์ต - ๋จ์ ๋ณํ๊ธฐ (Unit Conversion) ๋ถ(M) - ์๊ฐ(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } โโ ์ฃผ์ ์ฐ๋ฆฌ๋ jsx๋ฅผ ์ฌ์ฉ์ค์ธ ๊ฒ์ด์ง HTML์ ์์ฑํ๋๊ฒ ์๋๋ฏ๋ก ๋ช๊ฐ์ง ์ฃผ์ํ ์ ์ด ์๋ค. ์๋ฅผ ๋ค๋ฉด ์ ๊ฒฝ์ฐ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ for์ด๋ผ๋ ์์ฝ์ด๊ฐ ์ด๋ฏธ ์กด์ฌํ๋ฏ๋ก ์๋ฌ๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค. BUT > ์ฐ๋ฆฌ๊ฐ ์ง๊ธ importํ reactํ์ผ์ production์ฉ์ด๋ผ ์๋ฌ๋ ์๋ธ. ๋ง์ฝ ์ด๊ฑธ development๋ก ๋ฐ๊ฟ์ฃผ๋ฉด ์๋ฌ๊ฐ ๋ฐ๋ก ๋ฐ์ํจ. class๋ ๋ง์ฐฌ๊ฐ์ง.(js์ ์ด๋ฏธ class๊ฐ ์กด์ฌํ๊ธฐ๋๋ฌธ.) >> ๋ฐ๋ผ์ className=""์ผ๋ก ์..
์ง๋ ํฌ์คํ ์ ์์ ๋ฅผ ์ด์ด์ ์งํํจ. ๐ป React. React Js - setState React. React Js - state (์ํ) / ์์ React) React Js ์ ๋ฌธ - (ไธ) JSX React) React Js ์ ๋ฌธ - (ไธญ) Events in React React) React Js ์ ๋ฌธ - (ไธ) React.js ๋ interActive ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ฒ ํด.. mywebproject.tistory.com State Functions const root = document.getElementById("root"); function App() { const data = React.useState(0); const [counter, setCounter] = data; con..