๐ช Programming
[React] Proxy๋ฅผ ํ์ฉํ Custom Lazy Import
[React] Proxy๋ฅผ ํ์ฉํ Custom Lazy Import
2024.05.24React.lazy()React์์ ์ฝ๋ ๋ถํ ์ ๋ชฉ์ ์ผ๋ก(Chunk ๋ถ๋ฆฌ) ์ปดํฌ๋ํธ๋ฅผ Dynamic Importํ ๋ React.lazy() ํจ์๋ฅผ ์ฌ์ฉํ๋ค. ์ปดํฌ๋ํธ๊ฐ ํ์ํ ์์ ์๋ง ๋ก๋๋๊ธฐ ๋๋ฌธ์, ๋ก๋ฉ ์ค ํ์ํ ์ปดํฌ๋ํธ๋ ๋ฉ์์ง๋ ๋ฅผ ํ์ฉํ์ฌ ์ค์ ํ๋ค. ์ฌ๋ฌ ๊ฐ์ lazy ์ปดํฌ๋ํธ๋ฅผ ๋ฌถ์ด์ fallback์ ํ ๋ฒ์ ํ์ํ ์๋ ์๋ค. ๋ํ, React.lazy()๋ก ๋ถ๋ฌ์ค๋ ค๋ ์ปดํฌ๋ํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก default export๋ฅผ ์ฌ์ฉํด์ ๋ด๋ณด๋ด์ผ ํ๋ค.// Child.tsxexport default function Child() { /* ... */ }// Parent.tsximport { Suspense } from 'react';// ์ปดํฌ๋ํธ ๋ฐ๋์์ ํธ์ถํ๋ฉด ์ ์ ์๋ํ์ง ์์ผ๋ฏ๋ก ์ฃผ์con..
[Vite] ์ด๊ธฐ ๋ก๋ ์๊ฐ ๊ฐ์ ์ ์ํ Vendor Chunk ์ชผ๊ฐ๊ธฐ
[Vite] ์ด๊ธฐ ๋ก๋ ์๊ฐ ๊ฐ์ ์ ์ํ Vendor Chunk ์ชผ๊ฐ๊ธฐ
2024.05.24Introํ๋ก ํธ์๋ ์์ญ์์ .jsx, .tsx, .vue ๋ฑ์ ํ์ฅ์๋ฅผ ๊ฐ์ง ํ์ผ์ ์ฌ์ฉํ์ง๋ง ๋ธ๋ผ์ฐ์ ๋ ์ด๋ฅผ ์ดํดํ์ง ๋ชปํ๋ค. ๋๋ฌธ์ ์ด๋ฌํ ํ์ผ๋ค์ ๋ชจ๋ .js ํ์ผ๋ก ๋ณํํด์ผ ํ๋ค. ๋ชจ๋ ํ์ผ์ ํ๋์ .js ํ์ผ๋ก ๋ง๋ค ์ ์์ง๋ง ์ด ๋ฐฉ์์ ์ฑ๋ฅ์ ๋ถ์ ์ ์ธ ์ํฅ์ ์ค ์ ์์ผ๋ฏ๋ก ๊ถ์ฅ๋์ง ์๋๋ค. ๋์ ์ฌ๋ฌ .js ํ์ผ(chunks)๋ก ๋ณํํ ๋ค ํ์ํ ์๊ฐ์๋ง ๋ก๋(์ง์ฐ ๋ก๋ฉ)ํ๋ ๊ฒ ์ฑ๋ฅ์ ๋ ์ ๋ฆฌํ๋ค. ํนํ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ์ค์ผ ๋ ์ ์ฉํ๋ค. Vite, Webpack ๊ฐ์ ๋ฒ๋ค๋ฌ๋ ๋ณดํต index, vendor ๋ ๊ฐ์ ๋ฉ์ธ chunk๋ฅผ ์์ฑํ๋ค. ์ฐธ๊ณ ๋ก Vite 2.9 ๋ฒ์ ๋ถํด Production ์ข
์์ฑ ๋ชจ๋์ด index chunk์ ํฌํจ๋๋ค.index : App.tsx์ ๊ฐ์ ์ดํ๋ฆฌ์ผ..
[Markdown] GitHub ๋งํฌ๋ค์ด ์์ฑ ๊ฟํ ๋ชจ์
[Markdown] GitHub ๋งํฌ๋ค์ด ์์ฑ ๊ฟํ ๋ชจ์
2024.05.23Admonition Box์ธ์ฉ๊ตฌ(Blockquote)๋ฅผ ํ์ฉํด์ ์ค์ํ ์ ๋ณด๋ฅผ ๊ฐ์กฐํ ์ ์๋ค. NOTE, IMPORTANT, WARNING ์ธ ๊ฐ์ง ํ์
์ ์ง์ํ๋ฉฐ, ๊ฐ ํ์
์ ํด๋นํ๋ ์์ด์ฝ๊ณผ ์ปฌ๋ฌ๋ก ์๋ ๋ณ๊ฒฝ๋๋ค. ์ฐธ๊ณ ๋ก README.md ๋งํฌ๋ค์ด ํธ์ง๊ธฐ์์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ(Preview)๋ก ํ์๋์ง ์์ง๋ง ์ ์ฅ ํ์ ์ ์์ ์ผ๋ก ํ์๋๋ค.> [!NOTE] > Highlights information that users should take into account, even when skimming.> [!IMPORTANT] > Crucial information necessary for users to succeed.> [!WARNING] > Critical content demanding immed..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ES2023 ๋ถ๋ณ์ฑ ๋ฐฐ์ด ๋ฉ์๋ ํบ์๋ณด๊ธฐ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ES2023 ๋ถ๋ณ์ฑ ๋ฐฐ์ด ๋ฉ์๋ ํบ์๋ณด๊ธฐ
2024.05.23Mutable / ImmutableArray.sort(), Array.reverse(), Array.splice() ๊ฐ์ ๋ฐฐ์ด ๋ฉ์๋๋ ์๋ณธ ๋ฐฐ์ด์ ๋ณ๊ฒฝํ๋ค. ๊ฐ์ฒด(๋ฐฐ์ด) ์์ฒด๋ฅผ ๋ณ๊ฒฝํ๋ฉด ์์ํ์ง ๋ชปํ ์ฌ์ด๋ ์ดํํธ๊ฐ ๋ฐ์ํ ์ ์๋ค. ์๋ ์ฝ๋์์ reversed๋ ๊ฒฐ๊ณผ์ ์ผ๋ก regions ๋ฐฐ์ด์ ๊ฐ๋ฆฌํค๊ณ ์๋ค. ์ฆ, regions reversed ์ด ๋์ ๋์ผํ๋ค.const regions = ['Seoul', 'Shanghai', 'Tokyo'];const reversed = regions.reverse();console.log(regions); // ['Tokyo', 'Shanghai', 'Seoul']console.log(reversed); // ['Tokyo', 'Shanghai', 'Seoul..
[JS] ์์ด ์ถ์ฝ์ด ๊ด๋ จ ์ ํธ๋ฆฌํฐ ํจ์ ๋ชจ์
[JS] ์์ด ์ถ์ฝ์ด ๊ด๋ จ ์ ํธ๋ฆฌํฐ ํจ์ ๋ชจ์
2024.05.22์ฐธ๊ณ ๋ด์ฉ์์ด์์ Contraction(์ถ์ฝ/๋จ์ถํ)๊ณผ Abbreviation(์ฝ์ด/์ถ์ฝ์ด)๋ ๋ค๋ฅธ ๊ฐ๋
์ด๋ค. Contraction: ๋ ๋จ์ด๋ฅผ ํ๋๋ก ์ค์ด๊ธฐ ์ํด ์ผ๋ถ ๋ฌธ์๋ฅผ ์๋ตํ๊ณ ์ํฌ์คํธ๋กํผ๋ก ๋์ฒดํ ํํ ์: I will → I'll, do not → don'tAbbreviation: ๋จ์ด๋ ๊ตฌ์ ์ผ๋ถ ๋ฌธ์๋ง์ ์ฌ์ฉํ์ฌ ์ค์ธ ํํ. ์ํฌ์คํธ๋กํผ๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค.์: United States → U.S., Doctor → Dr. ์ถ์ฝ์ ๋ถ๋ฆฌ ๊ธฐ์ค์์ ์ ์ธํ๋ ์ ๊ท์๋จ์ด ๋ฌธ์๊ฐ ์๋ ๋ฌธ์์ด ๊ธฐ์ค์ผ๋ก ๋ถ๋ฆฌ// ๋จ์ด ๋ฌธ์๊ฐ ์๋ ๋ฌธ์์ด๊ณผ ์ผ์นconst NonWordCharPattern = /(\W)/g;const sentence = "I'll make coffee and I've done my ho..
[Algorithm] ๋ณต์กํ DOM ์์ ๋ก ๋ณด๋ DFS ํ์ ์๊ณ ๋ฆฌ์ฆ
[Algorithm] ๋ณต์กํ DOM ์์ ๋ก ๋ณด๋ DFS ํ์ ์๊ณ ๋ฆฌ์ฆ
2024.05.22๋ชฉํ์๋ DOM ๊ตฌ์กฐ์์ ๊ฐ์ฅ ์์ชฝ ์์๋ถํฐ ์์ํด ๋ถ๋ชจ ์์๋ก ๊ฐ ์๋ก ์ค์ฒฉ ๋ ๋ฒจ์ด 1์ฉ ๋์ด๋๊ณ , class์ ๋์ํ๋ dataset์ ์ค์ฒฉ ๋ ๋ฒจ ๊ฐ์ ํ ๋นํด์ผ ํ๋ค. ์๋ฅผ๋ค์ด class๊ฐ "clause" ์ด๊ณ , ํด๋น ์์์ ์ค์ฒฉ ๋ ๋ฒจ์ด 2๋ผ๋ฉด data-clause-lv="2" ์์ฑ์ ํ ๋นํ๋ค. Hello ; ๋ง์ฝ ์์ ์์๊ฐ 2๊ฐ ์ด์์ผ ๋ ์์ ์์๋ค ์ค ์ค์ฒฉ ๋ ๋ฒจ์ด ๊ฐ์ฅ ๋์ ๊ฐ + 1์ด ๋ถ๋ชจ ์์์ ์ค์ฒฉ ๋ ๋ฒจ์ด ๋๋ค. ์๋ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก 1๋ฒ์งธ ์์์ ์ค์ฒฉ ๋ ๋ฒจ(data-word-lv="1") ๋ณด๋ค, 2๋ฒ์งธ ์์์ ์ค์ฒฉ ๋ ๋ฒจ(data-phrase-lv="2")์ด ๋ ๋์ผ๋ฏ๋ก, ๋ถ๋ชจ ์์์ ์ค์ฒฉ ๋ ๋ฒจ์ 3์ด ๋๋ค(data-clause-lv="3"). ..
[Algorithm] ๋ฐ์ดํฐ ์ถ๊ฐ, ์ญ์ , ์ ๋ ฌ๋ก ๋ณด๋ BFS / DFS ํ์ ์๊ณ ๋ฆฌ์ฆ
[Algorithm] ๋ฐ์ดํฐ ์ถ๊ฐ, ์ญ์ , ์ ๋ ฌ๋ก ๋ณด๋ BFS / DFS ํ์ ์๊ณ ๋ฆฌ์ฆ
2024.05.21์์ ๋ฐ์ดํฐ ๋จ์ด ํน์ ๋ฌธ์ฅ๋ถํธ(' ์ํฌ์คํธ๋กํผ ์ ์ธ)๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ถ๋ฆฌํ ํ ํฐ ์ธ๋ฑ์ค ์ ๋ณด๊ฐ ๋ด๊ธฐ๋ Part ๊ฐ์ฒด๊ฐ ์๋ค. ์ด Part ๊ฐ์ฒด๋ child ๋ฐฐ์ด์ ๊ฐ์ง๋ฉฐ, child ๋ฐฐ์ด์ ๊ฐ ์์์ธ Part๋ ๋ถ๋ชจ Part์ ํ ํฐ ์ธ๋ฑ์ค ๋ฒ์ ๋ด์ ์ธ๋ฑ์ค๋ฅผ ๊ฐ์ง๋ค. ์๋ฅผ๋ค์ด ๋ถ๋ชจ Part์ ํ ํฐ ์ธ๋ฑ์ค ๋ฒ์๊ฐ 2~13์ด๋ผ๋ฉด ์์ Part์ ํ ํฐ ์ธ๋ฑ์ค๋ 3~13(3~13, 4~13, ...) ํน์ 2~12(2~12, 2~11, ...) ๋ฒ์๋ฅผ ๊ฐ์ง๋ค.[ // parts ๋ฐฐ์ด { id: 0, // part begin: 2, end: 13, kc: [{ id: 'kc-1', /* ... */ }], child: [ // parts ๋ฐฐ์ด { id: 1, //..
[React/JS] ๋๋๊ทธํ ๋ฌธ์์ด ๋ถ๋ฆฌ(๋ฉํ)ํ๊ธฐ / Selection API
[React/JS] ๋๋๊ทธํ ๋ฌธ์์ด ๋ถ๋ฆฌ(๋ฉํ)ํ๊ธฐ / Selection API
2024.05.21์๋์ ๊ฐ์ ๋ฌธ์์ด์ด ์์ ๋ ๋ง์ฐ์ค๋ก ๋๋๊ทธํด์ ํ
์คํธ๋ฅผ ์ ํํ ๋๋ง๋ค ํ๊ทธ๋ก ๊ฐ์ธ๋๋ก ๊ตฌํํ๋ ๊ฒ ๋ชฉํ.Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim ๋๋๊ทธํ ๋ฌธ์์ด ๋ฉํโถ ๋ง์ฐ์ค ํด๋ฆญ/ํ
์คํธ ๋๋๊ทธ/ํด๋ฆญ ํด์ → onMouseUp ์ด๋ฒคํธ ํธ์ถ โท ์ ํํ ์์ญ์ ๋ํ Selection ๊ฐ์ฒด ํ๋const selection =..
[React] ๋ฆฌ์กํธ ๋์์ฑ ๋ ๋๋ง(Concurrent) ํบ์๋ณด๊ธฐ
[React] ๋ฆฌ์กํธ ๋์์ฑ ๋ ๋๋ง(Concurrent) ํบ์๋ณด๊ธฐ
2024.05.20์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๋ UI๋ ์ฌ๋ฌ ๋ถ๋ถ์ผ๋ก ๊ตฌ์ฑ๋์ด ์๋ค. ์ผ๋ฐ์ ์ผ๋ก ํผ ์
๋ ฅ ํ๋๋ ์ํธ์์ฉ์ ์ฆ๊ฐ์ ์ผ๋ก ์๋ตํ์ง๋ง, ๋ง์ ์์ ํํฐ๋ง ๋ชฉ๋ก ๊ฐ์ ๋ถ๋ถ์ ์๋ตํ๋ ๋ฐ ์ค๋ ์๊ฐ์ด ์์๋ ์ ์๋ค. React๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋๊ธฐ์ ์ธ ๋ฐฉ์์ผ๋ก ๋ ๋๋งํ๋๋ฐ, UI์ ๋๋ฆฐ ์์
(ํํฐ๋ง ๋ชฉ๋ก ๋ฑ)์ด ๋ค๋ฅธ ๋น ๋ฅธ ์์
(์
๋ ฅ ํผ ๋ฑ)์ ์ฐจ๋จํ์ฌ ์๋ต์ด ๋๋ ค์ง๋ ํ์์ด ๋ฐ์ํ๋ค. ๐ก Render-blocking: Concurrent ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ์์ ๋ React๋ ์ปดํฌ๋ํธ๋ฅผ ๋๊ธฐ์ ์ผ๋ก ๋ ๋๋งํ๋ฉฐ, ๋ ๋๋ง์ ์์ํ๋ฉด ์์ธ๊ฐ ์๋ ์ด์ ๋ ๋๋ง์ ์ค๋จํ ์ ์๋ค. ์ฆ, ๋ ๋๋ง์ด ๋๋์ผ๋ง ๋ค๋ฅธ ์์
์ ์ํํ ์ ์๋ค. React 18 ๋ฒ์ ์ ๊ณต๊ฐํ Concurrent ๊ธฐ๋ฅ์ ์ด๋ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๊ฐ๋ฐ๋๋ค. Concur..
[Express] req.query vs req.params
[Express] req.query vs req.params
2024.05.19Path Parameter: /books/888 (888 ๋ถ๋ถ์ด ํ๋ผ๋ฏธํฐ)Query Parameter: /search?sort=price (sort=price ๋ถ๋ถ์ด ์ฟผ๋ฆฌ) ์ฟผ๋ฆฌ ์คํธ๋ง(Query String)์ /search?sort=price ์ฃผ์์์ ? ๋ฌผ์ํ ์ดํ์ ๋์ค๋ ์ ์ฒด ๋ฌธ์์ด์ ์๋ฏธํ๊ณ , ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ(Query Parameter)๋ ์ฟผ๋ฆฌ ์คํธ๋ง ๋ด์ key=value ์์ ์๋ฏธํ๋ค. req.params// ์์ฒญ URL : /books/888router.get('/books/:id', (req, res, next) => { console.log(req.params); // { id: '888' }}); req.query// URL-encoded ๋ฐ์ดํฐ ํ์ฑ์ ์ฃผ๋ก ํผ ๋ฐ์ดํฐ๋ฅผ ์ ์ถํ ..
[JS] ํจ์ํ / ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ๋ฎ์ ๊ผด
[JS] ํจ์ํ / ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ๋ฎ์ ๊ผด
2024.05.19์ปค๋งํจ์ํ ํ๋ก๊ทธ๋๋ฐ์์ ์์ฃผ ์ฌ์ฉํ๋ ์ปค๋ง ํจ์๋ n๊ฐ์ ์ธ์๋ฅผ ๋ฐ๋ ๋์ n๊ฐ์ ํจ์๋ฅผ ๋ง๋ค์ด์ ํ๋์ ์ธ์๋ง ๋ฐ๋๋ก ๋ง๋๋ ํจํด์ด๋ค. ์ปค๋ง์ ์ฌ์ฉํ๋ฉด ๋ณต์กํ ํจ์๋ฅผ ๊ฐ๊ฒฐํ๊ฒ ๋ง๋ค๊ณ , ์ฌ์ฌ์ฉํ ์ ์๋ ํจ์๋ก ๋ถ๋ฆฌํ ์ ์๋ค. ๋ํ, ์ง์ฐ ํ๊ฐ(ํ์ํ ๋๊น์ง ๊ณ์ฐ/ํ๊ฐ๋ฅผ ๋ฏธ๋ฃจ๋ ์ ๋ต)๋ฅผ ํตํด ์ ์ฐํ ์์
์ ์ํํ ์ ์๋ค.// ์ผ๋ฐ ํจ์const adder = (x, y) => x + y;adder(100, 50); // 150// ์ปค๋ง ํจ์const adder = (x) => (y) => x + y;const add100 = adder(100);add100(50); // 150 ๊ฐ์ฒด ์งํฅ / ์ผ๋ฐ ํจ์ / ํจ์ํ ๋น๊ต๐ก ๊ฐ์ฒด ์งํฅ / ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ๊ฐ๊ฐ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก ์์์ ์ธ ์ปจํ
์คํธ๋ฅผ ๊ฐ๋..
[TS] TypeScript ํ์
์คํฌ๋ฆฝํธ Infer ํค์๋ ํ์ฉํ๊ธฐ
[TS] TypeScript ํ์ ์คํฌ๋ฆฝํธ Infer ํค์๋ ํ์ฉํ๊ธฐ
2024.05.19ํ์
์คํฌ๋ฆฝํธ infer๋ ํ์
์ ์ถ๋ก ํ๋ ๋ฐ ์ฌ์ฉํ๋ ํค์๋๋ค. ๋ฐฐ์ด ์์ ํ์
, ํจ์ ํ๋ผ๋ฏธํฐ ํ์
, ํจ์ ๋ฐํ ํ์
๋ฑ ํน์ ๋ฌธ๋งฅ์ ํ์
์ถ์ถ์ด ํ์ํ ๋ infer๋ฅผ ํ์ฉํ ์ ์๋ค.๊ธฐ๋ณธ ๋ฌธ๋ฒ : T extends infer U ? U : T — U๊ฐ ์ถ๋ก ๊ฐ๋ฅํ ํ์
์ด๋ฉด U ๋ฆฌํด, ์๋๋ฉด T ๋ฆฌํด infer๋ ํ์
๊ตฌํ ์์ญ(ํ ๋น ์ฐ์ฐ์ ์ฐ์ธก)์ ์กฐ๊ฑด๋ถ ํ์
(extends ์ )์์๋ง ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, TS ์์ง์ด ํ์
์ ์ถ๋ก ํ๊ณ ๋ณ์(์ ๋ค๋ฆญ ํ์
)์ ํ ๋นํ๋ค. ํ ๋น๋ ๋ณ์๋ ์กฐ๊ฑด๋ถ ํ์
์ true ๋ถ๊ธฐ์์๋ง ์ฌ์ฉํ ์ ์๋ค.// Error! 'infer' declarations are only permitted in the 'extends' clause of a conditional type.(..