JavaScript

๋ฉฐ์น ์ „ ๋™๋ฃŒ์˜ ์ฝ”๋“œ๋ฅผ ๋ณด๋‹ค๊ฐ€ ๋ฐ”๋ณด๊ฐ™์€ ์งˆ๋ฌธ์„ ํ•˜๊ฒŒ๋˜์–ด ๋‹ค์‹œ ์ •๋ฆฌํ•ด๋ณด๋Š” JSON์˜ ๊ฐœ๋… ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๋ฐ”๋””๋ฅผ `JSON.stringify()`๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋ณด๋Š”๋ฐ ๊ฐ‘์ž๊ธฐ ํ—ท๊ฐˆ๋ ธ๋‹ค. stringify๋Š” ๋ง๊ทธ๋Œ€๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋ฅผ ๋ฌธ์ž์—ด๋กœ ์ง๋ ฌํ™”์‹œ์ผœ์ฃผ๋Š” ๊ฒƒ์•„๋‹ˆ๋˜๊ฐ€? ์™œ ์„œ๋ฒ„์— ์š”์ฒญ๋ณด๋‚ผ๋•Œ stringify๋ฅผ ์‹œํ‚ค๋Š”๊ฑฐ์ง€..?? ๋‚˜๋Š” .. JSON๊ณผ JavaScript์˜ object๋ฅผ ํ—ท๊ฐˆ๋ฆฌ๊ณ ์žˆ์—ˆ๋˜ ๊ฒƒ์ด์—ˆ๋‹ค.. ๐Ÿ˜ฑ ๋จผ์ € JSON์ด ๋ญ”์ง€๋ฅผ ์ •ํ™•ํžˆ ์•Œ์•„์•ผํ•œ๋‹ค. JSONJSON(JavaScript Object Notation)์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์„์ˆ˜ ์žˆ๋Š” ์ผ๋ฐ˜ ํ…์ŠคํŠธ ํฌ๋งท์„ ๋œปํ•œ๋‹ค. JavaScript์˜ ๊ฐ์ฒด ํ‘œ๊ธฐ๋ฒ•์„ ๋ณธ๋”ฐ์„œ JSON syntax๊ฐ€ ๋งŒ๋“ค์–ด์กŒ๋‹ค.JSON ํฌ๋งท์€ ํ…์ŠคํŠธ์ผ๋ฟ JavaScript์™€..
์ƒํ™ฉ1๋ฒˆ์งธ api ์š”์ฒญ ๊ฒฐ๊ณผ์— ๋”ฐ๋ผ์„œ 2๋ฒˆ์งธ api๊ฐ€ ์ฒ˜๋ฆฌ๋˜๋„๋ก ๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰์ˆœ์„œ๋ฅผ ๋ณด์žฅํ•˜๊ณ  ์‹ถ๋‹ค. 1๋ฒˆ์งธ api ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๋น„๋ฐ€๋ฒˆํ˜ธ๊ฐ€ ๊ธฐ์กด ๋น„๋ฐ€๋ฒˆํ˜ธ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธ //์‚ฌ์šฉ์ž ๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ checkCurrentPassword: builder.mutation({ query: (password: string) => ({ url: ๋น„๋ฐ€๋ฒˆํ˜ธํ™•์ธ ์š”์ฒญ ์ฃผ์†Œ, method: 'POST', headers: { 'Content-type': 'text/plain', }, body: password, }), }), 2๋ฒˆ์งธ api์‚ฌ์šฉ์ž ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๋ณ€๊ฒฝ//๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝupdatePasswordQuery: b..
ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ์ธ๋ฑ์Šค ์‹œ๊ทธ๋‹ˆ์ณ index signature ๋ฌธ๋ฒ• [key: T]: U ์–ธ์ œ ์‚ฌ์šฉ? ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ์–ด๋–ค ๊ฐ์ฒด๊ฐ€ ์—ฌ๋Ÿฌ ํ‚ค๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ์„ ๋•Œ ์‚ฌ์šฉ "์ด ๊ฐ์ฒด์—์„œ ๋ชจ๋“  T ํƒ€์ž…์˜ ํ‚ค๋Š” U ํƒ€์ž…์˜ ๊ฐ’์„ ๊ฐ–๋Š”๋‹ค"๋Š” ๊ฒƒ์„ ํ‘œํ˜„ํ•  ๋•Œ ์ธ๋ฑ์Šค ์‹œ๊ทธ๋‹ˆ์ฒ˜๋ฅผ ํ†ตํ•ด ๋ช…์‹œ์ ์œผ๋กœ ์ •์˜ํ•œ ํ‚ค ์™ธ์— ๋‹ค์–‘ํ•œ ํ‚ค๋ฅผ ๊ฐ์ฒด์— ์•ˆ์ „ํ•˜๊ฒŒ ์ถ”๊ฐ€ ๊ฐ€๋Šฅ ์ฃผ์˜ํ•  ์  ์ธ๋ฑ์Šค ์‹œ๊ทธ๋‹ˆ์ฒ˜์˜ ํ‚ค(T)๋Š” ๋ฐ˜๋“œ์‹œ number ํ˜น์€ string ํƒ€์ž…์ด์–ด์•ผ ํ•œ๋‹ค. ์™œ? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด์˜ ํ‚ค ํƒ€์ž…์€ ๋ฌธ์ž์—ด์ด๋ฏ€๋กœ string ์ด์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด number ํƒ€์ž…์€? ๋ฐฐ์—ด์€ ๊ฒฐ๊ตญ ํ‚ค ํƒ€์ž…์ด ์ˆซ์ž์ธ ๊ฐ์ฒด์˜ ์ผ์ข…์ด๋ฏ€๋กœ number ํƒ€์ž…๋„ ํ‚ค๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ์‹œ ์ฝ”๋“œ const airplaneSeating: {[seatNumber: string]: st..
๊ฐ์ฒด ํ˜•์‹์„ ๊ฐ€์ง„ ๋ฐฐ์—ด ์š”์†Œ์˜ ๊ฐ’์„ ์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋ฐฐ์—ด์˜ ๋ถˆ๋ณ€์„ฑ์„ ์ง€์ผœ์ฃผ๋Š” map() ๊ณ ์ฐจํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ์ฒด์˜ ์š”์†Œ๋ฅผ ์ˆ˜์ •ํ–ˆ๋Š”๋ฐ๋„, ์›๋ณธ ๋ฐฐ์—ด์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ์•„์˜ˆ ์ˆ˜์ •๋˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ–ˆ๋‹ค. immutable๊ณผ mutable ์ฐจ์ด๋ฅผ ์ œ๋Œ€๋กœ ์•Œ๊ณ  ์“ฐ๊ธฐ์œ„ํ•ด ์ •๋ฆฌํ•ด๋ณด๋ คํ•œ๋‹ค. ๋ฐ์ดํ„ฐ state๋ผ๋Š” ๋ฐฐ์—ด์— ๊ฐ์ฒด ํ˜•์‹์˜ ์š”์†Œ๊ฐ€ ๋“ค์–ด๊ฐ€์žˆ๋‹ค. const state = [ { id: 1, content: 'a' }, { id: 2, content: 'b' }, ]; ๋ชฉํ‘œ ํŠน์ • id๋กœ ๊ฐ์ฒด ์š”์†Œ๋ฅผ ์ฐพ์•„ ๊ทธ ์š”์†Œ์˜ content ๊ฐ’์„ ๋ฐ”๊พธ๋Š” ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฒ˜์Œ state๊ฐ’๊ณผ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ–ˆ์„๋•Œ์˜ ๋ฐ˜ํ™˜๋˜๋Š” ๊ฐ’๊ณผ, ๊ทธ ์ดํ›„ state๊ฐ’์ด๋ž‘ ๋น„๊ตํ•ด๋ด„์œผ๋กœ์จ ์›๋ณธ state ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ๋Š”์ง€ (mutable), ..
์ฝ”ํ…Œ๋ฌธ์ œ๋ฅผ ํ’€๋‹ค๊ฐ€ ๋ฐœ๊ฒฌํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋‚ด์žฅํ•จ์ˆ˜ parseInt() ์™€ Number()์˜ ๋‹ค๋ฅธ์  ์‚ฌ์‹ค parseInt() ์™€ Number() ๋ชจ๋‘ ๋‚ด์šฉ๋ฌผ์ด ์ •์ˆ˜ํ˜• ์ˆซ์ž์ธ๋ฐ type๋งŒ ๋ฌธ์žํ˜•์ผ ๊ฒฝ์šฐ์—๋Š” ๋‘˜ ๋‹ค ์ˆซ์žํ˜•์œผ๋กœ ์ž˜ ๋ณ€ํ™˜ํ•ด์ฃผ์–ด ๋˜‘๊ฐ™์€ ์—ญํ• ์„ ํ•œ๋‹ค๊ณ ๋ด๋„ ๋ฌด๋ฐฉํ•˜๋‹ค. ๋‚˜๋„ ์—ฌํƒœ๊นŒ์ง€ ๋‘ ํ•จ์ˆ˜ ๋ชจ๋‘ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ์ค„ ์•Œ์•˜๋‹ค๋Š”.. ๊ทธ๋Ÿฐ๋ฐ ๋‚ด์šฉ๋ฌผ์ด ์ˆซ์ž๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ์—๋Š” ๊ฐ๊ฐ ๋‹ค๋ฅธ ๊ฐ’์ด ๋‚˜์˜ค๊ณ .. ์ฐพ์•„๋ณด๋‹ˆ ์—„์—ฐํžˆ ์ด๋ก ์ ์œผ๋กœ๋Š” ๋‹ฌ๋ผ์„œ ํ•œ๋ฒˆ ์ •๋ฆฌํ•ด๋ณธ๋‹ค. ์˜ค๋Š˜์˜ ์ฝ”ํ…Œ๋ฌธ์ œ const arr =[ '', '', '1', '23', '' ] ๋ฌธ์ž์™€ ์ˆซ์ž๊ฐ€ ์„ž์—ฌ์žˆ๋Š” string์—์„œ ์ •๊ทœํ‘œํ˜„์‹์œผ๋กœ ๋ฌธ์ž๋ฅผ ๊ฑธ๋Ÿฌ๋‚ด๊ณ  ์ˆซ์žํ˜•๋งŒ ๋‚จ๊ธฐ๊ณ , ๋‚˜๋จธ์ง€ ์ˆซ์ž๋ฅผ ๋”ํ•ด์ฃผ๋Š” ๊ฒฐ๊ณผ๊ฐ€ ํ•„์š”ํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐ ๋ฐฐ์—ด ์š”์†Œ๋ฅผ ์ˆซ์žํ˜•์œผ๋กœ ๋ฐ”๊พธ๊ณ  ๋”ํ•ด์ฃผ๋ฉด ๋˜..
์‹ ๊ธฐํ•œ ๊ฒฝํ—˜์ด๋‹ค. ์ฒ˜์Œ ๊ณต๋ถ€ํ• ๋•Œ๋Š” ์ „ํ˜€ ๋ฌด์Šจ๋ง์ธ์ง€ ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ๊ฒƒ๋“ค์ด ๋ถ€ํŠธ์บ ํ”„ ์ˆ˜๋ฃŒํ›„ ๋‹ค์‹œ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive ์ฑ…์„ ์ฝ์œผ๋‹ˆ ์ˆ ์ˆ  ์ž˜ ์ฝํžŒ๋‹ค. (์•„์ง ์ฒ˜์Œ ๋ถ€๋ถ„์ด๋ผ ๊ทธ๋Ÿฐ๊ฑธ์ง€๋„.... ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฉด์ ‘ ์Šคํ„ฐ๋””๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ ํŒ€์›๋“ค์ด๋ž‘ ๊ฐ์ž ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฑ…์„ ์ฝ๊ณ  ๊ถ๊ธˆํ•œ ๊ฒƒ๋“ค์„ ๊ณต์œ ํ•˜๋Š”๋ฐ ์š”์ฆ˜ ๊ทธ๋ž˜์„œ ๊ผญ ํ•œ์‹œ๊ฐ„ ์ด์ƒ์€ ๋ชจ๋”ฅ๋‹ค ์ฑ…์„ ์ฝ์€ ๊ฒƒ ๊ฐ™๋‹ค. ์š”์ฆ˜ ์ด ๋‘๊บผ์šด ์ฑ…์ฝ๋Š” ์žฌ๋ฏธ์— ๋น ์กŒ๋‹ค ! ๐Ÿ“Œ ์งˆ๋ฌธ const a = {}; a.b = 5; console.log(a.b) = ? ์ฝ˜์†”์— ์ฐํžˆ๋Š” ๊ฐ’์€? ๐Ÿ“Œ ๋ฉด์ ‘ ์งˆ๋ฌธ ์˜๋„ 1. const๋ž‘ let์„ ์•Œ๊ณ ์žˆ๋Š”๊ฐ€? 2. ์›์‹œํƒ€์ž…, ๊ฐ์ฒดํƒ€์ž…์˜ ์ฐจ์ด๋ฅผ ์•Œ๊ณ  ์žˆ๋Š”๊ฐ€? ๐Ÿ“Œ ๋‹ต๋ณ€ 5๊ฐ€ ์ฐํžŒ๋‹ค. ๋นˆ ๊ฐ์ฒด๋ฅผ a๋ผ๋Š” ์ƒ์ˆ˜๋กœ ํ• ๋‹น์„ ํ•ด์ฃผ์—ˆ๋‹ค. const ํ‚ค์›Œ๋“œ๊ฐ€ ์žˆ์–ด ..
hana1203
'JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก