어쩌다가 도입하게 되었는지? 최근 AWS 프론트엔드 모임에서 Storybook에 대한 소개 발표를 들었다. 해당 기술을 현재 프로젝트에 도입하게 된다면 매우 실용적으로 활용할 수 있다는 생각이 들어서 대표님께 강력 어필을 하고, 결국 '당장 도입!!' 이라는 결과를 얻을 수 있었다. Storybook 도입 여정 Storybook 설치 공식 문서 https://storybook.js.org/docs/react/get-started/install Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, ..

Storybook는 여러 플랫폼에서 UI 컴포넌트를 개발, 테스트 및 문서화하기 위한 오픈 소스 도구입니다. Storybook을 사용하여 다음과 같은 작업을 할 수 있습니다: 서로 다른 플랫폼과 기기에서 사용할 수 있는 코드 기반의 컴포넌트를 만듭니다. 디자이너, 엔지니어 및 프로덕트 매니저와 함께 작업합니다. 전체 어플리케이션을 실행하지 않고도 상호작용 가능한 개발 환경에서 컴포넌트를 쇼케이스 합니다. 컴포넌트 구현에 대한 다양한 사용 사례 및 예제를 보여줍니다. 프로토타이핑, 테스트 및 문서화를 위한 애드온을 설치합니다. Storybook과 Figma를 연결하면 디자인을 Storybook에서 볼 수 있으며, Figma에서 story를 볼 수 있습니다. Storybook의 디자인 애드온은 코드 기반의 ..

문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주세요. 제한사항 5 ≤..

서론 작년 취업 준비할 때 React Query를 공부할 때까지만 해도 공식 이름이 React Query 였는데... 이제는 TanStack Query 라는 새로운 친구가 되어버렸다 😂 기존에 공부했던 v3인 React Query 대신, 발 빠르게 업데이트된 TanStack Query로 무한 스크롤 기능을 한 번 구현해보고자 한다. (내 코드를 빠르게 레거시로 만들기는 싫어 🥺) Infinite Queries 공식 문서 https://tanstack.com/query/v4/docs/react/guides/infinite-queries Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto..

문제 설명 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한 사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 15 babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다. 즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다. 문자열은 알파벳 소문자..

🤔 왜 이런 고민을 하게 되었는가? 현재 JSON 파일들을 public 폴더에 넣고 관리하고 있었다. public path 를 짧게 단축시키기 위해 구글링을 하다가 asset 파일들을 public 폴더에 관리하는 것보다 src 폴더에 관리하는 것이 더 편리하다는 글을 종종 볼 수 있기 때문에 나도 이러한 고민을 하게 되었다. (아무 생각 없이 asset 파일을 당연하듯 public 폴더에 관리하던 나 자신 반성해...😂) 📂 public 폴더 사용하기 public 폴더는 정적 파일을 보관하기에 좋은 장소이다. 이유는 아래와 같다. public 폴더에 위치한 정적 파일은 빌드 후에 build 폴더에 복사된다. 따라서 빌드 이후에도 파일이 유지되며, 캐싱 문제도 해결할 수 있다. public 폴더는 어디에서..

🤔 내가 하고 싶은 것 기존에 매우 길었던 public path를 좀 더 단순화하여 나타내고 싶었다. 파일을 빌드할 때에도 콘솔에 다음과 같은 메세지가 나타났다. files in the public directory are served at the root path. Instead of /public/json/KoreaRegion/SigunguJSON.ts, use /json/KoreaRegion/SigunguJSON.ts. 기존의 public path import { IMetroCityTypes } from "../../../public/json/KoreaRegion/MetroCitiesJSON"; 변경하고 싶은 public path import { IMetroCityTypes } from "/json..

🤔 어떤 에러가 발생하였을까? 이전 글을 참고하면 좋다. https://programmerplum.tistory.com/199 [React 18] A component suspended while responding to synchronous input. (1) 🤔 어떤 에러가 발생하였을까? SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다. 회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 programmerplum.tistory.com 이전 글에서 { naver } = window; 위처럼 전역 변수로 네이버 객체를 가져오는 것 대신, const navermap = useNavermaps..