๋ชฉ๋ก2022/02 (81)
whatisthis?
React. React Js - state (์ํ) / ์์ React) React Js ์ ๋ฌธ - (ไธ) JSX React) React Js ์ ๋ฌธ - (ไธญ) Events in React React) React Js ์ ๋ฌธ - (ไธ) React.js ๋ interActive ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ฒ ํด์ค. - vanila JS๋ก๋ง ์์ฑํ ์ฝ๋๋ณด๋ค ํจ.. mywebproject.tistory.com ์ง๋ ํฌ์คํ ์ ์์ ๋ฅผ ์ด์ด์ ์งํํจ. ์ข) React ์ฌ์ฉ์ (๋ฐ๋๋ ๋ถ๋ถ๋ง ๋ฐ๋ก ๋ ๋๋ง๋จ) / ์ฐ) vanila JS ์ฌ์ฉ์ body์ h3๊ฐ ํต์ผ๋ก ๋ฐ๋ ์ ์ฌ์ง์ ๋ณด๋ฉด ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํด์ ์ฐ๋ฆฌ๋ ๋ถ๋ช ์๋ ์ฝ๋์ ๊ฐ์ด function render() { ReactDOM.render(, root); } Co..
React) React Js ์ ๋ฌธ - (ไธ) JSX React) React Js ์ ๋ฌธ - (ไธญ) Events in React React) React Js ์ ๋ฌธ - (ไธ) React.js ๋ interActive ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ฒ ํด์ค. - vanila JS๋ก๋ง ์์ฑํ ์ฝ๋๋ณด๋ค ํจ์ฌ ํจ์จ์ ์ด๊ณ , ํธ๋ฆฌํ ๊ธฐ๋ฅ ๅค **.. mywebproject.tistory.com ์ ๋ฌธํธ์ ์์ ๋ฅผ ์ด์ด์ ์งํํจ. (์ง๋ ํฌ์คํ ์ฐธ์กฐ) ์ปดํฌ๋ํธ์ state๋ฅผ ์ถ๊ฐ let count = 0; const Container = () => ( Total clicks: {count} Click me ); ์ฐ์ , count๋ณ์์ ์ ์ฅ๋ ๊ฐ์ด ์ถ๋ ฅ๋๋๋ก {count}์ ๊ฐ์ด ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ , button์ ํด๋ฆญํ์ ๋ ์นด์ดํธ..
React) React Js ์ ๋ฌธ - (ไธญ) Events in React React) React Js ์ ๋ฌธ - (ไธ) React.js ๋ interActive ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ฒ ํด์ค. - vanila JS๋ก๋ง ์์ฑํ ์ฝ๋๋ณด๋ค ํจ์ฌ ํจ์จ์ ์ด๊ณ , ํธ๋ฆฌํ ๊ธฐ๋ฅ ๅค ** ์ง์ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋์ ๋ฆฌ์กํธ๋ฅผ. mywebproject.tistory.com - ์ด์ ํฌ์คํ ์์ ์์๋ฅผ ๋ง๋ค๋๋ -const ๋ณ์๋ช = React.createElement(ํ๊ทธ๋ช , {props Obj}, content} ์ ๊ฐ์ด ์์ฑํ์๋ค. ์ด ๋ฐฉ๋ฒ์ ๊ธฐ๋ณธ์ ์ด์ง๋ง ์ด๋ ค์ด ๋ฐฉ์์ด๊ณ , ์ด๋ฒ ์๊ฐ์ ๋ ํจ์จ์ ์ด๊ณ ์ฝ๊ฒ element๋ฅผ ์์ฑํ๋ ๋ฒ์ ์์๋ณด๊ฒ ๋ค. JSX ์๊ฐ – React A JavaScript library ..
React) React Js ์ ๋ฌธ - (ไธ) React.js ๋ interActive ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ฒ ํด์ค. - vanila JS๋ก๋ง ์์ฑํ ์ฝ๋๋ณด๋ค ํจ์ฌ ํจ์จ์ ์ด๊ณ , ํธ๋ฆฌํ ๊ธฐ๋ฅ ๅค ** ์ง์ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋์ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ ์ฝ๋๋ฅผ ๋น๊ตํด mywebproject.tistory.com const root = document.getElementById("root"); const span = React.createElement("span", null, "Hello!"); const btn = React.createElement("button", null, "Click me"); ์ฌ๊ธฐ์ span๊ณผ btn์ ๋์์ root์์น์ ๋ณด๋ด๋ ค๋ฉด ๋ฐฉ๋ฒ1 / ๋ฐฐ์ด๋ก ๋ฌถ๋ฏ์ด ํจ ReactDOM.r..
React.js ๋ interActive ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ฒ ํด์ค. - vanila JS๋ก๋ง ์์ฑํ ์ฝ๋๋ณด๋ค ํจ์ฌ ํจ์จ์ ์ด๊ณ , ํธ๋ฆฌํ ๊ธฐ๋ฅ ๅค ** ์ง์ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋์ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ ์ฝ๋๋ฅผ ๋น๊ตํด๋ณด์. - vanila JS๋ง ์ฌ์ฉํด์ ๋ฒํผ์ ํด๋ฆญํ๊ณ , ํด๋ฆญํ ๋๋ง๋ค 1,2,3,4, .. ํ๊ฐ ๋จ๋๋ก ํ๋ ๊ฐ๋จํ ์ฑ์ ๋ง๋ค์. vanila.html Total clicks: 0 Click me ๊ทธ๋ฌ๋ฉด, ์ด์ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ์ ๋๋ฅผ ๋ณด๊ธฐ ์ํด ๋ฆฌ์กํธ๋ฅผ ์ค์นํ๋ ์ฝ๋๋ฅผ ๋๊ฐ ์ถ๊ฐํด์ผํ๋ค. ์๋ก์ด ํ์ผ์ธ index.html์ body ์๋์ scriptํ๊ทธ ๋์ค์ ์ถ๊ฐํ๊ณ , ์ฝ์์ฐฝ์ ์ผ์ React๋ผ๊ณ ์ณ๋ณด๋ฉด ์๋์ ๊ฐ์ด ๋ ์ผํ๋ค. ์ ์ฝ๋๋ react.js์ react-dom ๋๊ฐ์ง๋ฅผ ..
์ด ๊ธฐ์ ์ ๋ฐฐ์์ผํ๋์ง? 1 / ๋๊ฐ ์ด ๊ธฐ์ ์ ์ฌ์ฉํ๋์ง, ๊ท๋ชจ๊ฐ ์ด๋์ ๋ ๋๋์ง. 2 / ์ฌ์ฉํ๋ ์ด๋ค์๊ฒ ์ผ๋ง๋ ์ค์ํ ๊ธฐ์ ์ธ์ง. 3 / ๊ณ์ํด์ ์ฌ์ฉ ๊ฐ๋ฅํ์ง. (์ ๋ง) - ๋ฆฌ์กํธ๋ FaceBook์์ ์ฒ์ ๋ง๋ค์๊ณ , ๋ชจ๋ FaceBook ์น์ฌ์ดํธ๋ฅผ ๋ค์ ๋ง๋ค์๋ค. 4/ ํฐ ์ปค๋ฎค๋ํฐ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. - ์๋ฐ์คํฌ๋ฆฝํธ์ ์์ฃผ ๊ฐ๊น๊ธฐ ๋๋ฌธ์ ๋๋ถ๋ถ์ ์์ ์ js ์์ ์ด๋ค. >> ๋ ๋์ js ๊ฐ๋ฐ์๊ฐ ๋๊ธฐ ์ํด ๋ฐฐ์ฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. 5/ ๋ฆฌ์กํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ ์ํ๋ ํ๋ ์์ํฌ ๋ฑ์ด ์กด์ฌ. -> ์- ๋ฆฌ์กํธ native. (๋ฆฌ์กํธ JS๋ก ์๋๋ก์ด๋ or iOS ์ดํ ์ ์ ๊ฐ๋ฅ) React ์์ํ๊ธฐ - Web ๊ฐ๋ฐ ํ์ตํ๊ธฐ | MDN ์ด ๋ฌธ์์์๋ React๋ฅผ ์๊ฐํฉ๋๋ค. ์ฐ๋ฆฌ๋ React์ ๋ํ ์ฝ๊ฐ์ ๋ฐฐ๊ฒฝ..
๋ณดํธ๋์ด ์๋ ๊ธ์ ๋๋ค.
์ด๋ฒ ์์ ๋ ๋ชจ๋ฌ์ฐฝ์ ์ ์ํ๋ position ์ฐ์ต ์์ ์ด๋ค. index.html Manage Subscriptions You can follow the discussion on @kimbug without to leave a comment. Cool, huh? Just enter your email address in the form here below and you are all set. Subscribe style.css * { box-sizing: border-box; margin: 0; } body { width: 100%; height: 100vh; font-family: "Nunito Sans", sans-serif; color: #273444; background-color: #e5e5e5..
CSS - Position prac.02 CSS์ ํฌ์ง์ ์์ฑ์ผ๋ก ์๋์ ๊ฐ์ product card๋ฅผ ๋ง๋๋ ์์ ์ด๋ค. index.html ๊ทธ๋๋์บ๋ +์คํ ๋กญ+ํ์๋ฐด๋ ์์ ์ผ์ ๊น๋ฒ๊ทธํธ๋๋ธ 1์ธ 180,000์ - ์ฒ์์๋ svgํ์ผ์ imgํ๊ทธ>aํ๊ทธ๋ก ํ๋ ค๊ณ ํ๋๋ฐ ๊ทธ๋ฅ ์ด๋ค ๊ธฐ๋ฅ์ ํ ์ง ๋ชฐ๋ผ button์ผ๋ก ๋งํฌ์ ํ ํ์ css๋ก ๋ฐฑ๊ทธ๋ผ์ด๋์ด๋ฏธ์ง๋ฅผ ์ ํ๊ธฐ๋ก ํ์๋ค. style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.02em; background-color: #7d858f; } h1 { font-size: 22px; font-weight: 5..
๋ณดํธ๋์ด ์๋ ๊ธ์ ๋๋ค.