본문 바로가기

전체 글

(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 다음

티스토리툴바