본문 바로가기

👩🏻‍💻 dev

(42)

[Sass] 주석(Comments) 시작하기에 앞서✍️ 해당 글은 .scss 를 기준으로 작성되었습니다!.scss와 .sass 확장자에 따라 주석이 동작하는 방식에는 차이가 있지만 공통적으로 /**/로 작성되는 주석은 css로 컴파일된다는 점, // 로 작성된 주석은 컴파일 되지 않는다는 점은 동일합니다!디자인 시스템을 만들면서 scss 사용도 익히는 중이다.여러 자료들을 참고하던 도중 주석 스타일이 조금씩 달랐다.어떤 경우에는 어떤 걸 쓰는 지 궁금해서 이번 포스팅에서 다뤄보기로 했다.Scss에서의 주석scss에서 사용하는 주석은 js에서 동작하는 방식과 유사하다. // 로 시작하는 single-line comment(한 줄 주석)들은 css에서는 silent comment라고도 불리는데, 어떠한 css도 만들지 않기 때문이다./**/로..

[react-hydration-error] Hydration failed because the server rendered didn't match the client [이전글 : 디자인 시스템이 뭔지 알고 싶다면 👉 ] 2024.07.11 - [👩🏻‍💻 dev] - 디자인 시스템 101 : 디자인 시스템이란?👩🏻‍🔧 scss + next monorepo 디자인 시스템을 도입하는 중이다.다크모드를 추가해주기 위해서 코드를 추가해 줬는데 새로고침을 할 때마다 "Hydration failed because the server rendered didn't match the client"의 에러가 발생했다.다음에 같은 실수를 해도 헤매지 않고, 혹시나 나처럼 헤매고 계신 분들을 위해 조금이나 도움이 될까 기록을 남겨두고자 한다.에러는 왜 발생한 건지, 그리고 어떻게 해결했는지 살펴보자! 🕵️ 문제 원인 찾기이런 에러가 발생하면 next은 아주 친절하게 원인일 요..

[ turborepo 설정] storybook Chromatic CLI 으로 배포하는 법 👩🏻‍💻 테스트로 클릭하면 버튼색이 바뀌는 컴포넌트를 storybook으로 만들고, chromatic CLI로 배포해 보자.🧾 해당 프로젝트 설정은 다음의 버전들을 기준으로 작성되었습니다.✓ pnpm 9.0.0 ✓ node >= 20✓ next 14.2.4✓ react ^18✓ chormatic ^11.5.5✓ storybook ^8.2.2[이전글] 2024.07.11 - [👩🏻‍💻 dev] - [turboRepo scss] Cannot find module './mybutton.module.scss' or its corresponding type declarations.ts(2307) [turboRepo scss] Cannot find module './mybutton.module.scss..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(n+1) vercel 배포 vite.config.ts 적용 안되는 문제 이전 글 : 2024.07.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(n) 검색 결과 react-infinite-scroll과 useInfiniteQuery로 무한 스크롤 구현하기 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(n)검색 결과 react-infinite-scroll과 useI😅 드디어 2달(?) 정도 긴 기간 동안 진행했던 프로젝트가 진짜 끝을 바라보고 있는 느낌! 🥳 정리해서 한번에 올리려다가 축하 기념(?)으로 오늘 따끈하게 끝낸 react-infinite-scroll+ useInfiniteQuery무pyotato-dev.tistory.com 🥳 드디어..

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/xxx` using `parserOptions.project`: /yyy/tsconfig.lint.json However, that TSConfig does not include this file 모노레포 레포지터리 구조는 다음과 같다..github.huskyapps ㄴ storybook ㄴ webpackages ㄴ design-system ㄴ .turbo ㄴ dist ㄴ node_modules ㄴ src ㄴ turbo ㄴ typings ㄴ eslintrc.cjs ㄴ package.json ㄴ tsconfig.json ㄴ tsconfig.lint.json ㄴ eslint-config ㄴ typescript-configpackage.jsonpnpm-lock.yaml.npmrc// ...생략 모노레포로 파일을 구성하고 있었고, hu..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(n)검색 결과 react-infinite-scroll과 useInfiniteQuery로 무한 스크롤 구현하기 😅 드디어 2달(?) 정도 긴 기간 동안 진행했던 프로젝트가 진짜 끝을 바라보고 있는 느낌! 🥳 정리해서 한번에 올리려다가 축하 기념(?)으로 오늘 따끈하게 끝낸 react-infinite-scroll+ useInfiniteQuery무한 스크롤 구현에 대해 기록하기로 했다.⚠️ 프로젝트 라이브러리들 버젼- "@tanstack/react-query": "^5.37.1"- "react": "^18.2.0",- "react-infinite-scroll-component": "^6.1.0"👉 깃허브에서 레포지터리 구경하러 가기첫 시도원래는 좀 복잡한 방식으로 구현을 했었다."react-intersection-observer" 라이브러리를 활용해 리스트 마지막 아이템에 ref를 지정하고,이 ref가 뷰포트에..

디자인 시스템 101 : 디자인 시스템이란? 🤔 모노레포 프로젝트 세팅을 하면서 고민해봐야 할 부분 중 하나인 디자인 시스템 구축하기!본격적으로 도입하기 전에 "디자인 시스템이 뭔지, 왜 필요한 지, 도입이 필요한 지"에 대해 살펴보자.디자인 시스템이란At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. 디자인 시스템이란 프로덕트과 경험이 주는 모습과 느낌이 일정하도록 도와주는 기준과 기본 유닛의 모음이다.복잡한 디지털 프로덕트를 만드는 팀을 위해 통일된 언어와 구조화된 프레임워크를 제공하는 청사진 역할을 한다. 아이콘과 색깔은 유저에게 특정한..

패키지 매니저 ( ft. 패키지 매니저의 과거, 토스의 선택, 그리고 미래) 🤔 turborepo로 모노레포 프로젝트를 시작하려고 설치를 하기 위한 패키지 매니저들 중 어떤 걸 사용해야 하나? 이들의 차이와 선택 기준은 뭘까?🍀 때마침 패키지 매니저에 대해 한번 짚고 넘어가 보려다가 토스에 패키지 매니저의 과거, 토스의 선택, 그리고 미래란 좋은 글이 올라와서 정리해보고자 한다. 👩🏻‍💻 살펴볼 내용- 패키지 매니저가 무엇인지- 패키지 매니저가 동작하는 3가지 단계- npm vs pnpm vs Yarn PnP- 토스의 Pick 👩🏻‍💻 패키지 매니저란?모듈시스템 (ESM & CJS)에 대해서 다뤘듯이 JS/TS에서는 require 혹은 import로 외부의 모듈을 사용할 수 있다.여기서 외부의 모듈을 올바르게 참조하도록 관리하는 프로그램이 바로바로 패키지 매니저다...

이전 1 2 3 4 5 6 다음

티스토리툴바