์ ์ฒด ๊ธ (72) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [spotify-api] VINYLIFY : ์คํฌํฐํ์ด apiํ์ฉํ ๊ฒ์ + ์ฌ์ ํ๋ก์ ํธ(4) eslint + prettier + commitlint ์ค์ (+husky) 2024.06.12 - [๐ฉ๐ป๐ป dev] - [spotify-api] VINYLIFY : ์คํฌํฐํ์ด apiํ์ฉํ ๊ฒ์ + ์ฌ์ ํ๋ก์ ํธ(3) ์ค๋น๋ฌผ: authorization์ ๋ด๋นํ ์๋ฒ ์ฝ๋ [spotify-api] VINYLIFY : ์คํฌํฐํ์ด apiํ์ฉํ ๊ฒ์ + ์ฌ์ ํ๋ก์ ํธ(3) ์ค๋น๋ฌผ: authorization์ ๋ด๋นํ ์2024.06.12 - [๐ฉ๐ป๐ป dev] - [spotify-api] VINYLIFY : ์คํฌํฐํ์ด apiํ์ฉํ ๊ฒ์ + ์ฌ์ ํ๋ก์ ํธ(2) ์ค๋น๋ฌผ: authorization์ ๋ด๋นํ ์๋ฒ์ ์ด์ด์ [spotify-api] VINYLIFY : ์คํฌํฐํ์ด apiํ์ฉํ ๊ฒ์ + ์ฌ์ ํpyotato-dev.tistory.com์ฌ์ฉํ spotify api์ ๋ํ ์ค.. [๐ป ์ปดํจํฐ ์ฉ์ด ] "Opinionated"๋? ์ค์ ์ ํ๋๊ฐ ์คํ์ ์ฒดํฌํ๊ฑฐ๋ ์ฌ์ฉ๋ฒ์ ์์๋ณด๋ ค๊ณ ๊ณต์ ๋ฌธ์์ ๋ค์ด๊ฐ์ ์ฝ๋ค ๋ณด๋ฉด "opinionated"๋ผ๋ ๋ง์ ์ข ์ข ๋ณผ ์ ์๋ค. ์ฌ์ ์ ์ธ ์๋ฏธ๋ฅผ ์ดํด๋ณด๋ฉด ์์ด ์ค๋ช ์ผ๋ก๋ ์๋ฆฌ๋ฅผ ๊ฐํ๊ฒ ์ฃผ์ฅ/๊ณ ์ํ๋ ์ฑ๊ฒฉ์ผ๋ก ๋ฌ์ฌ๊ฐ ๋๊ณ , ํ๊ตญ์ด ๋ฒ์ญ์ '์๊ฒฌ์ ๊ณ ์งํ๋, ๋ ๋จ์ ์ธ, ์๋ถ์ฌ์ด ๊ฐํ..' ๋ฑ์ผ๋ก ์ค๋ช ๋๋ค. ํ์ง๋ง ์ํํธ์จ์ด์ ์ธ ์ฝํ ์คํธ์์ ์ด ๋ง์ด ์๋ฟ์ง ์๊ณ ํ๊ธ ๋ฒ์ญ๋ ๋ญ๊ฐ ๋ฐ์ํ๊ธฐ ์ด์ํ๋ค.๐ ์ค๋์ ์ด ์ด์ํจ์ ํด์ํ๊ธฐ ์ํด "opinionated"๋ฅผ ์ํํธ์จ์ด ์ฝํ ์คํธ์์ ์ดํดํ๊ธฐ ์ฝ๊ฒ ์ ์์ ์์๋ฅผ ์ดํด๋ณด์.Opinionated ํํ ์ฌ์ฉ ์์๋คprettierํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ผ๋ฉด ํ ๋ฒ์ฏค์ prettier ์ค์ ์ ํด๋ดค์ ๊ฒ์ด๋ค. ๊ณต์ ํํ์ด์ง์ ๋ค์ด๊ฐ๋ฉด ์๋์ ๊ทธ๋ฆผ์ฒ๋ผ prettie.. โ๏ธ ๋ฆฌ์กํธ ํจํด : 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์ .. ์ด์ 1 2 3 4 5 6 7 ยทยทยท 9 ๋ค์