๊ฐ๋ฐ40 JavaScript Essentials import { random } from './getRandom' import _ from 'lodash' import getType from './getType' import * as R from './export_practice' import myData from './myData.json' import axios from 'axios' // ์ฐ์ ์ฐ์ฐ์(arithmetic operator) + - * / % // ํ ๋น ์ฐ์ฐ์(assignment operator) = // ๋ ผ๋ฆฌ ์ฐ์ฐ์(logical operator) // ์ผํญ ์ฐ์ฐ์(ternary operator) ? // var ๋ณ์๋ let, const ๋ณ์์ ๋ค๋ฅด๊ฒ ๋ธ๋ก ๋ ๋ฒ์ ๋ฒ์๊ฐ ์๋ ํจ์ ๋ ๋ฒจ ๋ฒ์ ๋ด์์ ์ ํจํ๋ค. function su.. 2023. 2. 5. Type annotation javascript๋ Dynamic type๋ค์ ์ฌ์ฉํ๋ ๋ฐ๋ฉด typescirpt๋ Static type๋ค์ ์ฌ์ฉํ๋ค. Static type์ ๊ฐ๋ฐํ๋ ์ค๊ฐ์ type์ ์ฒดํฌํ๋ค. Dynamic type์ ๊ฐ๋ฐํ๋ ๋์ค์๋ ์ ์ ์๊ณ runtime์ ๋์ ํด์ผ์ง๋ง ์๋ชป๋ ๊ฒ์ ์ ์ ์๋ค. 1 2 3 let a: number // ๋ณ์๊ฐ ์ด๋ค ํ์ ์ธ์ง๋ฅผ ์ง์ ํด์ฃผ๋ ๊ฒ์ type annotation์ด๋ผ๊ณ ํ๋ค. // typescript์์๋ javascript์ ๋ค๋ฅด๊ฒ ํ์ ์ ์ง์ ํ ์ ์๋ค. cs typecript์์๋ let a = 'Hello'์ ๊ฐ์ด ๋ณ์ ์์ฑ์ ์ด๊ธฐ๊ฐ์ ํ ๋นํด์ฃผ๋ฉด ๋ณ์์ type์ด ์ ํด์ง๊ฒ ๋๊ณ ํด๋น type์ด ์๋ ๋ค๋ฅธ type์ ๊ฐ์ ์ฌํ ๋นํ๋ ค๊ณ ํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. let .. 2023. 2. 4. BEM ์์ ๋ฅผ ๋ง๋ค๋ฉด์ class ์ด๋ฆ์ contents__name, contents__texture์ ๊ฐ์ด _ ๊ธฐํธ๋ฅผ 2๊ฐ ๋ถ์ฌ์ ์ฌ์ฉํ๋ ๊ฒ์ ๋ณผ ์ ์์๋๋ฐ, ์ ์ธ๋๋ฐ 2๊ฐ๋ฅผ ๋ถ์ฌ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ฌด์จ ์๋ฏธ์ผ๊น?? BEM์ HTML ํด๋์ค ์์ฑ์ ์๋ช ๋ฒ์ด๋ค. ์๋ช ๋ฒ์๋ 2๊ฐ์ง๊ฐ ์๋๋ฐ, ํ๋๋ ์์์ ์ผ๋ถ๋ถ์ ํ์ํ๋ ๋ฐฉ๋ฒ์ด๊ณ ํ๋๋ ์์์ ์ํ๋ฅผ ํ์ํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์์์ ์ผ๋ถ๋ถ์ ํ์ํ ๋์๋ ์ธ๋๋ฐ 2๊ฐ๋ฅผ ๋ถ์ฌ์ ์ผ๋ถ๋ถ์ ์๋ฏธํจ์ ๋ํ๋ด๊ณ ์์์ ์ํ๋ฅผ ํ์ํ ๋์๋ ํ์ดํ 2๊ฐ๋ฅผ ๋ถ์ฌ์ ์ํ๋ฅผ ์๋ฏธํจ์ ๋ํ๋ธ๋ค. ์ผ์ชฝ๊ณผ ๊ฐ์ด ํด๋์ค ์์ฑ์ ์ ์ํ๋ฉด ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. container ํด๋์ค์ name ํด๋์ค๋ฅผ ์ ํํ๊ธฐ ์ํด ์ฐ๋ฆฌ๋ CSS์์ .container .name ์ด๋ ๊ฒ ๋์์ฐ๊ธฐ๋ฅผ ์ด์ฉํ ํ.. 2023. 1. 13. ๋ฉ์๋ ์ฒด์ด๋(Method Chaining) ๋ฉ์๋๋ค์ ๋ถ์ฌ์ ์์ฑํ์ฌ ์ฌ์ฉํ ์ ์๋ค. ๋ฉ์๋๋ฅผ ์ฒด์ธ์ฒ๋ผ ์ฐ๊ฒฐํ์ฌ ์ฌ์ฉํ๋ค๊ณ ํ์ฌ ๋ฉ์๋ ์ฒด์ด๋์ด๋ผ๊ณ ํ๋ค. split ๋ฉ์๋ : a๋ผ๋ ๋ณ์์ ๋ด์ฉ์ ์ธ์๋ก ๋ฐ์ ๋ฌธ์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ชผ๊ฐ์ ๋ฐฐ์ด๋ก ๋ฐํํ๋ค. => ์ฆ, ๋ฌธ์ ๋ฐ์ดํฐ๋ฅผ ๋ฐฐ์ด ๋ฐ์ดํฐ๋ก ๋ณํํ์ฌ ๋ฐํํ๋ ์ญํ ์ ํ๋ค. reverse ๋ฉ์๋ : ๋ฐฐ์ด์ ๋ค์ง๋๋ค. join ๋ฉ์๋ : a๋ผ๋ ๋ณ์์ ์ ์ฅ๋ ๋ฐฐ์ด์ ์ธ์๋ก ๋ฐ์ ๋ฌธ์๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ณํฉํ์ฌ ๋ฐํํ๋ค. ์์ง ๊ฐ๊ฐ์ ๋ฉ์๋๊ฐ ๋ฌด์จ ์ญํ ์ ํ๋์ง๋ ์ค์ํ์ง ์๊ณ , ๋ฉ์๋๋ค์ ๋ถ์ฌ์ ์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ ์์ ๋์. ๊ฐ๊ฐ์ ๋ฉ์๋๋ฅผ ๋ถ๋ฆฌํด์ ์ฌ์ฉํ๋ฉด ์ฝ๋๊ฐ ๊ธธ์ด์ง๊ณ ๋ณต์กํด์ง๋ฏ๋ก ๋ฉ์๋ ์ฒด์ด๋์ ์ฌ์ฉํ ์ ์๋ค. ๊ทธ๋ ๋ค๊ณ ๋ชจ๋ ๋ฉ์๋๋ค์ ์์์์ด ์ฐ๊ฒฐํด์ ์ฌ์ฉํ ์ ์๋ ๊ฒ์ ์๋๋ค. ๋ฉ์๋ .. 2023. 1. 12. DOM API DOM API ๋? Document(DOM)๋ HTML์ ๋ปํ๊ณ Object Model์ HTML์ span, div, input ์์๋ค์ ๋ปํ๋ค. ์ฆ, DOM API๋ ์๋ฐ ์คํฌ๋ฆฝํธ์์ HTML์ ์ ์ดํ๋ ์ฌ๋ฌ๊ฐ์ง ๋ช ๋ น๋ค์ด๋ผ๊ณ ์์ญํ ์ ์๋ค. ์๋ฐ ์คํฌ๋ฆฝํธ์์ document ๊ฐ์ฒด์ ์๋ querySelector ๋ฉ์๋๋ฅผ ํตํด HTML์ box ํด๋์ค๋ฅผ ๊ฐ์ง ์์๋ฅผ ์ฐพ์ ๋ค์ ์ฝ์์ ์ถ๋ ฅํ๋ ์ฝ๋๋ฅผ ์์ฑํด ๋ณด์๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ฝ๋๋ฅผ ์์์ ์๋๋ก ์ฝ์ด๋๊ฐ๊ธฐ ๋๋ฌธ์ ์๋ฐ ์คํฌ๋ฆฝํธ์ ์์ฑ๋ ์ฝ๋๊ฐ ๋จผ์ ์คํ์ด ๋๋ค. ๊ทธ ํ์ body๋ถ๋ถ์์ div์์๋ฅผ ์์ฑํ๊ธฐ ๋๋ฌธ์ null๊ฐ์ด ์ถ๋ ฅ๋ ๊ฒ์ด๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ script ํ๊ทธ๋ฅผ body์ div ํ๊ทธ ์๋ ๋ถ๋ถ์ผ๋ก ์ฎ๊ฒจ์ฃผ๋ฉด ์ ์์ ์ผ๋ก ์๋ํ๋ค... 2023. 1. 12. ํจ์ ํจ์ ์๋ฐ ์คํฌ๋ฆฝํธ๋ก ๋ง๋ค ์ ์๋ ์ฌ๋ฌ ๊ฐ์ง ํน์ ํ ๋์(๊ธฐ๋ฅ)์ ์ํํ ์ ์๋ ์ฝ๋์ ์งํฉ. ํจ์๋ฅผ ์ ์ธํ๋ ๋ฐฉ๋ฒ function์ด๋ผ๋ ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ธ์ ์์ํ๋ฉฐ function ํค์๋ ๋ค์๋ ํจ์์ ์ด๋ฆ์ ๋ฃ๋๋ค. ๊ทธ๋ฆฌ๊ณ ํจ์์ ์ด๋ฆ์ ํตํด์ ํจ์๋ฅผ ํธ์ถํ ์ ์๊ณ , ํธ์ถ๋ ํจ์๋ ๋ด์ฉ์ ์์ฑ๋ ์ฝ๋๋ฅผ ์์ฐจ์ ์ผ๋ก ์คํํ๋ค. ํจ์ ์์์ ํน์ ํ ๊ฐ์ ๋ฐํํ๋๋ก ํ ์๋ ์๋ค. ํจ์์ ์ฌ์ฌ์ฉ, ์ธ์์ ๋งค๊ฐ๋ณ์ sum์ด๋ผ๋ ํจ์๋ ๋งค๊ฐ๋ณ์ a์ b์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ํด์ ๋ฐํํ๋ ํจ์์ด๋ค. ํจ์๊ฐ ํธ์ถ๋๋ ๋ถ๋ถ์์ ๋ฐ์ดํฐ๋ฅผ ์ธ์๋ก ์ง์ด๋ฃ์ ์ ์๊ณ , ๊ทธ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค ๋ณ์๋ฅผ ๋งค๊ฐ๋ณ์๋ผ๊ณ ๋ถ๋ฅธ๋ค. ๋งค๊ฐ๋ณ์์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ ํจ์ ๋ด์์๋ง ์ฌ์ฉํ ์ ์๋ค. ํ ๋ฒ ์ ์ธ๋ ํจ์๋ ์ฌ๋ฌ ๋ฒ ์ฌ์ฌ์ฉ๋ .. 2023. 1. 11. ๋ณ์, ์์ฝ์ด ๋ณ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ์ฐธ์กฐ(์ฌ์ฉ)ํ๋ ๋ฐ์ดํฐ์ ์ด๋ฆ์ ์ง๋ ๊ฐ๋ let์ด๋ผ๋ ํค์๋ ์ธ์๋ var๋ const๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ์๋ฅผ ์ ์ธํ ์ ์๋ค. ๊ทธ๋ฌ๋ ์์ฆ ์ฌ์ฉํ๋ ์๋ฐ ์คํฌ๋ฆฝํธ์์๋ var ํค์๋๋ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ ๊ถ์ฅํ๋ค. ์ฌ์ฌ์ฉ ํ ๋ฒ ์ ์ธ๋ ๋ณ์๋ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค. => ์ฌ๋ฌ ๋ฒ ์ฌ์ฉํ ์ ์์! ์ฌํ ๋น let ํค์๋๋ฅผ ์ฌ์ฉํด ์ ์ธ๋ ๋ณ์๋ ๊ฐ์ ์ฌํ ๋น์ด ๊ฐ๋ฅํ๋ค. ๊ทธ๋ฌ๋ const ํค์๋๋ฅผ ์ฌ์ฉํด ์ ์ธ๋ ๋ณ์๋ ๊ฐ์ ์ฌํ ๋นํ ์ ์๋ค. ์ฌํ ๋น ํ๋ ค๊ณ ํ๋ฉด TypeError๊ฐ ๋ฐ์ํ๋ค. => ์ผ๋จ const๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ์๋ฅผ ์ ์ธํ๊ณ ๋ง์ฝ ์ฌํ ๋น ํด์ผํ๋ ์ํฉ์ด ๋ฐ์ํ๋ฉด const๋ฅผ let์ผ๋ก ์ฝ๋๋ฅผ ์์ ํ์ฌ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค. ์์ฝ์ด this, if, break ๋ฑ์ .. 2023. 1. 11. ๋ฐ์ดํฐ ์ข ๋ฅ(์๋ฃํ) ์๋ฐ ์คํฌ๋ฆฝํธ์์ ์ฌ์ฉ๋๋ ๋ฐ์ดํฐ์ ์ข ๋ฅ๋ค์ ์ดํด๋ณด์. ์๋ฐ ์คํฌ๋ฆฝํธ๋ ๋ฐ์ดํฐ๋ก ๋์ํ๋ค. 1. String(๋ฌธ์ ๋ฐ์ดํฐ) ์ธ๊ฐ์ง ์ข ๋ฅ์ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ธํ ์ ์๋ค. ๋ณ์๋ฅผ ์ ์ธํ ๋์๋ let ์ด๋ผ๊ณ ํ๊ธฐํ์ฌ ์ ์ธํ๋ค. ๋ฐฑํฑ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์์ด์ ํํํ๋ฉด ๋ฐ์ดํฐ ์ค๊ฐ ์ด๋๊ฐ์๋ค๊ฐ ๋ค๋ฅธ ๋ฐ์ดํฐ๋ฅผ ๋ณด๊ฐํด์ ๋ผ์๋ฃ์ ์ ์๋ค. ์ด๋ ${ } ๊ธฐํธ๋ฅผ ์ฌ์ฉํ๋ค. 2. Number(์ซ์ ๋ฐ์ดํฐ) 3. Boolean(๋ถ๋ฆฐ ๋ฐ์ดํฐ) Boolean ๋ฐ์ดํฐ๋ true, false ๋๊ฐ์ง ๊ฐ๋ง ์กด์ฌํ๋ค. 4. Undefined ํ ๋น๋์ง ์์ ์ํ์ ๋ฐ์ดํฐ 5. null null๋ ์ด๋ป๊ฒ ๋ณด๋ฉด undefined์ ๋น์ทํ๋ค๊ณ ํ ์ ์์ง๋ง ๊ทผ๋ณธ์ ์ผ๋ก ์๋์ ์ผ๋ก ๋น์ด์์์ ๋ช ์ํ๋ค๋ ์ ์์ ์ฐจ์ด๊ฐ ์๋ค... 2023. 1. 11. ๊ฐ์ ํ๊ธฐ๋ฒ HTML, CSS, JavaScript๋ฅผ ํตํ์ด์ 4๊ฐ์ง์ ํ๊ธฐ๋ฒ์ด ์กด์ฌํ๋ค. dash-case(kebab-case). snake_case, camelCase, ParcelCase thequickbrownfoxjumpsoverthelazydog ๋ผ๊ณ ์์ฑํ๋ฉด ๋ฌด์จ ์๋๋ก ์์ฑํ ๊ฒ์ธ์ง ํ ๋์ ํ์ ํ๊ธฐ๊ฐ ์ด๋ ต๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํจํฐ๋ ํ๋์ ๋จ์ด๋ก ์ธ์ํ๊ฒ ํ๋ฉด์๋ ์ฌ๋์ด ์ฝ๊ธฐ ์ฝ๋๋ก ๊ฐ ๋จ์ด๋ฅผ ๊ตฌ๋ถํด์ค ํ์๊ฐ ์๋ค. 1. dash-case ๋์ฌ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ๋ ํ๊ธฐ๋ฒ ์ฃผ๋ก HTML๊ณผ CSS์์ ์ฌ์ฉ๋๋ค. 2. snake_case ์ธ๋๋ฐ ๊ธฐํธ๋ฅผ ์ฌ์ฉํด์ ๋จ์ด์ ๋จ์ด๋ฅผ ๊ตฌ๋ถํด์ฃผ๋ ํ๊ธฐ๋ฒ snake_case ์ญ์ HTML๊ณผ CSS์์ ์ฃผ๋ก ์ฌ์ฉ๋๋ค. 3. camelCase ์ฒซ๋ฒ์งธ ๋จ.. 2023. 1. 11. ์ด์ 1 2 3 4 5 ๋ค์