๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€

 (70)
โš›๏ธ ๋ฆฌ์•กํŠธ ํŒจํ„ด : Compound Components (ํ•ฉ์„ฑ ์ปดํฌ๋„ŒํŠธ) โš›๏ธ ๋ฆฌ์•กํŠธ๋กœ ๊ฐœ๋ฐœํ•˜๋‹ค ๋ณด๋ฉด state ๊ด€๋ฆฌ๋ฅผ ์ž˜ํ•˜๊ธฐ ์œ„ํ•ด ์ฃผ์˜๋ฅผ ๋งŽ์ด ํ•˜๊ณค ํ•œ๋‹ค.๐Ÿ—๏ธ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ํƒ€๊ณ  ๋‚ด๋ ค ๊ฐ€๋ฉฐ ์‚ฌ์šฉ์ฒ˜๊นŒ์ง€ ํ”„๋กญ์Šค๋กœ ์ „๋‹ฌํ•ด์•ผ ํ•˜๋‹ค ๋ณด๋ฉด context api๋‚˜ ๋ฆฌ๋•์Šค ๋“ฑ์˜ ๋„๊ตฌ๋“ค๋„ ์ข…์ข… ํ™œ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ๋ฐฉ๋ฒ•๋“ค์€ ์ฝ”๋“œ๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ํ•˜๊ฑฐ๋‚˜ ์ข€ ๊ณผ๋„ํ•œ ์ ‘๊ทผ์ผ ๋•Œ๊ฐ€ ์žˆ๋‹ค.๐Ÿ”… ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ฆฌ์•กํŠธ ์ž์ฒด์˜ ๊ธฐ๋Šฅ์œผ๋กœ๋„ ํ”„๋กญ์Šค ์ „๋‹ฌ์„ ํšจ์œจ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋“ค์ด ์žˆ๋Š”๋‹ค. ๋จผ์ € ์ปดํŒŒ์šด๋“œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ• ๋งŒํ•œ ๋ฌธ์ œ ์ƒํ™ฉ์ธ prop drilling๊ณผ ๋ฆฌ์•กํŠธ ๋‚ด๋ถ€์ ์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋“ค์ธ context api์™€ ์ปดํŒŒ์šด๋“œ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด์ž.๐Ÿช› Prop drilling"drilling"์ด๋ผ๋Š” ๋ง์—์„œ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๋“ฏ์ด ๋“œ๋ฆด๋กœ ๊ตฌ๋ฉ์„ ๋šซ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์•„๋ฌด๋Ÿฐ ๊ด€๊ณ„๋„..
[Jest + RTL (next/link)] TypeError: Cannot read properites of null (reading 'useContext') ft. jest.mock ํ…Œ์ŠคํŠธ ๋„์ž… ๊ณ ๊ตฐ๋ถ„ํˆฌ ์ค‘.. ํ…์ŠคํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž˜ ๋Œ์•„๊ฐ€๋Š”๋ฐ ํ…์ŠคํŠธ๋ฅผ ๊ฐ์‹ธ์ฃผ๋Š” ๋งํฌ ์ปดํฌ๋„ŒํŠธ๋Š” ํ…Œ์ŠคํŠธ ์ž์ฒด๊ฐ€ ์•ˆ๋์—ˆ๋‹ค.๊ทธ๋Ÿฌ๋‹ค UnstyledLink ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ณด๋‹ˆ next/link ์‚ฌ์šฉ๋•Œ๋ฌธ์ธ๊ฐ€ ํ•ด์„œ ๊ฒ€์ƒ‰์„ ํ•˜๋‹ˆ mock์„ ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ–ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋”๋‹ˆ ์ž˜ ๋Œ์•„๊ฐ„๋‹ค.import "@testing-library/jest-dom";import "@testing-library/jest-dom/jest-globals";import { render, screen } from "@testing-library/react";import UnstyledLink, { LinkProps } from "../_link";////////////////////////////////////// ๐Ÿ’– ..
ํ† ์Šคใ…ฃSLASH 23 - ๋ˆ„๊ตฌ๋‚˜ ์“ธ ์ˆ˜ ์žˆ๋Š” ์ ‘๊ทผ์„ฑ ๋†’์€ ํ† ์Šค ๋งŒ๋“ค๊ธฐ ์ด์ „์— ์‚ดํŽด๋ดค๋˜ ํ† ์Šค ๊ธ€๋“ค ๐Ÿ‘‡ 2024.07.05 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - ํ† ์Šคใ…ฃSLASH 23 - ํผ๋„ : ์Ÿ์•„์ง€๋Š” ํŽ˜์ด์ง€ ํ•œ ๋ฐฉ์— ๊ด€๋ฆฌํ•˜๊ธฐ (TOSH | SLASH 23 - Funnel Pattern : Organizing an overflow of pages at once)2024.07.08 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € ( ft. ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €์˜ ๊ณผ๊ฑฐ, ํ† ์Šค์˜ ์„ ํƒ, ๊ทธ๋ฆฌ๊ณ  ๋ฏธ๋ž˜)[ ๊ด€๋ จ ๊ธ€ ]2024.07.11 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - ๋””์ž์ธ ์‹œ์Šคํ…œ 101 : ๋””์ž์ธ ์‹œ์Šคํ…œ์ด๋ž€?๐Ÿ—ฃ๏ธ ์–ด๋‘ ์†์˜ ๋Œ€ํ™”๋ผ๋Š” ์ฒดํ—˜ํ˜• ์ „์‹œ๊ฐ€ ์žˆ๋‹ค. ๋ช‡ ๋‹ฌ ์ „ ์ „์‹œ๋ฅผ ๊ฐ”๋‹ค ์™”๋Š”๋ฐ ์Šคํฌ์ผ๋Ÿฌ ์—†์ด ์ด์•ผ๊ธฐ๋ฅผ ํ•˜์ž๋ฉด, ์‹œ๊ฐ์ ์ธ ์ •๋ณด๊ฐ€ ์—†์„ ๋•Œ ๋‚ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋ฌด๋ ฅํ•œ ์ง€ ๊นจ๋‹ซ๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค. ์š”์ฆ˜ ์ •๋ณด๋ฅผ..
[jest + rtl + monorepo + next + ts]SyntaxError : Unexpected token '<' (ft. "jsx": "react-jsx") ํ•ด๋‹น ์—๋Ÿฌ ํ•ด๊ฒฐ ๋ฐฉ์•ˆ์€ ๋‹ค์Œ์˜ ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ๋‹ค๋ฃน๋‹ˆ๋‹ค.package mangerpnpm: "@9.0.0"enginesnode: ">=20"dependenciesโœš "classnames": "^2.5.1"โœš  "next": "^14"โœš "react": "^18.3"โœš  "react-dom": "^18.3"dev dependenciesโœš "@jest/globals": "^29.7.0" โœš "@testing-library/jest-dom": "^6.4.8"โœš "@testing-library/react": "^16.0.0"โœš "@types/jest": "^29.5.12"โœš "@types/node": "^20"โœš "@types/react": "^18.3.3"โœš  "@types/react-dom": "^18.3..
Data Structures & Algorithms with Javascript : Advanced Algorithms [์ด์ „ ๊ธ€]2024.07.29 - [๐Ÿค– data structures & algorithms] - Data Structures & Algorithms with Javascript : Searching Algorithms Data Structures & Algorithms with Javascript : Searching Algorithms[์ด์ „๊ธ€] 2024.07.28 - [๐Ÿค– data structures & algorithms] - Data Structures & Algorithms with Javascript : Sorting Algorithms (Advanced) Data Structures & Algorithms with Javascript : Sorting Algorithms (Advanced)..
CI/CD : github action no triggered when pushing to branch [์ด์ „ ๊ธ€]2024.07.16 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป dev] - [ turborepo ์„ค์ •] storybook Chromatic CLI ์œผ๋กœ ๋ฐฐํฌํ•˜๋Š” ๋ฒ• [ turborepo ์„ค์ •] storybook Chromatic CLI ์œผ๋กœ ๋ฐฐํฌํ•˜๋Š” ๋ฒ•๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ํ…Œ์ŠคํŠธ๋กœ ํด๋ฆญํ•˜๋ฉด ๋ฒ„ํŠผ์ƒ‰์ด ๋ฐ”๋€Œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ storybook์œผ๋กœ ๋งŒ๋“ค๊ณ , chromatic CLI๋กœ ๋ฐฐํฌํ•ด ๋ณด์ž.๐Ÿงพ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ ์„ค์ •์€ ๋‹ค์Œ์˜ ๋ฒ„์ „๋“ค์„ ๊ธฐ์ค€์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.โœ“ pnpm 9.0.0 โœ“ pyotato-dev.tistory.com ์Šคํ† ๋ฆฌ๋ถ์„ ๋งŒ๋“ค์–ด์„œ chromatic CLI๋กœ ๋ฐฐํฌํ•˜๋Š” ์ž‘์—…์„ ํ–ˆ์—ˆ๋‹ค.์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋งŒ๋“ค๋ ค๊ณ  main ์ž‘์—…์ค‘์ธ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ํ•˜๋‚˜์”ฉ ๋งŒ๋“ค๋ฉด ๋””์ž์ธ ์‹œ์Šคํ…œ์— ํ•ฉ์ณ์ฃผ๊ณ  ์ด๋ฅผ ๋ฉ”์ธ์— ํ•ฉ์ณ์ฃผ๋Š” ๋ฐฉ์‹์ธ๋ฐ, ํ˜„์žฌ๋Š” pr์„ ..
Data Structures & Algorithms with Javascript : Searching Algorithms [์ด์ „๊ธ€] 2024.07.28 - [๐Ÿค– data structures & algorithms] - Data Structures & Algorithms with Javascript : Sorting Algorithms (Advanced) Data Structures & Algorithms with Javascript : Sorting Algorithms (Advanced)2024.07.27 - [๐Ÿค– data structures & algorithms] - Data Structures & Algorithms with Javascript : Sorting Algorithms (basic) Data Structures & Algorithms with Javascript : Sorting Algorithms (..
Data Structures & Algorithms with Javascript : Sorting Algorithms (Advanced) 2024.07.27 - [๐Ÿค– data structures & algorithms] - Data Structures & Algorithms with Javascript : Sorting Algorithms (basic) Data Structures & Algorithms with Javascript : Sorting Algorithms (basic)2024.07.26 - [๐Ÿชฒ debug] - Data Structures & Algorithms with Javascript : Graphs and Graph Algorithms Data Structures & Algorithms with Javascript : Graphs and Graph Algorithms2024.07.25 - [๐Ÿค– data struc..

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”