React, Next, Redux 검색 결과

해당 글 93건

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

custom hook에서의 Array vs Tuple 반환

다음과 같이 열고 닫음을 처리하는 커스텀 훅이 존재한다고 가정하자. import { useState, useCallback } from 'react' const useToggle = (initialState: boolean) => { const [state, setState] = useState(initialState) const toggle = useCallback(() => { setState((state) => !state) }, []) const open = useCallback(() => setState(true), []) const close = useCallback(() => setState(false), []) return [state, open, close, toggle] } export..
React, Next, Redux/🚀 React with Hooks 2021. 11. 29. 10:45

회사에서 기술 블로그 운영하기

쓰라고 강요하지 않고, 큰 chunk의 티켓을 마무리했을 때 공부하는 느낌으로 + 인센티브 지급! 센x버x도 시도하다가 참여율이 저조했다고 한다. 개발자들은 스스로 성장하고 공부하려는 욕구가 크기 때문에 회사에서 한 일을 복기하며 공부하는 느낌으로 써야 한다. 1달에 1개 이상 글 쓰기 이런 작업은 전혀 도움이 되지 않는다. 추가적으로 글을 쓸 때마다 합리적인 정도의 인센티브를 받는다면 더욱 좋을 것! 회사용 이메일로 github page를 만들어야 함 oganization에서 github page를 파게 되면 prefix가 repo 이름이 들어가서 예쁘지가 않다. 개인 사이트일 경우 https://[사용자명].github.io 프로젝트 사이트일 경우 https://[사용자명].github.io/[Rep..
React, Next, Redux/🍹 gatsby 2021. 11. 3. 14:04

gatsby를 gh-page로 deploy하는 github action

./package.json "build": "gatsby build --prefix-paths", "develop": "gatsby develop", "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", "start": "gatsby develop", "serve": "gatsby serve", "clean": "gatsby clean", "deploy": "npm run build && gh-pages -d public -b master", "pre-commit": "lint-staged", "prepare": "husky install" .github/workflows/main.yml name: typed-blog-deploy on: push..
React, Next, Redux/🍹 gatsby 2021. 10. 14. 23:12

웹 프론트엔드에서의 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

React Testing Library(RTL) (1) render, query, matcher, user Event

테스트의 순서는 대체로 다음과 같다. @testing-library/react에 있는 render로 dom 그리고 @testing-library/user-event로 이벤트를 발생시키고 @testing-library/jest-dom/extend-expect로 matcher를 통해서 테스트를 한후 @testing-library/react에 있는 cleanup으로 rennder된 dom tree를 지워준다. testing library? https://testing-library.com/docs/react-testing-library/intro React Testing Library | Testing Library React Testing Library builds on top of DOM Testing L..
React, Next, Redux/⚛ React Testing 2021. 6. 21. 19:47

다크 모드 구현하기! 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