๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ213

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.
[React] 7. ์ด๋ฏธ์ง€ ์‚ฝ์ž…ํ•˜๊ธฐ(css, html, publicํด๋”์—์„œ ๊ฐ€์ ธ์˜ค๊ธฐ) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 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. 3.
[React] CORS ์—๋Ÿฌ ํ•ด๊ฒฐํ•˜๊ธฐ (http-proxy-middleware) ์™ธ์ฃผ ์ž‘์—… ๋„์ค‘ api์— ์š”์ฒญ์„ ํ•  ๋•Œ CORS ์—๋Ÿฌ๋ฅผ ๋งˆ์ฃผํ•˜์˜€๋‹ค! ๋Œ€๋žต ์œ„์™€ ๊ฐ™์€ ์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋ฅผ ์ฝ˜์†”์ฐฝ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. 1. CORS (Cross Origin Resource Sharing) 1) CORS๋ž€? https://developer.mozilla.org/ko/docs/Web/HTTP/CORS/Errors CORS(๊ต์ฐจ ์ถœ์ฒ˜ ๋ฆฌ์†Œ์Šค ๊ณต์œ )๋Š” ๋‹ค๋ฅธ ์ถœ์ฒ˜ ๊ฐ„์˜ ์ž์› ๊ณต์œ ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๊ณ  http ํ—ค๋”๋ฅผ ์ด์šฉํ•˜์—ฌ ์‹คํ–‰ ์ค‘์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹ค๋ฅธ ์ถœ์ฒ˜(Origin)์˜ ์ž์›์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋„๋ก ๋ธŒ๋ผ์šฐ์ €์— ์•Œ๋ ค์ฃผ๋Š” ์ฒด์ œ์ด๋‹ค. 2) SOP (Same Origin Policy) https://developer.mozilla.org/ko/docs/Web/Security/Same-origin.. 2023. 6. 30.
[React] 6. props ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 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. 5. 29.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”