본문 바로가기

👩🏻‍💻 dev

(35)

패키지 매니저 ( 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를 제공해야 에러..

⚛️ <Suspense> 활용 이전 글: 2024.06.15 - [👩🏻‍💻 dev] - ⚛️ 란? 에서는 리액트 공식문서의 Suspense props에 대해 알아봤다. 란?" data-og-description="🗣️ 'Suspense'를 써보신 적 있나요? 있다면 언제, 왜 쓰시나요? 안쓰면 어떤 점이 불편하나요? 쓰긴 쓰는데..로딩 중에 대신 보여줄 UI를 제공하기 위해서 아닌가? 리액트의 공식문서에 의하면 " data-og-host="pyotato-dev.tistory.com" data-og-source-url="https://pyotato-dev.tistory.com/9" data-og-url="https://pyotato-dev.tistory.com/9" data-og-image="https://scrap.kakao..

⚛️ <Suspense>란? 🗣️ 'Suspense'를 써보신 적 있나요? 있다면 언제, 왜 쓰시나요? 안 쓰면 어떤 점이 불편하나요? 쓰긴 쓰는데..로딩 중에 대신 보여줄 UI를 제공하기 위해서 아닌가? 리액트의 공식문서에 의하면 는 children이 로딩 전까지 보여줄 fallback 요소를 제공하는 컴포넌트라고 한다.리액트의 에 대해서 더 자세히 다루기 전에,Suspend라는 단어의 뜻을 한번 살펴보고 가면 를 왜 쓰고, 언제 쓰는지, 그리고 역할이 무엇인지 이해하기가 쉽다. Suspend는 일시적으로 어떤 동작이 발생하거나 일어나는 것을 멈추는 것 (temporarily prevent from continuing or being in force or effect)이다. 그럼 리액트의 는 어떤 동작을 언제 잠시 멈춰주는 걸..

선언적인 코드 작성하기 🗣️ '선언적인 코드'에 대해서 들어보셨나요? 들어는 봤는데.. 뭐지? 토스 프론트엔드 챕터에서는 선언적인 코드 (Declarative Code)를 추상화 레벨이 높아진 코드라고 생각한다고 한다. 추상화 레벨이 높아진 코드란? 다음과 같이 배열의 합을 구하는 함수 sum을 살펴보자. sum([1,2,3]);// sum 함수의 구현 function sum(nums: number[]) { let result = 0; for (const num of nums) { result += num; } return result;} sum 함수의 초기값은 0이고, for문을 돌면서 배열의 각 수를 더하고,더해진 결괏값을 리턴해준다. 이 작업이 추상화되어, sum 함수를 사용하는 사람은 내부의 복잡한 제..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(3) 준비물: authorization을 담당할 서버 코드 2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(2) 준비물: authorization을 담당할 서버에 이어서 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(2) 준비물: authorization을 담당할 서2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(1) 준비물:spotify dev 계정, application 에 이어서.. [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프pyotato-dev.tistory.com 이제 배포할 준비를..

이전 1 2 3 4 5 다음

티스토리툴바