티스토리

일상 속 개발록

검색하기

블로그 홈

일상 속 개발록

dev-bomdong.tistory.com/m

BomDong 님의 블로그입니다.

구독자: 9

방명록 방문하기

주요 글 목록

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로.. 공감수 0 댓글수 0 2022. 12. 18.
점차 느려지는 Count 애니메이션 구현하기 들어가며 우리는 종종 위처럼 느려지는 속도로 숫자를 count하는 애니메이션을 접하게된다. 예를 들어 게임 화면에서 유저가 획득한 포인트를 보여줄 때, 할인된 가격을 안내할 때, D-day까지 남은 일수를 보여줄 때 등등 숫자값을 강조해야하는 상황에서 자주 사용된다. 그럼 이 애니메이션은 어떻게 구현해야할까? 단순한 count 애니메이션을 생각하고 setInterval로 금방 구현하겠네!하며 호기롭게 접근했다가 count 속도를 조절하는 방법이 까다로워 혼쭐이 나 그 여정을 기록해보고자 한다. 해당 기능은 재사용성을 고려해 custom Hook으로 구현했다. 1. setInterval 함수로 Count 애니메이션 구현하기 우선 단순히 숫자를 count하는 애니메이션부터 구현해보자. 숫자를 카운트하는 애니.. 공감수 2 댓글수 0 2022. 7. 18.
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); }; //숫자.. 공감수 1 댓글수 0 2022. 4. 12.
MobX | 주요 개념 알아보기 글의 목적 회사에서 고객별로 인테리어 서비스 견적을 통합 관리하는 백오피스를 개발하며, 모든 페이지마다 필수적으로 필요한 고객 정보를 어떻게 관리하면 좋을지 고민하게 되었다. 가장 익숙한 방법인, 최상단에서 state로 관리할까 생각하니 떠오른 이미지는. . 페이지와 컴포넌트의 수가 꽤나 많기에 state로 관리하기엔 위 사진처럼 너무나 많은 Props가 생겨날거라 생각했고, 이는 개발 방향이 객체지향과 너무나 동떨어진 구조로 흘러가 결국 낮은 유지보수성을 가져올것이라 판단했다. 때문에 컴포넌트와 상태 업데이트 로직을 분리하는 전역 상태 관리를 선택하게 되었다. 전역 상태 관리를 해본 적이 없어 팀원분들과 상의를 해보았는데, 상대적으로 러닝커브가 낮고 회사 코드 중 이미 일부분에 사용되고 있어 흐름을 참.. 공감수 0 댓글수 0 2022. 4. 9.
자주 활용하는 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.. 공감수 1 댓글수 0 2021. 11. 30.
React | Portal을 이용한 Modal 구현 한국인에게 portal이란.. 닥터스트레인지의 마법진같은 포탈만 떠오를 수 있다. 이미 충분히 익숙한 다른 곳으로 이동시킨다는 개념을 이어받아, 컴포넌트를 부모 컴포넌트의 바깥에 렌더링해주는 신기한 portal을 알아보자. Portal이란? React 공식 문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. 위 설명이 쉽게 이해가지 않는다면, 아래를 보자. 현재 와 은 형제 관계처럼 보이지만 실제로 modal은 root 안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이루어지고 있다. 왜 사용할까? 일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다. 하지만 때.. 공감수 12 댓글수 2 2021. 11. 5.
React | Styled Components 💅 Styled Components란? 현대 웹 앱은 점차적으로 컴포넌트를 기반으로 고안되고 있고, 이에 따라 CSS 스타일링 또한 컴포넌트를 기반으로 재구성되고 있다. 이러한 흐름 속에서 등장한 패러다임이 CSS-in-JS (JS파일 안에서 CSS를 함께 관리하는 것)이고, 그 중 가장 인기 있는 라이브러리가 바로 Styled Components Styled Components을 사용하는 이유 위와 같이 클래스명을 해시값으로 자동 생성하므로 클래스명 오염을 방지한다. CSS 문법을 온전하게 사용할 수 있다. 자바스크립트의 동적인 값들을 온전하게 사용할 수 있다. 컴포넌트와 스타일이 하나의 파일로 결합되어 모듈화가 수월해진다. 사용 예시 컴포넌트 파일의 상단에 아래와 같이 styled-components.. 공감수 0 댓글수 0 2021. 11. 5.
React | 로그인 후 token 저장, 서버에 전달하기 유투브 프리미엄은 로그인을 해야 광고를 보지 않을 수 있고, 인스타그램에선 로그인을 해야 내 피드로 갈 수 있다. 이러한 인가 과정에 필요한 token 로그인 후 발생되는 token을 localStorage에 저장하고, 특정 사이트에서 필요할 때 서버에 보내는 것까지 알아보자. token, 왜 필요한가? HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다. 이러한 상황을 막기 위한 것이 token ! 먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마이페이지 등 로그인이 필요한 사이트를 접속할 .. 공감수 4 댓글수 0 2021. 11. 4.
React | 회원가입 기능 구현하기 현재 email창엔 '@'가 포함되어야 하고, password는 5자리 이상이어야 버튼이 활성화되도록 유효성 로직을 포함한 회원가입을 진행해보고자 한다. Step.1 : state 설정 최상위 컴포넌트의 state/fetch 함수 부분 (중요 부분만 발췌) // state 부분 constructor(props) { super(props); this.state = { first_name: 'Donghee', last_name: 'Kim', email: '', password: '', phone_number: '01011111111', gender: 'w', birth: '1995-12-27', }; } //fetch 함수 부분 (then 함수 부분은 생략) fetch('API주소', { method: 'P.. 공감수 1 댓글수 0 2021. 11. 4.
React | 검색 기능 구현하기 React로 외부 API를 받아온 뒤, 검색창에 입력하면 관련 데이터가 나오는 기능을 구현해보았다. 참고로, 해당 사이트는 아래의 3단 구조 컴포넌트로 되어있다. Monsters(최상위) > CardList > Card 아래엔 Monsters Class 코드 위주로, 또 import 부분 등은 생략하고 적어볼 예정 Step.1 : state 설정 componentDidMount() { fetch("API주소") .then((res) => res.json()) .then((data) => { this.setState({ monsters: data, userInput: this.state.userInput, }); }); } // SearchBox 에 props로 넘겨줄 handleChange 메소드 정의 .. 공감수 0 댓글수 0 2021. 11. 3.
React | map 함수 적용시 key props를 부여하는 이유 React에선 기존에 한땀한땀 작성해야했던 배열을 map()함수를 이용해 element list로 반복실행할 수 있다. 예를 들어 div안에 feed의 데이터가 담긴 배열(this.state.feeds)에서 배열 값이 하나씩 나타나도록 map()함수를 이용할 때, 아래의 코드를 작성했다. (실제 코드에서 일부분을 빼내온 터라 보충 설명을 해보자면, 배열 값 feed는 comments, feedContents의 속성을 가지고있다.) { this.state.feeds.map(feed => { return ( ); })} 위 코드를 실행시키면 console에 아래와 같이 list의 모든 child요소는 unique key 속성을 가져야 한다는 메세지가 출력된다. 그럼 여기서 key는 무엇이고, 왜 필요한 걸까.. 공감수 0 댓글수 0 2021. 11. 3.
React | State와 Props State와 Props state 와 props (properties)는 JavaScript의 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는, 속성을 가진 데이터이다. State와 Props의 차이점 state : (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리되는 데이터. 자식 컴포넌트 입장에서 보면 쓰기 전용이라고 할 수 있다. props : (함수의 매개변수처럼) 상위 계층의 컴포넌트에서 자식 컴포넌트로 전달되는 데이터. 자식 컴포넌트 입장에서 보면 읽기 전용이라고 할 수 있다. 어떤 데이터가 state가 되어야 할까? 부모로부터 props를 통해 전달되는가? 시간이 지나도 변하지 않는가? 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 위 질문에 하나라도 yes가 나.. 공감수 0 댓글수 0 2021. 11. 3.
React | What is React? Why React? 웹의 규모가 커지면서 동시접속자 수와 데이터의 양이 폭발적으로 증가했고, 이 결과로 웹 3세대의 시대가 도래하게 된다. 이러한 흐름속에서 기존의 DOM, jQuery만으로는 새로운 웹 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다. 규모가 커지고 복잡해진 웹 애플리케이션의 데이터 관리 / 코드 유지 보수를 편리하게 하기 위해 다양한 Frontend Framework 및 Library가 등장한다. React는 이 중 Frontend Library에 해당한다. What is React ? - 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 - 컴포넌트 단위로 이루어진 UI 라이브러리 위 단어에서 생소하게 느껴졌던 단어, 라이브러리와 컴포넌트 아래로 각각 정리해본다. .. 공감수 0 댓글수 0 2021. 10. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.