user-img
Language/JS 31
var-let-const ์ฐจ์ด, Boolean, Undefined ์™€ Null ์˜ ์ฐจ์ด
1. var-let-const ์˜ ์ฐจ์ด์  ๋ช…๋ น์–ด ๋œป var name = "value" ์žฌ ์„ ์–ธ๊ฐ€๋Šฅ, ์žฌ ํ• ๋‹น ๊ฐ€๋Šฅ let name = "value" ์žฌ ์„ ์–ธ ๋ถˆ๊ฐ€, ์žฌ ํ• ๋‹น ๊ฐ€๋Šฅ const name = "value" ์žฌ ์„ ์–ธ ๋ถˆ๊ฐ€, ์žฌ ํ• ๋‹น ๋ถˆ๊ฐ€ -> ํ•œ๋ฒˆ ์„ ์–ธํ•˜๋ฉด ๊ทธ ๋’ค๋กœ ์ƒ์ˆ˜ ์ทจ๊ธ‰ /*var*/ //์ตœ์ดˆ ์„ ์–ธ var a = "apple" // ์žฌ ์„ ์–ธ (๊ฐ€๋Šฅ) var a = "array" //์žฌ ํ• ๋‹น (๊ฐ€๋Šฅ) var a = "age" /*let*/ //์ตœ์ดˆ ์„ ์–ธ let a = "apple" // ์žฌ ์„ ์–ธ (์—๋Ÿฌ) let a = "array" //Uncaught SyntaxError: Identifier 'title' has already been declared //์žฌ ํ• ๋‹น (๊ฐ€๋Šฅ) let a = "..
2023.03.23
Language/JS
String ํ˜• ๋ณ€์ˆ˜, Numberํ˜• ๋ณ€์ˆ˜ ์„ ์–ธ
1. JavaScript ๋ณ€์ˆ˜ ์„ ์–ธ์˜ ํŠน์ง• JavaScript๋Š” ๋Š์Šจํ•œ ํƒ€์ž…์˜ ๋™์  ์–ธ์–ด์ด๋‹ค. Java ์ฒ˜๋Ÿผ int, float, String ๋“ฑ๋“ฑ์œผ๋กœ type์ด ๋”ฐ๋กœ ๋‚˜๋ˆ„์–ด์ ธ ์žˆ์ง€ ์•Š๋‹ค. ๋”ฐ๋ผ์„œ type ์„ ์–ธ์ด ๋”ฐ๋กœ ์—†๊ณ , ํ•˜๋‚˜์˜ ๋ณ€์ˆ˜์— ์–ด๋–ค ํƒ€์ž…์˜ ๊ฐ’์œผ๋กœ๋“  ํ• ๋‹น ๋ฐ ์žฌํ• ๋‹น์ด ๊ฐ€๋Šฅํ•˜๋‹ค. (๋ฌธ์ž์—ด, ์ˆซ์ž, boolean ๋“ฑ) a = "Class" a = 27 a = true 2. String ์„ ์–ธ ๋ฐฉ์‹ 3๊ฐ€์ง€ a = "bla bla" a = 'bla bla' a = `bla bla` ํฐ ๋”ฐ์˜ดํ‘œ, ์ž‘์€ ๋”ฐ์˜ดํ‘œ, ๋ฌผ๊ฒฐํ‘œ๋กœ ์ง„ํ™” ์ „ ๋ชจ์–‘ 3๊ฐ€์ง€๋กœ ๋ฌธ์ž์—ด์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ํฐ ๋”ฐ์˜ดํ‘œ์™€ ์ž‘์€ ๋”ฐ์˜ดํ‘œ๋Š” ๊ธฐ๋Šฅ์ด ๊ฐ™์œผ๋ฏ€๋กœ ๋‘˜ ์ค‘ ํ•˜๋‚˜๋ฅผ ์ทจํ–ฅ ๊ป ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. `` ์ด ๊ธฐํ˜ธ๋Š” ํŠน๋ณ„ํ•œ ๊ธฐ๋Šฅ์ด ํ•˜๋‚˜ ๋” ์žฅ์ฐฉ ๋˜์–ด ์žˆ๋‹ค...
2023.03.23
Language/JS
thumbnail
JS๋ฅผ HTML ๋‚ด๋ถ€์—์„œ ์“ธ ์ˆ˜ ์žˆ๋„๋ก ์„ค์ •
0. ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค ํด๋” ์—ด๊ธฐ (VScode ์ด๋ฉด ํŒŒ์ผ ๋ˆ„๋ฅด๊ณ  ํด๋” ์—ด๊ธฐ) 1. npm ๊น”๊ธฐ (ํ„ฐ๋ฏธ๋„์— npm init -y ) (-y ์“ฐ๋ฉด ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ์„ค์ •ํ•˜๋Š” ๊ฑฐ ๊ฑด๋„ˆ ๋›ฐ๊ฒ ๋‹ค๋Š” ์†Œ๋ฆฌ) 2. Parcel ๋ฒˆ๋“ค๋Ÿฌ ์„ค์น˜ (ํ„ฐ๋ฏธ๋„์— npm -i -D parcel) (์—ฌ๊ธฐ์„œ -D๋Š” ๊ฐœ๋ฐœํ•  ๋•Œ๋งŒ ํ•ด๋‹น module์„ ์“ฐ๊ฒ ๋‹ค๋Š” ์˜๋ฏธ, ๋ฐฐํฌ ์‹œ ์•ˆ ๋”ฐ๋ผ๊ฐ.) 3. package.json์˜ script ์˜์—ญ ํŽธ์ง‘ - script ์˜์—ญ์€ ๋ช…๋ น์–ด๋“ค์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Œ. "A" : "B" ํ˜•ํƒœ๋กœ ์„ค์ • ์„ค์ • ์‹œ npm run A ๋ผ๊ณ  ํ„ฐ๋ฏธ๋„์— ์น˜๋ฉด B๊ฐ€ ์ˆ˜ํ–‰๋จ. - ์šฐ๋ฆฌ๋Š” ์—ฌ๊ธฐ์„œ ๊ฐœ๋ฐœ ์šฉ ๋นŒ๋“œ์™€ ์ง„์งœ ์ฐ๋ง‰ ๋ฐฐํฌ ์‹œ ๋นŒ๋“œ๋กœ ๋นŒ๋“œ ๋ช…๋ น์–ด๋ฅผ 2๊ฐœ๋กœ ๋‚˜๋ˆŒ ๊ฒƒ์ž„. parcel ์˜†์— build๋ฅผ ์ ์œผ๋ฉด, ๋ฐฐํฌ์šฉ์œผ๋กœ ๋นŒ๋“œ ํ•˜๊ฒ ๋‹ค๋Š” ์†Œ๋ฆฌ๊ณ  ๋นŒ..
2023.03.22
Language/JS
thumbnail
์œ ์˜์  ๋ฒ„์ „์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€
ํ”„๋กœ๊ทธ๋žจ์ด ๊ฐœ๋ฐœ๋˜๋Š” ํŠน์ • ์‹œ์ ์—๋‹ค๊ฐ€ ๋ฒˆํ˜ธ๋ฅผ ๋งค๊ฒจ์„œ ์˜๋ฏธ๋ฅผ ๋ถ€์—ฌ ํ•˜๋Š” ๊ฒƒ์„ ์œ ์˜์  ๋ฒ„์ „์ด๋ผ๊ณ  ํ•œ๋‹ค. ์œ„์˜ ์‚ฌ์ง„์€ lodash์™€ parcel์˜ ์œ ์˜์  ๋ฒ„์ ผ์„ ๋ณด์—ฌ์ค€๋‹ค. ์„ธ๋ถ€์ ์œผ๋กœ ๋œฏ์–ด๋ณด๋ฉด ์œ ์˜์  ๋ฒ„์ ผ์€ Major.Minor.Patch ๋กœ ๋‚˜๋‰˜์–ด์ ธ ์žˆ๋‹ค. Major๋Š” ๊ธฐ์กด ๋ฒ„์ ผ๊ณผ ํ˜ธํ™˜์ด ๋˜์ง€ ์•Š๋Š” ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋œ ๋ฒ„์ ผ์„ ์˜๋ฏธํ•œ๋‹ค. (์—ฌ๊ธฐ์„œ ๊ธฐ์กด ๋ฒ„์ „์ด๋ž€ ์ง์ „๋ฒ„์ ผ์ด๋‹ค. lodash๊ฐ€ 4๋ฒ„์ ผ์ด๋‹ˆ๊นŒ, ๊ธฐ์กด ๋ฒ„์ „์€ 3๋ฒ„์ „์ด๋‹ค.) Minor๋Š” ๊ธฐ์กด ๋ฒ„์ „๊ณผ ํ˜ธํ™˜์ด ๋˜๋Š” ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋œ ๋ฒ„์ „์„ ์˜๋ฏธํ•œ๋‹ค. patch๋Š” ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๋ฒ„๊ทธ ๋ฐ ์˜คํƒ€๊ฐ€ ์ˆ˜์ •๋œ ๋ฒ„์ „์„ ์˜๋ฏธํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์•ž์— ^ ํ‘œ์‹œ๋Š” '๋ฉ”์ด์ € ๋ฒ„์ ผ์ด ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ์ƒํƒœ์—์„œ ๊ฐ€์žฅ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์—…๋ฐ์ดํŠธ ๊ฐ€๋Šฅ' ์ด๋ผ๋Š” ๋œป์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋งŒ์•ฝ ํ”„๋กœ๊ทธ..
2023.03.22
Language/JS
thumbnail
Parcel ์ด์šฉ ๋ฐฉ๋ฒ•.
์›น ๋ธŒ๋ผ์šฐ์ €์— ๋„์šธ ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด๋Š” HTML, CSS, JS ์ด ์„ธ ๊ฐœ ๋ฟ์ด๋‹ค. TS(typescript)๋Š” JS๋ฅผ ๋” ์‰ฝ๊ฒŒ ์“ฐ๊ธฐ ์œ„ํ•˜์—ฌ ๋‚˜์˜จ ์–ธ์–ด ์ด์ง€๋งŒ ์ด ์ฝ”๋“œ๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €์— ๋„์šธ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€ํ™˜ ๊ณผ์ •์„ ๊ฑฐ์ณ์•ผ ํ•œ๋‹ค. ์ด ๋ณ€ํ™˜ ๊ณผ์ •์„ ์ž๋™์œผ๋กœ ํ•ด์ฃผ๋Š” Module์ด ๋ฐ”๋กœ Parcel์ด๋‹ค. Parcel์˜ ๋˜ ๋‹ค๋ฅธ ์žฅ์ ์€ ๋นŒ๋“œ๊ฐ€ ๋น ๋ฅด๊ณ  ์‰ฝ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๋˜ํ•œ ์šฐ๋ฆฌ๋Š” JS์—์„œ์˜ ์„ค์ • ํŒŒ์ผ์ธ package.json์„ ์ด์šฉํ•ด, test ์ƒํ™ฉ๊ณผ ๋ฐฐํฌ ์ƒํ™ฉ ๊ฐ๊ฐ ๋นŒ๋“œ๋ฅผ ๋‹ค๋ฅด๊ฒŒ ํ•ด์ฃผ๋Š” ํ™˜๊ฒฝ์„ ๋งŒ๋“ค ๊ฒƒ์ด๋‹ค. 1. package.json ์•ˆ์˜ ๋‚ด์šฉ ์ˆ˜์ • "scripts": { "dev": "parcel ./index.html", "build": "parcel build ./index.html" } package.j..
2023.03.22
Language/JS
thumbnail
NPM ์‹œ์ž‘
1. ํ”Œ๋ž˜๊ทธ๋ž€? --version , -v, --save-dev ์ด๋Ÿฐ -(middle hyphen) ์‚ฌ์šฉํ•œ ๋ช…๋ น์–ด๋“ค์„ ํ”Œ๋ž˜๊ทธ๋ผ๊ณ  ํ•œ๋‹ค. 2. NPM ์‹œ์ž‘ ์ด์ œ ์šฐ๋ฆฌ๊ฐ€ ์“ธ ๋ชจ๋“ˆ๋“ค์„ ์„ค์น˜ํ•ด์ฃผ๊ณ , ๊ด€๋ฆฌํ•ด์ฃผ๋Š” NPM์„ ๊น”์•„ ๋ณด๊ฒ ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ NPM์„ ๊น”๋ ค๋Š” ํŒŒ์ผ์„ ์„ ํƒํ•˜๊ณ , ๊ทธ ํŒŒ์ผ ๋ฐ‘์˜ ํ„ฐ๋ฏธ๋„์—์„œ ํ•ด๋‹น ๋ช…๋ น์–ด๋ฅผ ์น˜๋ฉด ๋œ๋‹ค. ๋ช…๋ น์–ด npm init, npm init -y npm init ๋งŒ ์น˜๊ฒŒ ๋œ๋‹ค๋ฉด, ๊ทธ ํ›„ ์šฐ๋ฆฌ๋Š” ์šฐ๋ฆฌ๊ฐ€ ์„ค์น˜ํ•œ NPM์˜ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ ์ •๋ณด๋ฅผ ๋”ฐ๋กœ ์ ์–ด์ค˜์•ผ ํ•œ๋‹ค. ์ด๋Ÿฌํ•œ ๊ณผ์ •์ด ์‹ซ๋‹ค๋ฉด, npm init -y๋ฅผ ์น˜๋ฉด ๋œ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ ์ •๋ณด ์ ๋Š” ๊ณผ์ •์„ ์ƒ๋žตํ•œ๋‹ค. 3. NPM์˜ ๋‚ด๋ถ€๊ตฌ์กฐ (1)์ „์ฒด ๊ตฌ์กฐ ์šฐ๋ฆฌ๊ฐ€ NPM์„ ๊น”๋ฉด ๋ฐ‘๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๊ฐ€ ๋œ๋‹ค. ์—ฌ๊ธฐ์„œ package-lock.jso..
2023.03.22
Language/JS
NPM์ด๋ž€?
Package๋Š” Module์ด๋ผ๊ณ ๋„ ๋ถˆ๋ฆฌ๋ฉฐ, ํ”„๋กœ๊ทธ๋žจ๋ณด๋‹ค๋Š” ๊ทœ๋ชจ๊ฐ€ ์ž‘์€ ๊ธฐ๋Šฅ๋“ค์„ ์˜๋ฏธํ•œ๋‹ค. NPM์ด๋ž€ Node Package Manager์˜ ์•ฝ์ž๋กœ, ์›น์—์„œ Packager๋“ค์„ ๋‹ค์šด๋ฐ›์•„์„œ ์„ค์น˜ ํ•ด์ฃผ๊ณ , ๊ด€๋ฆฌ ํ•ด์ฃผ๋Š” ํˆด์„ ๋งํ•œ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ง‘์„ ์ง“๊ณ  ์‹ถ๋‹ค. ํ•˜์ง€๋งŒ ๋‚˜๋ฌด ํŒ์ž์™€ ๋Œ๋งน์ด, ์ฒ ๋งŒ ์žˆ๋‹ค๊ณ  ํ•ด์„œ ์ง‘์„ ์ง€์„ ์ˆ˜ ์—†๋‹ค. ์ง‘์„ ์ง“๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ตด์‚ญ๊ธฐ, ์ง€๊ฒŒ์ฐจ, ๋ง์น˜, ํ†ฑ ๊ฐ™์€ ๊ฒƒ์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค. Module์€ ์ด๋Ÿฌํ•œ ๊ตด์‚ญ๊ธฐ, ์ง€๊ฒŒ์ฐจ, ๋ง์น˜, ํ†ฑ ๊ฐ™์€ ๊ฒƒ์ด๊ณ , NPM์€ ์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ๋ฐ›์•„๋‹ค ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ์นœ๊ตฌ๋ผ ์ƒ๊ฐํ•˜๋ฉด ํŽธํ•˜๋‹ค.
2023.03.22
Language/JS