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
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
์ ์์ ๋ฒ์ ์ด๋ ๋ฌด์์ธ๊ฐ
ํ๋ก๊ทธ๋จ์ด ๊ฐ๋ฐ๋๋ ํน์ ์์ ์๋ค๊ฐ ๋ฒํธ๋ฅผ ๋งค๊ฒจ์ ์๋ฏธ๋ฅผ ๋ถ์ฌ ํ๋ ๊ฒ์ ์ ์์ ๋ฒ์ ์ด๋ผ๊ณ ํ๋ค. ์์ ์ฌ์ง์ lodash์ parcel์ ์ ์์ ๋ฒ์ ผ์ ๋ณด์ฌ์ค๋ค. ์ธ๋ถ์ ์ผ๋ก ๋ฏ์ด๋ณด๋ฉด ์ ์์ ๋ฒ์ ผ์ Major.Minor.Patch ๋ก ๋๋์ด์ ธ ์๋ค. Major๋ ๊ธฐ์กด ๋ฒ์ ผ๊ณผ ํธํ์ด ๋์ง ์๋ ์๋ก์ด ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ๋ฒ์ ผ์ ์๋ฏธํ๋ค. (์ฌ๊ธฐ์ ๊ธฐ์กด ๋ฒ์ ์ด๋ ์ง์ ๋ฒ์ ผ์ด๋ค. lodash๊ฐ 4๋ฒ์ ผ์ด๋๊น, ๊ธฐ์กด ๋ฒ์ ์ 3๋ฒ์ ์ด๋ค.) Minor๋ ๊ธฐ์กด ๋ฒ์ ๊ณผ ํธํ์ด ๋๋ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ๋ฒ์ ์ ์๋ฏธํ๋ค. patch๋ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ๊ฒ์ด ์๋๋ผ, ๋ฒ๊ทธ ๋ฐ ์คํ๊ฐ ์์ ๋ ๋ฒ์ ์ ์๋ฏธํ๋ค. ๊ทธ๋ฆฌ๊ณ ์์ ^ ํ์๋ '๋ฉ์ด์ ๋ฒ์ ผ์ด ๋ฐ๋์ง ์๋ ์ํ์์ ๊ฐ์ฅ ์ต์ ๋ฒ์ ์ผ๋ก ์
๋ฐ์ดํธ ๊ฐ๋ฅ' ์ด๋ผ๋ ๋ป์ ๊ฐ์ง๊ณ ์๋ค. ๋ง์ฝ ํ๋ก๊ทธ..
2023.03.22
Language/JS
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
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