๐ | WEB DEV115 JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (31)_ ํจ์ ํ๋ผ๋ฏธํฐ (default, arguments) JS ํจ์์ ํ๋ผ๋ฏธํฐ ์ค default์ argument์ ๋ํด์ ์์๋ณด์. 1. default ํ๋ผ๋ฏธํฐ default ํ๋ผ๋ฏธํฐ ์ฆ, ๊ธฐ๋ณธ๊ฐ์ ํ๋ผ๋ฏธํฐ์ ๊ฐ์ด ์ ๋ฌ๋์ง ์์์ ๊ฒฝ์ฐ ์ด๊ธฐ๊ฐ์ ์ง์ ํด์ฃผ๋ ๊ฒ์ด๋ค. ๋จ์ ๊ฐ ๋ฟ๋ง ์๋ ๋ค์ํ ๊ฒ๋ค์ ์ง์ ํด์ค ์ ์๋ค. ์์ 1. ๋จ์๊ฐ function print(a = 1){ console.log(a); } print(); -------- 1 ์์ 2. ์ฐ์ฐ function print(a, b = a*2){ console.log(a + b); } print(1); print(1, 1); -------- 3 2 ์์ 3. ํจ์ let square = (i)=>{return i**2}; function print(a, b = square(a)){ console.l.. 2023. 8. 7. JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (30)_ Spread Operator JS์ Sperad Operator์ ๋ํด์ ์์๋ณด์. 0. Spread Operator Spread Operator๋ ์ ์ด 3๊ฐ(...)์ธ ์ฐ์ฐ์์ด๋ค. ์ด ์ฐ์ฐ์๋ฅผ ์ด์ฉํด์ ์ฌ๋ฌ ๊ณณ์ ํ์ฉ์ ํ ์ ์๋ค. ๋จผ์ ์์๋ฅผ ํตํด์ ์ฐ์ฐ์์ ๊ธฐ๋ฅ์ ๋ํด์ ์์๋ณด๋ฉด ์์ let a = [1, 2, 3]; let b = "Hello"; console.log(...a); console.log(...b); ์ด์ฒ๋ผ array ํน์ ๋ฌธ์์ด ๊ฐ์ ๊ฒ๋ค์ ํ๋์ฉ ๋ถํดํด์ค๋ค. ํ์ฉ 1. Array ๋ณํฉ & ๋ณต์ฌ ์ฒซ๋ฒ์งธ ํ์ฉ์ array๋ฅผ ํฉ์น๊ฑฐ๋ ๋ณต์ฌํ๋ ๊ฒ์ด๋ค. 1) ๋ณํฉ let a = [1, 2]; let b = [3, 4]; let c = [...a, ...b]; console.log(c); c = [...b, ...a.. 2023. 8. 6. JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (29)_ Tagged Literals ES6๋ถํฐ๋ Tagged Literals ๋ผ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. ์ด์ ๋ํด์ ์์๋ณด์. 1. Tagged Literals Tagged Literals๋ ๋ฌธ์ ํด์ฒด๋ถ์ ๊ธฐ๋ฅ์ ํจ์๋ก ๋ง๋๋ ๊ฒ์ ์ด์ผ๊ธฐํ๋ค. ์ด๋ template literals๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌํํ ์ ์๋ค. ์์ let val = "Korea"; function func(strings, values){ console.log(strings); console.log(values); } func`Welcome to ${val}!` ์์ ์์๋ฅผ ๋ณด๋ฉด func๋ผ๋ ํจ์์ ๋ฐฑํฑ( ` )์ผ๋ก ๊ฐ์ธ์ง ๋ฌธ์์ด์ ๋ถ์ธ ๊ฒ์ ๋ณผ ์ ์๋ค. ์ด๊ฒ์ด ๋ฐ๋ก tagged literals ํจ์๋ฅผ ํธ์ถํ๋ ๋ฐฉ๋ฒ์ด๋ค. tagged literals ํจ์๋ฅผ ์ดํด๋ณด๋ฉด 2๊ฐ์ ํ.. 2023. 8. 5. JS_๋ฌธ๋ฒ (๊ฐ์ธ)_ ๋ณ์ ์ด์ ๋ฆฌ JS์์ ๋ณ์๋ฅผ ๋ง๋ค ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ์ด ์กด์ฌํ๋ค. ์ด๋ค์ ์ ์ธ, ํ ๋น, ๋ฒ์์ ์ธก๋ฉด์์ ์๋ก ๋ค๋ฅธ ํน์ง์ ๊ฐ์ง๋ค! var let const ์ ์ธ ํ ๋น ๋ฒ์ var ์ฌ์ ์ธ O ์ฌํ ๋น O ํจ์ scope let ์ฌ์ ์ธ X ์ฌํ ๋น O ๋ธ๋ก scope const ์ฌ์ ์ธ X ์ฌํ ๋น X (๊ฐ์ฒด ๋ด๋ถ๋ ์๊ด์์ ) ๋ธ๋ก scope - ๋ง์ฝ ๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ์ถ๋ค๋ฉด? ๊ฐ์ฒด๋ ์ด๋ ํ ๋ฐฉ๋ฒ์ผ๋ก ์ ์ธํ์ฌ๋ ๋ด๋ถ ์์์ ๋ํ ์์ ์ ๊ฐ๋ฅํ๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๊ณ ์ถ์ ๊ฒฝ์ฐ์๋ ์๋์ ๋ฐฉ๋ฒ์ ์ด์ฉํ๋ค. Object.freeze( ์์ ๋ถ๊ฐํ๊ฒ ํ๊ณ ์ถ์ ๊ฐ์ฒด๋ช ); ์์ const a = { name : "Kassid"}; Object.freeze(a); a.name = "Hello"; console.log(a); ๋ณ์์ ํธ.. 2023. 8. 4. JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (28)_ Arrow function JS์ Arrow function์ ๋ํด์ ์์๋ณด์. 1. Arrow Function ์ด๋? ํ์ดํ ํจ์๋ ์๋์ ๊ฐ์ด ์ฌ์ฉํ๋ค. let a = ()=> { ... } a(); ๊ธฐ์กด์ function( ){ ... } ๊ณผ ๋ค๋ฅด๊ฒ =>(ํ์ดํ)๋ฅผ ์ด์ฉํ์ฌ ํจ์๋ฅผ ๋ง๋ ๋ค. 2. Arrow Function์ ์ฅ์ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ๋ฌด์์ผ๊น? ๋จผ์ ํจ์๋ฅผ ์ด๋ ํ ๊ฒฝ์ฐ์ ๋ง๋ค์ด์ ์ฌ์ฉํ๋์ง ์ดํด๋ณด๋ฉด 1. ์ฝ๋๋ค์ ๊ธฐ๋ฅ์ผ๋ก ๋ฌถ๊ณ ์ถ์ ๋ / 2. ์ ์ถ๋ ฅ ๊ธฐ๋ฅ์ ๋ง๋ค ๋ ์ฌ์ฉํ๋ค. 1) ์ ์ถ๋ ฅ ๊ธฐ๋ฅ์ ์ ํํํ๋ ๋ฌธ๋ฒ์ด๋ค. arrow function์ ํจ์์ ๊ธฐ๋ฅ ์ค ์ ์ถ๋ ฅ ๊ธฐ๋ฅ์ ์ ํํํด์ฃผ๋ ์ฅ์ ์ด ์๋ค. let func = (x, y) => { return x + y } // x, y๋ฅผ ๋ฃ์ผ๋ฉด ๋ .. 2023. 8. 2. JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (27)_ this ํค์๋ JS์ this ํค์๋์ ๋ํด์ ์์๋ณด์. (4๊ฐ์ง) 0. this ํค์๋์ ์๋ฏธ this ํค์๋๋ ๋ค์ํ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ๊ทธ ์๋ฏธ๋ ์ฌ์ฉํ๋ ์์น์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค. (์ฌ์ค ์๋์๋..?) 1-1. global์์ ์ฌ์ฉ & ์ผ๋ฐ(์ ์ญ) ํจ์์์ ์ฌ์ฉ -> window ๋จผ์ ๊ฐ์ฅ ์์ ์์น์์ this ํค์๋๋ฅผ ์ฝ์์์ ํ์ธํด๋ณด๋ฉด ์๋์ ๊ฐ๋ค. window๋ผ๋ ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค. +) window๋? - ๋ชจ๋ ์ ์ญ๋ณ์, ํจ์, DOM์ ๊ด๋ฆฌํ๋ ์ ์ญ๊ฐ์ฒด! - ์๋ฅผ๋ค์ด ์ ์ญ๋ณ์๋ฅผ ์์ฑํ๋ฉด window ์์ ์์ฑ๋๋ ๊ฒ์ด๋ค. 1-2. strict mode์ผ๋ ์ผ๋ฐ ํจ์ ์์์ ์ฌ์ฉ -> undefined 'use strict' 'use strict'๋ผ๋ ํค์๋๋ฅผ ์ต์๋จ์ ์ถ๊ฐํ๋ฉด strict ๋ชจ๋๋ก ์์ฑํ .. 2023. 8. 1. [React] 10. ๋ผ์ฐํ -2 (useNavigate, 404page, Nested Routes, Outlet) ์ด์ ๊ธ โผ ๋๋ณด๊ธฐ 0. 2023.05.05 - [๐ | WEB DEV/React] - [React] 0. React๋ฅผ ์ฌ์ฉํ๋ ์ด์ & ์ด๊ธฐ ์ธํ 1. 2023.05.07 - [๐ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ | WEB DEV/React] - [React] 2. state (๋ณ์, array, object) 2-1. 2023.05.27 - [๐ | WEB DEV/React] - [React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ) 3. 2023.05.28 - [๐ | WEB DEV/React] - [React] 3. ์ปดํฌ๋ํธ (Component) 4. 2023.05.28 - [๐ | WEB DEV/React] - .. 2023. 7. 10. [React] 9. ๋ผ์ฐํ -1 (react-router-dom์ธํ , Routes, Route, Link) ์ด์ ๊ธ โผ ๋๋ณด๊ธฐ 0. 2023.05.05 - [๐ | WEB DEV/React] - [React] 0. React๋ฅผ ์ฌ์ฉํ๋ ์ด์ & ์ด๊ธฐ ์ธํ 1. 2023.05.07 - [๐ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ | WEB DEV/React] - [React] 2. state (๋ณ์, array, object) 2-1. 2023.05.27 - [๐ | WEB DEV/React] - [React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ) 3. 2023.05.28 - [๐ | WEB DEV/React] - [React] 3. ์ปดํฌ๋ํธ (Component) 4. 2023.05.28 - [๐ | WEB DEV/React] - .. 2023. 7. 9. [React] 8. ๋ค๋ฅธ ํ์ผ์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ด์ ๊ธ โผ ๋๋ณด๊ธฐ 0. 2023.05.05 - [๐ | WEB DEV/React] - [React] 0. React๋ฅผ ์ฌ์ฉํ๋ ์ด์ & ์ด๊ธฐ ์ธํ 1. 2023.05.07 - [๐ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ | WEB DEV/React] - [React] 2. state (๋ณ์, array, object) 2-1. 2023.05.27 - [๐ | WEB DEV/React] - [React] 2-1. array state ์ ๋ ฌํ๊ธฐ ( .sort()ํ์ฉ) 3. 2023.05.28 - [๐ | WEB DEV/React] - [React] 3. ์ปดํฌ๋ํธ (Component) 4. 2023.05.28 - [๐ | WEB DEV/React] - .. 2023. 7. 6. ์ด์ 1 2 3 4 5 6 7 ยทยทยท 13 ๋ค์ ๋ฐ์ํ