โ๏ธ (36) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ React ๊ณต๋ถํ๊ธฐ(2) - styled-components ๐ ๋ฒจ๋กํผํธ์ ํจ๊ปํ๋ ๋ชจ๋ ๋ฆฌ์กํธ CSS in JS $ yarn add styled-components import styled from 'styled-components' [polished์ ์คํ์ผ ๊ด๋ จ ์ ํธ ํจ์ ์ฌ์ฉํ๊ธฐ] lighten() darken() $ yarn add polished import { darken, lighten } from 'polished'; import React from 'react'; import styled from 'styled-components'; import { darken, lighten } from 'polished'; const StyledButton = styled.button` /* ๊ณตํต ์คํ์ผ */ display: inline-flex; outli.. React ๊ณต๋ถํ๊ธฐ(1) - Hooks ์ข ๋ฅํธ ๐น ๋ฒจ๋กํผํธ์ ํจ๊ปํ๋ ๋ชจ๋ ๋ฆฌ์กํธ ~ for ์ฑ๋ฅ ์ต์ ํ ~ useMemo : ์ฐ์ฐํ ๊ฐ ์ฌ์ฌ์ฉ useCallback : ํจ์ ์ฌ์ฌ์ฉ React.memo : ์ปดํฌ๋ํธ ๋ฆฌ๋ ๋๋ง ๋ฐฉ์ง 7. useState๋ฅผ ํตํด ์ปดํฌ๋ํธ์์ ๋ฐ๋๋ ๊ฐ ๊ด๋ฆฌํ๊ธฐ import React, { useState } from 'react'; const [number, setNumber] = useState(0); ์ํ์ ๊ธฐ๋ณธ๊ฐ์ ํ๋ผ๋ฏธํฐ๋ก ๋ฃ์ด์ ํธ์ถ ํธ์ถํ๋ฉด ๋ฐฐ์ด์ด ๋ฐํ, ์ฒซ๋ฒ์งธ ์์๋ ํ์ฌ ์ํ, ๋๋ฒ์งธ ์์๋ Setter ํจ์ 11. useRef๋ก ํน์ DOM ์ ํํ๊ธฐ import React, { useRef } from 'react'; const nameInput = useRef(); ... nameInput.current.. React ๊ณต๋ถํ๊ธฐ(1) - ์ํ๊ด๋ฆฌ ไธญ ๋ฐฐ์ดํธ ๐ฅ ๋ฒจ๋กํผํธ์ ํจ๊ปํ๋ ๋ชจ๋ ๋ฆฌ์กํธ ๋ถ๋ณ์ฑ !!!! push, splice XXX concat, filter, map OOO 11. ๋ฐฐ์ด ๋ ๋๋งํ๊ธฐ map() : ๋ฐฐ์ด์์ ์๋ ๊ฐ ์์๋ฅผ ๋ณํํ์ฌ ์๋ก์ด ๋ฐฐ์ด์ ๋ง๋ค์ด ์ค ๊ฐ ์์๋ค๋ง๋ค ๊ณ ์ ํ key ๊ฐ์ ์ค์ ํด์ค์ผ ๋จ => ๊ทธ๋์ผ์ง, ์์ ๋์ง ์๋ ๊ธฐ์กด๊ฐ์ ๊ทธ๋๋ก ๋๊ณ ์ํ๋ ๊ณณ์ ๋ด์ฉ์ ์ฝ์ ํ๊ณ ์ญ์ ํจ import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.c.. React ๊ณต๋ถํ๊ธฐ(1) - ์ํ๊ด๋ฆฌํธ ๐ ๋ฒจ๋กํผํธ์ ํจ๊ปํ๋ ๋ชจ๋ ๋ฆฌ์กํธ ์๋์ ๊ธฐ๋ฅ๋ค์ ๋ชจ๋ React Hooks์ค ํ๋ on์ด๋ฒคํธ์ด๋ฆ={์คํํ๊ณ ์ถ์ํจ์} 7. useState๋ฅผ ํตํด ์ปดํฌ๋ํธ์์ ๋ฐ๋๋ ๊ฐ ๊ด๋ฆฌํ๊ธฐ import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; (์์ธํ ๋ณด๊ธฐ) ์ด๋ ๊ฒ ํ๋ฉด, ๋ ๋๋ง๋๋ ์์ ์์ ํจ์๊ฐ ํธ์ถ๋๋ฒ๋ฆผ.. React ๊ณต๋ถํ๊ธฐ(1) - ๊ธฐ๋ณธํธ ๐ ๋ฒจ๋กํผํธ์ ํจ๊ปํ๋ ๋ชจ๋ ๋ฆฌ์กํธ 01. ๋ฆฌ์กํธ๋ ์ด์ฉ๋ค ๋ง๋ค์ด์ก์๊น? Javascript๋ ์ด๋ค ์ํ๊ฐ ๋ฐ๋๋ฉด, ๊ทธ ์ํ์ ์ฐ๊ฒฐ๋(getElementById) DOM์ ๋ณ๊ฒฝ! React๋ ์ด๋ค ์ํ๊ฐ ๋ฐ๋๋ฉด, ์์ ์ ๋ถ ๋ค ๋ ๋ ค๋ฒ๋ฆฌ๊ณ ์๋ก์ด DOM์ ๋ณด์ฌ์ค! => ์ด๋ป๊ฒ ์ ๋ฐ์ดํธ ํด์ผ๋์ง.. ๊ณ ๋ฏผํ ํ์ ์์ด์ง ๊ฐ๋ฐ์ด ์ฌ์ด์ก๋ค => ๊ทผ๋ฐ ๋๋ฆฌ์ง ์์? => virtual DOM์ ์ฌ์ฉํด์ ๋ณ๊ฒฝ์ด ๋ ๋ถ๋ถ๊ณผ ์ ๋ ๋ถ๋ถ์ ๋น๊ตํด์ ๋ณ๊ฒฝ๋ ๊ฒ๋ง ์ค์ DOM์ ์ ์ฉ => ๊ทธ๋์ ๊ฒฐ๋ก ์ ๋น ๋ฅด๋ค! 02. ์์ ํ๊ฒฝ ์ค๋น Node.js : for Webpack, Babel Yarn : npm(node.js package manager) ์์๋ฒ์ ์ฝ๋ ์๋ํฐ : VSC Git bash Webpack : ์ฌ๋ฌ๊ฐ์ง ํ.. [JavaScript] HTML์ JS ์ฐ๊ฒฐํ๋ ๋ฐฉ๋ฒ ๋น๊ต / async VS defer ์ฐจ์ด์ ๐ฝ HTML ํ์ฑ์ ๋ํด์๋ ์๋ ํฌ์คํธ๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์ ๐ฝ[HTTP] ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ ๐ Browser Rendering(๋ธ๋ผ์ฐ์ ๋ ๋๋ง)์ด๋? ์ฌ์ฉ์์ ์์ฒญ์ ์๋ฒ์ ์ ๋ฌํ๊ณ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ํ๋ฉด์ ๋ํ๋ด๋ ๊ณผ์ ์ ์๋ฏธํ๋ค. ๐ Parsing(ํ์ฑ)์ด๋? ๋ธ๋ผ์ฐ์ ๊ฐ ์ฝ๋๋ฅผ ์ดํดํ๊ณ ์ฌ์ฉํ ์ ์๋ devjindev.tistory.com 1. head ์์ ๋ถ๋ฌ์ค๋ ๊ฒฝ์ฐ โญโโโ 123456789 ... ... cs JS๋ฅผ ๋ถ๋ฌ์ค๋ ๋์ HTML ํ์ฑ์ ๋ฉ์ถ๊ณ , JS ๋ค ๋ถ๋ฌ์ค๋ฉด ๋๋จธ์ง ํ์ฑ์ ์งํํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์์๊ฒ ํ์ด์ง๊ฐ ๋ณด์ฌ์ง๋ ์๊ฐ์ด ๋๋ ์ด๋๋ค. 2. body ์(๋งจ ๋)์ ๋ถ๋ฌ์ค๋ ๊ฒฝ์ฐ โญโญโโ 123456789 ... ... cs ๋จผ์ HTML์ ๋ชจ๋ ํ์ฑํ์ฌ ์ฌ์ฉ์์๊ฒ ํ์ด์ง๊ฐ ๋ณด์ฌ์ง ํ,.. [JavaScript / ES6] ES6 ๋ฌธ๋ฒ ์ ๋ฆฌ ๐ const, let ๐ var VS const, let var์ ํจ์ ์ค์ฝํ์ด๋ค. const, let์ ๋ธ๋ก ์ค์ฝํ์ด๋ค. ๋ฐ๋ผ์ {๋ธ๋ก} ๋ฐ์์ ๋ณ์์ ์ ๊ทผํ ์ ์๋ค. ๐ const VS let let์ ๋ณ์์ ์ฌํ ๋น์ด ๊ฐ๋ฅํ๋ค. ๋ฐ๋ผ์ ๋ค๋ฅธ ๊ฐ์ ๋์ ํด์ผ ํ๋ ์ํฉ์ด ์๊ฒผ์ ๋ ์ฌ์ฉํ๋ค. const๋ ๋ณ์์ ํ ๋ฒ ๋์ ํ๋ฉด ๋ค๋ฅธ ๊ฐ์ ๋์ ํ ์ ์๋ค. ๋ณดํต ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ์ฉํ๋ค. ๐ ํ ํ๋ฆฟ ๋ฌธ์์ด 1 2 3 4 5 6 7 const num1 = 1; const num2 = 2; const result = 3; const string1 = num1 + '+' + num2 + '=' + result; // ๊ธฐ์กด ๋ฐฉ์ const string2 = `${num1}+${num2}=${result}` // E.. [JavaScript] ์๋ฃํ (Data Type) / ์ข ๋ฅ, ํ๋ณํ, typeof ๐ ์๋ฃํ(Data Type) ์ข ๋ฅ ์ซ์ํ (Number) : 10์ง์, 16์ง์, ์ค์ ๋ชจ๋ ํด๋น ๋ฌธ์ํ (String) ๋ ผ๋ฆฌํ (Boolean) : true(์ฐธ) / false(๊ฑฐ์ง) undefined : ๋ฏธ์ ์๋ ์๋ฃํ null : ์๋ฌด๊ฒ๋ ์ฐธ์กฐํ์ง ์์ ์๋ฃํ ๐ undefined VS null ์ฐจ์ด์ ๊ณตํต์ : "๊ฐ์ด ์๋ค." undefined ๋ฐ์ดํฐ ํ์ ์ด๊ธฐํ ๋์ง ์์ ๊ธฐ๋ณธ ์ด๊ธฐ๊ฐ ์ํ ex) var data1; null ์ค๋ธ์ ํธ(๊ฐ์ฒด) ํ์ ๊ฐ์ฒด๋ฅผ ๋ด๊ธฐ์ํ ๋ณ์๋ฅผ ์ด๊ธฐํ ํ๋ ์ํ ex) var data = null; (๐คทโ๏ธ) undefined ๋ณด๋ค null ๋์ ๋ณ์๊ฐ ๋ ํฐ ๋ฒ์์ธ ๋๋ ๐ ์๋ฃํ ํ์ธํ๊ธฐ typeof(๋ณ์); ๐ ์๋ฃํ ํ๋ณํ ๋ฌธ์ํ -> ์ซ์ํ Number(๋ณ์.. ์ด์ 1 2 3 4 5 ๋ค์