React (13) 썸네일형 리스트형 Storybook에서 SVG import Error 해결하기 문제상황 React + TypeScript + monerepo 환경의 회사 프로젝트에 드디어 storybook을 도입하게되어 싱글벙글했던 것도 잠시.. storybook을 설치해 실행하고 기존에 만들어두었던 component의 story를 하나하나 작성하는데 SVG 파일이 import된 component에선 undefined가 렌더된다는 아래의 에러가 떴다. Storybook: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 해당 에러는 storybook의 기본 웹팩 설정에서 svg 파일을 file-loader로.. 점차 느려지는 Count 애니메이션 구현하기 들어가며 우리는 종종 위처럼 느려지는 속도로 숫자를 count하는 애니메이션을 접하게된다. 예를 들어 게임 화면에서 유저가 획득한 포인트를 보여줄 때, 할인된 가격을 안내할 때, D-day까지 남은 일수를 보여줄 때 등등 숫자값을 강조해야하는 상황에서 자주 사용된다. 그럼 이 애니메이션은 어떻게 구현해야할까? 단순한 count 애니메이션을 생각하고 setInterval로 금방 구현하겠네!하며 호기롭게 접근했다가 count 속도를 조절하는 방법이 까다로워 혼쭐이 나 그 여정을 기록해보고자 한다. 해당 기능은 재사용성을 고려해 custom Hook으로 구현했다. 1. setInterval 함수로 Count 애니메이션 구현하기 우선 단순히 숫자를 count하는 애니메이션부터 구현해보자. 숫자를 카운트하는 애니.. MobX | React와 MobX로 카운터 만들기 새로운 기술에 가장 빠르고 또 가까이 다가갈 수 있는 방법은 결국 직접 활용해서 무언가를 만들어 보는 것이라 생각한다. 앞서 이론 중심으로 소개했던 MobX를 활용한 간단한 예제를 만들어보자. 위와 같은 아주 원초적인 UI의 Counter를 (1)React만 사용해 구현해보고 (2)MobX를 사용하는 형태로 바꾸어볼 예정. (1) React로만 Counter 구현하기 Counter 컴포넌트 구현 //Counter.jsx import React, { useState } from "react"; const Counter = () => { const [num, setNum] = useState(0); //숫자 +1 const increaseNum = () => { setNum(num + 1); }; //숫자.. MobX | 주요 개념 알아보기 글의 목적 회사에서 고객별로 인테리어 서비스 견적을 통합 관리하는 백오피스를 개발하며, 모든 페이지마다 필수적으로 필요한 고객 정보를 어떻게 관리하면 좋을지 고민하게 되었다. 가장 익숙한 방법인, 최상단에서 state로 관리할까 생각하니 떠오른 이미지는. . 페이지와 컴포넌트의 수가 꽤나 많기에 state로 관리하기엔 위 사진처럼 너무나 많은 Props가 생겨날거라 생각했고, 이는 개발 방향이 객체지향과 너무나 동떨어진 구조로 흘러가 결국 낮은 유지보수성을 가져올것이라 판단했다. 때문에 컴포넌트와 상태 업데이트 로직을 분리하는 전역 상태 관리를 선택하게 되었다. 전역 상태 관리를 해본 적이 없어 팀원분들과 상의를 해보았는데, 상대적으로 러닝커브가 낮고 회사 코드 중 이미 일부분에 사용되고 있어 흐름을 참.. 자주 활용하는 React 초기 세팅 (w. TS, Sass, styled-components , eslint, prettier) Create-React-App으로 프로젝트를 만들고, eslint와 prettier를 적용하는 초기세팅을 진행할 때 자주 설정하는 루틴을 기록해본다. 특정 상황에 겪는 에러도 거의 동일하기에 함께 표기해두었다. 1. CRA 설치 Typescript와 함께 설치한다. npx create-react-app 프로젝트명 --template typescript 2. react-router-dom 설치 npm i react-router-dom 3. Sass/styled-components 설치 Sass 설치 npm install sass --save styled-components 설치 //npm npm install styled-components // Yarn yarn add styled-components 4.. React | Portal을 이용한 Modal 구현 한국인에게 portal이란.. 닥터스트레인지의 마법진같은 포탈만 떠오를 수 있다. 이미 충분히 익숙한 다른 곳으로 이동시킨다는 개념을 이어받아, 컴포넌트를 부모 컴포넌트의 바깥에 렌더링해주는 신기한 portal을 알아보자. Portal이란? React 공식 문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. 위 설명이 쉽게 이해가지 않는다면, 아래를 보자. 현재 와 은 형제 관계처럼 보이지만 실제로 modal은 root 안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이루어지고 있다. 왜 사용할까? 일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다. 하지만 때.. React | Styled Components 💅 Styled Components란? 현대 웹 앱은 점차적으로 컴포넌트를 기반으로 고안되고 있고, 이에 따라 CSS 스타일링 또한 컴포넌트를 기반으로 재구성되고 있다. 이러한 흐름 속에서 등장한 패러다임이 CSS-in-JS (JS파일 안에서 CSS를 함께 관리하는 것)이고, 그 중 가장 인기 있는 라이브러리가 바로 Styled Components Styled Components을 사용하는 이유 위와 같이 클래스명을 해시값으로 자동 생성하므로 클래스명 오염을 방지한다. CSS 문법을 온전하게 사용할 수 있다. 자바스크립트의 동적인 값들을 온전하게 사용할 수 있다. 컴포넌트와 스타일이 하나의 파일로 결합되어 모듈화가 수월해진다. 사용 예시 컴포넌트 파일의 상단에 아래와 같이 styled-components.. React | 로그인 후 token 저장, 서버에 전달하기 유투브 프리미엄은 로그인을 해야 광고를 보지 않을 수 있고, 인스타그램에선 로그인을 해야 내 피드로 갈 수 있다. 이러한 인가 과정에 필요한 token 로그인 후 발생되는 token을 localStorage에 저장하고, 특정 사이트에서 필요할 때 서버에 보내는 것까지 알아보자. token, 왜 필요한가? HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다. 이러한 상황을 막기 위한 것이 token ! 먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마이페이지 등 로그인이 필요한 사이트를 접속할 .. 이전 1 2 다음
