React, Next, Redux/⚛ React.JS 검색 결과

해당 글 52건

runtime css-in-js is not free

runtime css-in-js 우리는 흔히 SPA 관련 프레임워크를 기반으로 프론트엔드 작업을 할 때 styled-components나 emotion과 같은 css-in-js(CIJ)를 사용하곤 합니다. CIJ는 컴포넌트와 스타일을 번갈아 확인해야함으로써 발생하는 인지적인 비용을 줄일 수 있다는 사소한 장점부터, props에 따른 스타일 변경을 손쉽게 작성할 수 있다는 개발 편의적인 장점까지 많은 장점이 있습니다. 게다가 유명한 런타임 CIJ 라이브러리들은 대부분 자동으로 vendor-prefix를 붙여주기까지 합니다. Typed에서도 이런 장점을 개발에 활용하기 위해 emotion을 사용하고 있습니다. 그러나 위에서 언급한 CIJ 관련 라이브러리들은 런타임에 스타일을 동적으로 생성합니다. 따라서 런타..
React, Next, Redux/⚛ React.JS 2021. 12. 30. 00:32

웹 프론트엔드에서의 MVVM 디자인 패턴에 대해서

회사에서는 hook기반 MVC에서 MVVM로 이전이 진행되고 있다. 지그재그에서도 프론트엔드에서 디자인 패턴으로 MVVM을 채용했다고 한다. (2021년 9월 현재 기준으로는 모르겠다.) 기존 MVC 패턴에 대해서 가장 직관적인 패턴이다. 1. redux에 데이터를 쌓아놓고 2. 필요할 때 useSelector로 container 컴포넌트에서 store값을 불러오고 3. presenter 컴포넌트에서 해당 값을 사용한다. 도대체 왜 이게 문제가 될까? container 컴포넌트가 함수를 선언과 조합이라는 두 가지 역할을 다 하고 있어서 필연적으로 props가 많아질수록 번잡해진다. MVC로 담기에 컴포넌트의 복잡도가 매우 높은 경우다. 회사에서 사용하는 컴포넌트에서 자식 컴포넌트로 넘겨주는 props만해..
React, Next, Redux/⚛ React.JS 2021. 9. 8. 03:34

react dev tools로 profiling하기 및 의존성 배열 관리하기

최초의 렌더를 줄이려면 scaffold, skeleton loader, 부분 렌더링을 해야 함 아래와 같이 "first time component rendered", 즉, 최초 렌더는 어쩔 수 없음. 이 녀석을 방지하려면 필요한 만큼한 렌더해야 함. pagination + infinite scroll, windowing 여러 기법이 있는데 필요한 걸로 사용하면 될 듯. 행동 기반 최적화 경험상 최적화를 미리할 순 없고 (kent 아저씨였는지 누구였는지, 미리 하는 useCallback, useMemo 최적화는 만악의 근원이라더라) 프로덕트가 커지고 완성 단계에서 문제가 있는 부분을 리렌더링을 방지하는 작업을 하게 된다. 이 작업을 처음 할 때 이틀 정도는 useEffect와 props, state와 싸움..
React, Next, Redux/⚛ React.JS 2021. 9. 2. 02:34

React에서 dnd 구현하기 (react-dnd)

web API로서의 dnd API https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그 앤 드롭 API - Web API | MDN HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. developer.mozilla.org onDragStart, onDragEnter, onDragEnd 이벤트 리스너를 달아서 dnd를 구현한다. draggable 속성을 부여하면 해당 DOM은 draggable이 된다. 반면 droppable 속성은 별도로 없으며 onDragEnter로 특정 draggble이 들어왔는지, 그리고 onDragEnd로 놓아졌는지를 체크..
React, Next, Redux/⚛ React.JS 2021. 7. 6. 21:22

다크 모드 구현하기! with styled-components

우선 평소에하듯 theme을 만듭니다. 여기서 light 모드에 사용할 색과 dark 모드에 사용할 색을 구별하여 적어줍시다. 이 부분은 실제로 스타일링해가면서 색을 미묘하게 맞춰야하기 때문에 일단은 lightColor의 색을 그대로 사용하도록하겠습니다. // px to rem const calcRem = (px: number): string => `${px / 16}rem`; const lightColor = { red: "#dc3545", orange: "#fd7e14", yellow: "#ffc107", green: "#28a745", teal: "#20c997", blue: "#007bff", indigo: "#6610f2", purple: "#6f42c1", pink: "#e83e8c", cya..
React, Next, Redux/⚛ React.JS 2021. 5. 7. 07:21

React에 rxjs를 곁들여 사용해보자

아주 간단히 rxjs를 사용해서, 숫자를 출력하는 react app을 만들어보았습니다. cleanup에서 unsubscribe하는 것이 매우 중요합니다. import React, { useEffect, useState } from "react"; import { interval } from "rxjs"; import { take, tap } from "rxjs/operators"; import "./App.css"; const obsv$ = interval(1000).pipe(tap(console.log), take(5)); function App() { const [state, setState] = useState(0); useEffect(() => { const sub = obsv$.subscribe..
React, Next, Redux/⚛ React.JS 2021. 5. 6. 05:54

moment.js를 활용한 커스텀 캘린더 제작

왜 안 패키지? => 디자인이 구려서 React-Calendar 이거 좋은데 weekly download가 150,708라 react-day-picker의 1/3이다. 다만 프로젝트 관리가 react-day-picker보다 훨씬 잘되고 있다. www.npmjs.com/package/react-calendar toast-ui 이건 그냥 일정 관리할 때나 편하지. 지금 프로젝트에서는 안 맞는다. 기각. 디자인은 인정 ㅇㅇ ui.toast.com/tui-calendar react-day-picker 사용하기 npm weekly download가 399,438이다. 쩐다. 그런데 최근 프로젝트 관리가 잘되고 있지는 않다. react-day-picker.js.org/ 어케 만듦? 딱히 막 어려운 건 없지만, mo..
React, Next, Redux/⚛ React.JS 2021. 3. 8. 02:49

React 'n일 동안 보지 않기' 팝업 만들기

해외 사이트에서는 좀처럼 보지 못하지만 한국 웹에서는 매우 자주 볼 수 있는 팝업을 만들어보려고 합니다. 보통 php 기반 웹에서 많이 보이는 형태는 아래 같습니다. 원리는 Modal과 완전히 동일하고, 접속 시간을 Cookie 혹은 Local Storage로 관리한다는 점만 유일하게 다릅니다. 레이아웃은 일반 modal과 다를 것이 없으므로 설명을 생략하겠습니다. 여기서 중요한 건, '오늘 하루 보지 않기'를 클릭 했을 경우의 로직입니다. n일, n시간 등도 로직이 같으므로 저는 하루를 기준으로 잡겠습니다. import React from 'react'; import styled from 'styled-components'; interface IPopUpProps { showPopUp: boolean;..
React, Next, Redux/⚛ React.JS 2021. 2. 17. 05:24

key의 필요성, force rendering, index key 안티 패턴 제거

ko.reactjs.org/docs/lists-and-keys.html 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org list를 component로 뿌리기 위해서 다음과 같은 작업을 진행한 적이 있을 것이다. 사실 아래와 같은 방법은 안티 패턴이다. 반복되는 Component에 고유한 식별자인 key를 넣어주는 것이다. 추가적으로, 컴포넌트가 많아질때면 props를 기억하기 위해 React.memo를 이용하는 방법까지 살펴보았을 것이다. [1, 2, 3].map((el, i) => {el}) key를 이용한 force rendering 조금 변칙적인 사용법으로, 본래 사용법은 아니지만 force updat..
React, Next, Redux/⚛ React.JS 2021. 2. 10. 14:10

useSpring을 이용한 3d-card 만들기

앞서 react-spring은 5개의 훅을 가지고 있다고 안내하였다. darrengwon.tistory.com/1238 react-spring 소개 및 간단한 이용법 이번 프로젝트에서는 다루는 asset들이 패션 모델들의 이미지였기 때문에 프론트엔드에서 애니메이션, 트랜지션 등 화려한 뷰를 보여줄 필요가 있었다. 그래서 이번 기회에 react-spring을 써보기로 darrengwon.tistory.com useSpring : data를 a에서 b로 이동시키는 spring이다. useSprings : multiple spring이다. useTrail : 단일 dataset을 위한 multiple spring이다. 하나의 spring을 다른 것들이 따라간다. 그래서 "Trail"이다. useTransiti..
React, Next, Redux/⚛ React.JS 2021. 2. 2. 13:44