본문 바로가기

전체 글

(72)

[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. 디자인 시스템이란 프로덕트과 경험이 주는 모습과 느낌이 일정하도록 도와주는 기준과 기본 유닛의 모음이다.복잡한 디지털 프로덕트를 만드는 팀을 위해 통일된 언어와 구조화된 프레임워크를 제공하는 청사진 역할을 한다. 아이콘과 색깔은 유저에게 특정한..

[turboRepo scss] Cannot find module './mybutton.module.scss' or its corresponding type declarations.ts(2307) 🕵️ 이슈scss로 버튼 만들어보기 중..다음과 같은 ts 경고가 떴다. 문제는 ts와 tsx 확장자로 끝내야만 모듈로 인식해서 scss 확장자의 파일을 인식하지 못한 거였다. 📝 해결1. tsconfig.ts 와 같은 최상단 경로에 typings 폴더를 만들어주자.2. typings/ 폴더 내에 declarations.d.ts 파일을 만들어주고 다음의 코드 작성.declare module "*.scss" { const content: Record; export default content;} 3. tsconfig.ts 에 typings 폴더 추가해주기{ "extends": "@repo/typescript-config/react-library.json", "compilerOptions": { ..

⚛️ 가상돔과 리액트 파이버 👩🏻‍💻 오늘 다룰 내용- 가상돔이란? (feat. DOM이란? 브라우저 렌더링 과정)- 가상돔 만드는 과정 (feat. react fiber, 파이버 트리와 더블 버퍼링)- 리액트 파이버의 주요한 속성들DOM 이란? 가상돔(virtual DOM)이 뭘까? virtual + DOM이라는 것인데, DOM이 뭔지 알면 와닿을 것 같다.DOM은 브라우저가 화면의 내용을 그려주기 위해 필요한 정보를 트리 모양으로 구성해 놓은 것이다.DOM생성 과정에는 브라우저 렌더링 과정에 포함되는데, 이 과정도 간단히 살펴보자.DOM은 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있는 웹페이지에 대한 인터페이스다. 브라우저 렌더링 과정은 다음과 같다. 0. 브라우저는 사용자가 요청한 주소를 방문해 H..

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

토스ㅣSLASH 23 - 퍼널 : 쏟아지는 페이지 한 방에 관리하기 (TOSH | SLASH 23 - Funnel Pattern : Organizing an overflow of pages at once) ⚠️ 저작권 보호를 위해 자료 및 예시가 대체되었습니다. 예시 코드는 React⚛️로 작성되었습니다.🫨 통신사 가입을 하기 위해서 아래와 같이 긴 폼과 약정이 포함된 페이지를 마주치게 될 때가 있다.이렇게 많은 페이지들을 넘나드는 흐름을 효율적으로 관리하는 방법이 뭘까?이번글에서는 토스 SLASH23에서 다룬 퍼널을 통한 분기와 상태 관리에 대해 살펴보자.서비스를 개발할 때 대표적인 프론트엔드 패턴들1. 상점 목록 페이지 -> 상세 페이지 구조로 이루어져 있고, 블로그나 뉴스, To-do 리스트도 이 유형에 해당된다. 2. 단일 페이지 페이지 이동 없이 한 화면 내에서 상호작용할 수 있고, 지도나 메신저 앱이 이 유형에 해당된다. 3. 설문조사 여러 페이지들을 통해 상태를 수집 -> 결과 페이지로 이루..

모듈 시스템 🗣️ import과 require의 차이를 알고 계시나요? 🤔 노드 프로젝트에서는 require 많이 본 거 같고, react에서 import 많이 썼던 거 같은데? import과 require에 대해 알기 위해서는 모듈 시스템이라는 것에 대해 알아야 한다.오늘은 모듈 시스템이 무엇이고, 어떤 것들이 있으며, 각각의 특징과 장단점을 살펴보자.JS 모듈 시스템이란?예전 웹에서 자바스크립트가 담당하고 제공할 수 있는 기능들은 페이지를 보여주는 것 정도였다.하지만 점차 자바스크립트의 역할이 거대해지고, 기능들을 만들면서 네임스페이스며 dependency며 관리할 것도 비례(정비례는 아닐 수도?)해서 방대해졌다.모듈 시스템은 이렇게 관리하기 어려운 스코프 이슈를 해결하기 위한 방안으로 등장하게 되었다.J..

⚛️ Error boundary 😱 앱 개발 도중 에러가 발생 처리를 해주지 않는다면 머리뿐만 아니라 유저에게 보여줄 화면도 새하얗게 변할 거 같다.🤔 리액트에서는 에러처리를 어떻게 해줄 수 있을까?리액트의 Error boundary (legacy)개발 문서에 의하면 일반적으로 리액트는 렌더링 도중에 에러가 발생하면 UI를 화면에서 제거한다.이를 방지하기 위해서는 해당 UI를 Error boundary로 감싸줄 수 있다. 즉, Error boundary는 에러가 나서 제거된 UI대신에 화면에 fallback UI를 보여주는 특수한 컴포넌트다. Error boundary를 구현하기 위해서는 static getDerivedStateFromError를 제공해야 한다.static getDerivedStateFromError를 제공해야 에러..

이전 1 ··· 5 6 7 8 9 다음

티스토리툴바