๐ช Programming
[React] ๋ฆฌ์กํธ์์ SVG ์ฌ์ฉ๋ฒ
[React] ๋ฆฌ์กํธ์์ SVG ์ฌ์ฉ๋ฒ
2024.04.25๐ก SVG๋ ์์, ํฌ๊ธฐ ๋ฑ์ ๋์ ์ผ๋ก ์กฐ์ ํ ์ ์๋ ์ฅ์ ์ด ์๋ค ๋ฐฉ๋ฒ 1 — src ์์ฑ์ svg ๊ฒฝ๋ก ์
๋ ฅ ; ๐ก ํ์ผ ๊ฒฝ๋ก ์ง์ ์ฐธ๊ณ ๋ด์ฉโถ JSX ์๋ฆฌ๋จผํธ ์์ฑ์ ๋ฃจํธ ๊ธฐ์ค์ `public` ํด๋๋ง์ฝ `` ํ๊ทธ์ `src` ์์ฑ(JSX ํ๊ทธ ์์ฑ)์ `src` ํด๋์ ์๋ ์ด๋ฏธ์ง ํ์ผ์ ์ง์ ํ๋ ค๋ฉด…ํ์ผ ์ต์๋จ์์ ๋ถ๋ฌ์จ ์ด๋ฏธ์ง ํ์ผ์ `src` ์์ฑ์ ํ ๋นํ๊ฑฐ๋,`src` ์์ฑ ์์์ `require()` ์ฌ์ฉ ex) ``โท CSS ํ์ผ ๋ฃจํธ ํด๋ ๊ธฐ์ค์ `src` ํด๋โธ ํ์ผ ์ต์๋จ `import` ๊ตฌ๋ฌธ์์ `src` ํด๋๋ง ์ฒ๋ฆฌ ๊ฐ๋ฅ(`public` ํด๋์ ์๋ ํ์ผ์ ๋ถ๊ฐ) ํ๊ทธ src ์์ฑ์ svg ํ์ผ ๊ฒฝ๋ก๋ฅผ ์ ์ด์ค๋ค. ๊ฒฝ๋ก๋ฅผ ์ ์ ๋ public ํด๋์ ์๋ ํ์ผ์ public..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ์ค๋ณต ์์ ์ ๊ฑฐ ๋ฐฉ๋ฒ ๋ชจ์
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ์ค๋ณต ์์ ์ ๊ฑฐ ๋ฐฉ๋ฒ ๋ชจ์
2024.04.25๋ฐฉ๋ฒ 1 — Set ์ด์ฉ โญ๏ธSet์ ์ด์ฉํด ์ค๋ณต ์์๋ฅผ ์ ๊ฑฐํ๋ ๋ฐฉ์์ ์ฑ๋ฅ์ด ๊ฐ์ฅ ์ข๋ค Set์ ์ ๋ํฌํ ๊ฐ๋ง ์ ์ฅํ ์ ์๊ธฐ ๋๋ฌธ์ new Set() ์ธ์์ ๋ค์ด์จ ๋ฐฐ์ด์ ์ค๋ณต ์์๋ ์๋์ผ๋ก ์ ๊ฑฐ๋๋ค. Array.from์ โ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด๋ โ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๋ฅผ ์๊ฒ ๋ณต์ฌํด ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ค. ์ ๊ฐ๋ฌธ๋ฒ์ ์ฌ์ฉํด๋ ๊ฒฐ๊ณผ๋ ๋์ผ.const arr = ["A", "B", "A", "D", "B", "F"];const deDuplicated = [...new Set(arr)];// const deDuplicated = Array.from(new Set(arr))console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ] Set, Map ๊ด๋ จ ๋ ์์ธํ ๋ด์ฉ์ Ma..
[HTML/CSS] CSS ํ์
์ ๋๋ฉ์ด์
๋ง๋ค๊ธฐ
[HTML/CSS] CSS ํ์ ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ
2024.04.25์์ ์จ๊น ๋ฐฉ์ ์ฐจ์ด์ ๋ ๋ ํธ๋ฆฌ๋ฆฌํ๋ก์ฐ๋ฆฌํ์ธํธ์ด๋ฒคํธ ํธ๋ค๋ฌDOM ํธ๋ฆฌ`display: none`์ ์ธ๋ฐ์๋ฐ์๋นํ์ฑ์ ์ง`visibility: hidden`์ ์ง๋ฐ์ ์ํจ๋ฐ์๋นํ์ฑ์ ์ง`opacity: 0`์ ์ง๋ฐ์ ์ํจ๋ฐ์ํ์ฑ์ ์งdisplay: none๋ ๋ ํธ๋ฆฌ : ์ ์ธ๋ฆฌํ๋ก์ฐ : ๋ฐ์ (๋ ๋ํธ๋ฆฌ ์ํ๊ฐ ๋ณ๊ฒฝ๋์ผ๋ฏ๋ก)๋ฆฌํ์ธํธ : ๋ฐ์ (๋ฆฌํ๋ก์ฐ ๋ฐ์์ ๋ฆฌํ์ธํธ๋ ํจ๊ป ๋ฐ์)์ด๋ฒคํธ ํธ๋ค๋ฌ : ๋นํ์ฑDOM ํธ๋ฆฌ : ์ ์ง (์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ ๊ฐ๋ฅ)visibility: hidden๋ ๋ ํธ๋ฆฌ : ์ ์ง (ํ๋ฉด์์ ์๋ณด์ด์ง๋ง ๊ณต๊ฐ์ ์ฐจ์งํจ)๋ฆฌํ๋ก์ฐ : ๋ฐ์ ์ํจ (๋ ์ด์์์ ์ํฅ์ ๋ฏธ์น์ง ์์ผ๋ฏ๋ก)๋ฆฌํ์ธํธ : ๋ฐ์ (์์๊ฐ ๋ณด์ด์ง ์๋๋ก ๋ณ๊ฒฝํ์ผ๋ฏ๋ก)์ด๋ฒคํธ ํธ๋ค๋ฌ : ๋นํ์ฑDOM ํธ๋ฆฌ : ์ ์ง (์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ ๊ฐ๋ฅ)..
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ์์ ์
๋ ฅ์ฐฝ ์๋ํ๋ ๋ฐฉ์ง
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ์์ ์ ๋ ฅ์ฐฝ ์๋ํ๋ ๋ฐฉ์ง
2024.04.25, , ํ๊ทธ๋ฅผ ๋ชจ๋ฐ์ผ์์ ํฐ์นํ๋ฉด(ํฌ์ปค์คํ๋ฉด) ํ๋ฉด์ด ์๋์ผ๋ก ํ๋๋ ๋๊ฐ ์๋ค. ์
๋ ฅ์ฐฝ์ ํฐํธ ํฌ๊ธฐ๊ฐ 16px๋ณด๋ค ์์ผ๋ฉด ์๋์ผ๋ก ํ๋๋๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ๋ ํ์. ๋ํ์ ์ผ๋ก ์๋ 3๊ฐ์ง ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์๋ค. ํ๋ ๊ธ์ง — ๋ชจ๋ฐ์ผ์ฉ์ผ๋ก ์ ์ ํ๊ฒ ๋์์ธ๋ ๊ฒฝ์ฐํฐํธ ํฌ๊ธฐ๋ฅผ 16px ์ด์์ผ๋ก ๋ณ๊ฒฝ — ์ถ์ฒํฐํธ ํฌ๊ธฐ๋ฅผ 16px๋ก ๋ณ๊ฒฝํ๊ณ `transform: scale()`์ ์ด์ฉํด ์ํ๋ ๋งํผ ์ค์ด๋ ๋ฐฉ๋ฒ — ๋ณต์กํจ ๋ฐฉ๋ฒ1 — ํ๋ ๊ธ์งhtml ํ์ผ ๋ฉํ ํ๊ทธ์ content ์์ฑ์ ์ต๋ ํ๋ ๋ฐฐ์จ์ 1๋ฐฐ์๋ง ํ์ฉํ๊ณ , ๋จ๋ง๊ธฐ ํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ๋ชปํ๋๋ก ๋ช
์ํ๋ฉด ๋ฐฉ๋ฒ. ์์ ๊ธ์จ๋ฅผ ์ ๋ณด์ง ๋ชปํ๋ ์ฌ๋๋ค์ ํ๋ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ ๊ทผ์ฑ์ด ๋จ์ด์ง๋ ๋จ์ ์ด ์๋ค. initial-scale ์ด๊ธฐ ํ๋ฉด ๋ฐฐ์จmax..
[HTML/CSS] ์ค๋ฐ๊ฟ(๊ฐํ๋ฌธ์) ํ์ / ๋์น๋ ํ
์คํธ ์๋ต ๊ธฐํธ ํ์ ๋ฐฉ๋ฒ
[HTML/CSS] ์ค๋ฐ๊ฟ(๊ฐํ๋ฌธ์) ํ์ / ๋์น๋ ํ ์คํธ ์๋ต ๊ธฐํธ ํ์ ๋ฐฉ๋ฒ
2024.04.25๐ก ๋ฏธ๋ฆฝ์ ํ : textarea ํ๊ทธ์ readonly ์์ฑ์ ์ถ๊ฐํ๋ฉด ์ฝ๊ธฐ๋ง ๊ฐ๋ฅํ๊ณ ์ฐ๊ธฐ๋ ๋ถ๊ฐ๋ฅํ๋ค. ๋ก๊ทธ์ธํ์ง ์์ ์ ์ ๋ ๋๊ธ์ ์ฐ์ง ๋ชปํ๊ฒํ ๋ ์ ์ฉํ๋ค. `` ์ค๋ฐ๊ฟ ์ ์ฉํ๊ธฐ textarea ํ๊ทธ์ ์ํฐํค(๊ฐํ๋ฌธ์)๋ฅผ ๋๋ฌ ์ค๋ฐ๊ฟ์ ์ ์ฉํด๋, ์
๋ ฅํ value๋ฅผ p ํ๊ทธ ๋ฑ์ ์ถ๋ ฅํด๋ณด๋ฉด ์ค๋ฐ๊ฟ์ด ํ๋๋ ์ ์ฉ๋์ง ์๋๋ค. ๊ฐ์ฅ ๊ฐ๋จํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ํ
์คํธ๋ฅผ ํ์ํ ํ๊ทธ์ ์คํ์ผ์ white-space ์์ฑ์ ์ถ๊ฐํ๋ ๊ฒ. white-space๋ ๊ณต๋ฐฑ ๋ฌธ์๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง ๊ฒฐ์ ํ๋ ์์ฑ์ด๋ค. white-space: normal — ๊ธฐ๋ณธ๊ฐ ์ฌ๋ฌ ๊ณต๋ฐฑ : X (1๊ฐ๋ก ํ์)ๆน่ก๋ฌธ์ \n ํํ : XWrap : O white-space: nowrap — normal๊ณผ ๋์ผํ๋ wrap์ด ์๋จ ์ฌ๋ฌ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๊ฒฝ๊ณผ ์๊ฐ ํ์ / UTC / ISO 8601
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๊ฒฝ๊ณผ ์๊ฐ ํ์ / UTC / ISO 8601
2024.04.25Date ๊ฐ์ฒด ํบ์๋ณด๊ธฐ์ ๋์ค ํ์์คํฌํ์๋ฐ์คํฌ๋ฆฝํธ์์ Date ๊ฐ์ฒด๋ ์ ๋์ค ํ์์คํฌํ๋ฅผ ์ฌ์ฉํ๋ค. SNS์ ๋ณด๋ฉด “1๋ถ ์ ๊ฒ์", “๋ฐฉ๊ธ ์ ๊ฒ์" ๊ฐ์ ๊ฒฝ๊ณผ์ผ๋ก ํฌ์คํ
๋ ์ง๋ฅผ ํ์ํ๋ ๊ฒ์ ์์ฃผ๋ณผ ์ ์๋ค. ๊ฒฝ๊ณผ์ผ์ Date ๊ฐ์ฒด์ getTime() ๋ฉ์๋๋ฅผ ์ด์ฉํด ๋ณํํ ๋ฐ๋ฆฌ์ด์ ํ์ฌ ์๊ฐ์ ๋ฐ๋ฆฌ์ด ์ฐจ์ด๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํ ์ ์๋ค. getTime() ๋ฉ์๋๋ 1970๋
1์ 1์ผ 0์ 0 ๋ถ 0์ด(UTC)๋ถํฐ ํ์ฌ๊น์ง์ ์๊ฐ์ ๋ฐ๋ฆฌ์ด ๋จ์๋ก ํ์ฐํ ๊ฐ์ ๋ฐํํ๋ค. ์ด๋ฅผ ์ ๋์ค ์๊ฐ(์ ๋์ค ํ์์คํฌํ)์ผ๋ก ๋ถ๋ฅธ๋ค. 1000๋ฐ๋ฆฌ์ด(millisecond)๋ 1์ด(second)๋ค.const date = new Date();console.log(date); // Tue Jun 15 2021 15:..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ค ์ซ์, ๋ฐ์ดํฐ ์์ฑ ์์
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ค ์ซ์, ๋ฐ์ดํฐ ์์ฑ ์์
2024.04.25๋๋ค ๊ฒ์๊ธ(ํน์ ๋๊ธ)์ ๊ตฌํํ๋ค๊ณ ๊ฐ์ , ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ๋ฌ๊ฐ์ ์ ์ ์ด๋ฆ, ๋ฉ์์ง ํ
์คํธ๊ฐ ํ์ํ๋ค. ์ ์ ์ด๋ฆ์ด๋ ๋๋ค ํ
์คํธ๋ ์๋ฌธ Lorem์ฒ๋ผ ์๋ ์์ฑํด์ฃผ๋ ์ฌ์ดํธ๋ฅผ ํ์ฉํ๋ฉด ๋๋ค. 10๊ฐ ์ ๋ ๋๋ฏธ ๋ฐ์ดํฐ๋ฅผ ์์ฑํ ํ ์๋ฐ์คํฌ๋ฆฝํธ์ Math.random์ ํ์ฉํ๋ฉด ์ ์ ๋ณ๋ก ๋ค๋ฅธ ๋ฉ์์ง ํ
์คํธ๋ฅผ ์์ฑํ ์ ์๋ค. ํ์ํ ๋ฐ์ดํฐ ๋ฆฌ์คํธ์ ์ ์ด๋ฆ : ํ๊ธ ๋๋ค ์ด๋ฆ ์์ฑ๊ธฐ ์ด์ฉconst randomUser = ['์์ธํฌ', 'ํ์ ์', '์ ๊ฐ์งํ', '์ฌ์ฑํ', ...]๋ฉ์์ง ํ
์คํธ : ํ๊ธ Lorem ์ฌ์ดํธ์ธ ๊ฐ์ธ๋ค ํน์ ํ๊ธ์
์จ ์ด์ฉconst randomMessage = ['๊ด์ผ์์ ๋ฌด์์ ๋ณด๋ด๋...', '...', '...', ...]์์ฑ์ผ : new Date() ์ด์ฉ ๋๋ค ์ซ์ ์์ฑ ํจ์..
[JS] ์บ๋ฒ์ค Canvas ๋ํ ํ๋ ์ถ์ ํ ์์ ์กฐ์ ํ๊ธฐ
[JS] ์บ๋ฒ์ค Canvas ๋ํ ํ๋ ์ถ์ ํ ์์ ์กฐ์ ํ๊ธฐ
2024.04.24๋ํ ์ฌ์ด์ฆ ์กฐ์ ๋ฉ์๋ctx.scale(x, y) : ๋ํ ํฌ๊ธฐ ํ๋/์ถ์. ์บ๋ฒ์ค์์ 1 ๋จ์๋ 1ํฝ์
. scale(2, 2)๋ ํ๋์ ๋จ์๋ฅผ 2ํฝ์
๋ก ํ๋(์ขํ ์ฌ์ด์ ๊ฐ๊ฒฉ ์ฆ๊ฐ) ctx.translate(x, y) : ์บ๋ฒ์ค์ ์์ ์ด๋. ๊ธฐ๋ณธ๊ฐ์ ์ผ์ชฝ ์ข์๋จ (0, 0) ctx.rotate(angle) : ๋ํ์ ๋ผ๋์(angle) ๋จ์ ๋งํผ ์๊ณ ๋ฐฉํฅ์ผ๋ก ํ์ . ํญ์ ์บ๋ฒ์ค ์์ ์ด ํ์ ์ ์ค์ฌ ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() ์ผ๊ด ์ ์ฉํ๋ ๋ฉ์๋์ด์ ๋ณํ ๊ฒฐ๊ณผ ๊ฐ์ ์ด์ด์ ์ํ์ด๊ธฐ ์ํ์์ transform(1.2, 0, 0, 1.2, -30, -30)..
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
2024.04.24์บ๋ฒ์ค ๊ธฐ๋ณธ ์ธํ
for React๐ก ์บ๋ฒ์ค๋ HTML ์์ ์ค ํ๋๋ก ์คํฌ๋ฆฝํธ ์ธ์ด๋ก ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ๋๋ฐ ์ฌ์ฉํ๋ค. canvas๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ ์บ๋ฒ์ค context์ DOM์ผ๋ก ์ ๊ทผํด์ผ ํ๋ค. React์์ useRef()๋ฅผ ์ฌ์ฉํด์ Ref ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ์ ๊ทผํ๊ณ ์ถ์ DOM์ ref ๊ฐ์ผ๋ก ์ค์ ํด์ฃผ๋ฉด ๋๋ค. ๊ทธ๋ผ Ref ๊ฐ์ฒด์ .current ๊ฐ์ ํด๋น DOM์ ๊ฐ๋ฆฌํจ๋ค. ์บ๋ฒ์ค ์๋ฆฌ๋จผํธ ์์ฑ ๋ฐ useRef ์ค์ import React, { useRef, useEffect, useState } from 'react';import styled from 'styled-components';const Canvas = () => { const canvasRef = useRef(null); // ์๋ต ..
[TS] ํ์
์คํฌ๋ฆฝํธ - ํ์
์ถ๋ก / ๋จ์ธ / ๊ฐ๋
[TS] ํ์ ์คํฌ๋ฆฝํธ - ํ์ ์ถ๋ก / ๋จ์ธ / ๊ฐ๋
2024.04.24ํ์
์ถ๋ก ๊ธฐ๋ณธ๐ก ํ์
์ถ๋ก ์ด๋ ํ์
์คํฌ๋ฆฝํธ๊ฐ ์ฝ๋๋ฅผ ํด์ํด ๋๊ฐ๋ ๋์์ ์๋ฏธํ๋ค. ์๋์ฒ๋ผ x ์ ๋ํ ํ์
์ ๋ฐ๋ก ์ง์ ํ์ง ์๋๋ผ๋ ๋ณ์ x์ ์ซ์ 3์ ํ ๋นํ์ผ๋ฏ๋ก number ํ์
์ผ๋ก ๊ฐ์ฃผํ๋ค. ์ด์ฒ๋ผ ๋ณ์๋ฅผ ์ ์ธํ๊ฑฐ๋ ์ด๊ธฐํํ ๋ ํ์
์ด ์ถ๋ก ๋๋ค. ๋ณ์, ์์ฑ, ํจ์ ์ธ์์ ๊ธฐ๋ณธ ๊ฐ, ํจ์ ๋ฐํ ๊ฐ ๋ฑ์ ์ค์ ํ ๋๋ ํ์
์ถ๋ก ์ด ์ผ์ด๋๋ค.let x = 3; // ๋ณ์๋ฅผ ์ ์ธํ๊ณ ํ ๋นํจ์ผ๋ก์ x๋ number ํ์
์ด๋ผ๋ ์ถ๋ก ์ด ์ผ์ด๋ฌ๋ค. ์๋ ์ฝ๋์์ DetailedDropdown ์ธํฐํ์ด์ค๋ extends ํค์๋๋ฅผ ์ด์ฉํ์ผ๋ฏ๋ก Dropdown ์ธํฐํ์ด์ค์ ์์ฑ๋ ๊ฐ์ง๋ค. DetailedDropdown์ ํ์
์ DetailedDropdown์ ์๋ ๋ก ๋์ด๊ฐ ํ, ๋ค์ Dropdown ์ธํฐํ..
[TS] ํ์
์คํฌ๋ฆฝํธ - ์ ๋ค๋ฆญ, ํ๋ก๋ฏธ์ค
[TS] ํ์ ์คํฌ๋ฆฝํธ - ์ ๋ค๋ฆญ, ํ๋ก๋ฏธ์ค
2024.04.24์ ๋ค๋ฆญ ์๊ฐ์ ๋ค๋ฆญ์ ํ์
์ ํจ์์ ํ๋ผ๋ฏธํฐ์ฒ๋ผ ์ฌ์ฉํ๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ ๋ค๋ฆญ์ ์ฌ์ฌ์ฉ์ฑ์ด ๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋ ์์ฃผ ์ฌ์ฉํ๋ค. ํ ๊ฐ์ง ํ์
๋ณด๋ค ์ฌ๋ฌ๊ฐ์ง ํ์
์์ ๋์ํ๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ ๋ ์ ์ฉํ๋ค. ์ ๋ค๋ฆญ ๊ธฐ๋ณธ ๋ฌธ๋ฒ๐ก T๋ Type parameter์ ์ฝ์๋ก ๊ด์ฉ์ ์ผ๋ก ์ฌ์ฉํ๋ค. ๊ผญ T๋ฅผ ์ฌ์ฉํด์ผํ๋๊ฑด ์๋๋ค. ์๋ ํจ์์ textํ๋ผ๋ฏธํฐ์ hi 10 true ๋ฑ ์ด๋ค ํ์
์ ๊ฐ์ด ๋ค์ด๊ฐ๋๋ผ๋ ๊ทธ๋๋ก ๋ฐํํ๋ค. ์ด๋ ๊ฒ ๋ชจ๋ ํ์
์ ๋ฐ์ ์ ์๋ ์ด์ ๋ ํ์
์ ๋ฐ๋ก ์ง์ ํ์ง ์์๊ธฐ ๋๋ฌธ์ ์๋ฌต์ ์ผ๋ก any ํ์
์ด ๋ผ์ ๊ทธ๋ฐ ๊ฒ์ด๋ค.function getText(text) { return text;} ์๋ ํจ์๋ ์ ๋ค๋ฆญ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ด ์ ์ฉ๋ ํํ๋ค. ์ ํจ์์ ๋น์ทํ๊ฒ ์ด๋ค ํ์
์ด๋ ํ๋ผ๋ฏธํฐ๋ก..
[TS] ํ์
์คํฌ๋ฆฝํธ - ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ
[TS] ํ์ ์คํฌ๋ฆฝํธ - ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ
2024.04.24ํ์
์คํฌ๋ฆฝํธ๋?ํ์
์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์
์ ๋ถ์ฌํ ์ธ์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ๋ ์ธ์ด๋ผ๊ณ ๋ณผ ์ ์๋ค. ํ์
์คํฌ๋ฆฝํธ๋ฅผ ๋ธ๋ผ์ฐ์ ์์ ์คํํ๋ ค๋ฉด ํ์ผ์ ํ ๋ฒ ๋ณํํด์ค์ผ ํ๋ค. ์ด ๋ณํ ๊ณผ์ ์ ์ปดํ์ผ(์ ํํ๋ ํธ๋์คํ์ผ๋ง)์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.์ฐธ๊ณ ๋ก Babel์ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ต์ ๋ฌธ๋ฒ์ ์ต๋ํ ๋ง์ ๋ธ๋ผ์ฐ์ ์์ ํธํํ ์ ์๋๋ก ๋ณํํด์ฃผ๋ ๋๊ตฌ๋ค. ์ ์จ์ผ ํ ๊น?์๋ 2๊ฐ์ง ๊ด์ ์์ JS ์ฝ๋ ํ์ง๊ณผ ๊ฐ๋ฐ ์์ฐ์ฑ์ ๋์ผ ์ ์๋ค.์๋ฌ ์ฌ์ ๋ฐฉ์ง์ฝ๋ ๊ฐ์ด๋ ๋ฐ ์๋ ์์ฑ(์์ฐ์ฑ ํฅ์) ์๋ฌ ์ฌ์ ๋ฐฉ์ง์๋ ๋ ์ฝ๋ ๋ชจ๋ ๋ ์ซ์์ ํฉ์ ๊ตฌํ๋ ํจ์๋ค. ์๋ ์๋ฐ์คํฌ๋ฆฝํธ, ์๋๋ ํ์
์คํฌ๋ฆฝํธ๋ก ์์ฑํ๋ค. ํจ์ ํธ์ถ ์ ์ซ์๊ฐ ์๋ ๋ฌธ์์ด์ ๋ฃ์ผ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ฌธ์์ด์ ๊ฒฐํฉํด์ ์ ํ ๋ค๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค. ์๋..