프로그래밍/React
[React] Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법
[React] Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법
2022.02.17🎯 Do not access Object.prototype method 'hasOwnProperty' from target object. 에러 해결 방법 hasOwnProperty를 사용하려고 했는데 eslint 오류가 발생했다. 📝 해결 방법 (Object.prototype.hasOwnProperty.call) // error var hasBarProperty = foo.hasOwnProperty("bar"); var isPrototypeOfBar = foo.isPrototypeOf(bar); var barIsEnumerable = foo.propertyIsEnumerable("bar"); // correct var hasBarProperty = Object.prototype.hasOwnProperty..
[React] 리액트 React.lazy와 Suspense란?
[React] 리액트 React.lazy와 Suspense란?
2022.02.15🎯 리액트 React.lazy와 Suspense란? 📝 React.lazy const SomeComponent = React.lazy(() => import('./SomeComponent')); const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( ); } React.lazy()를 사용하면 동적으로 불러오는 컴포넌트를 정의할 수 있다. 번들의 크기를 줄이고, 초기 렌더링에서 사용되지 않는 컴포넌트를 불러오는 작업을 지연시킬 수 있다. React.lazy로 import 해준 컴포넌트는 반드시 Suspense의 자식으로 들어가야 한다. 📝 Suspense 특정 컴포넌트에서 사용되..
[React] 리액트 PropTypes 사용하기
[React] 리액트 PropTypes 사용하기
2022.02.15🎯 리액트 PropTypes 사용하기 컴포넌트의 props에 타입 검사를 하려면 propTypes을 사용해야 한다. 📝 PropTypes 설치 및 import npm i prop-types import PropTypes from "prop-types"; import PropTypes from 'prop-types'; const Greeting = () => { return ( h1>Hello, {this.props.name} ); } } Greeting.propTypes = { name: PropTypes.string }; prop에 유효하지 않은 값이 전달되었을 때, 경고문이 뜬다. 📝 기본 타입 optionalArray: PropTypes.array, optionalBool: PropTypes.boo..
[React] 리액트 차트 라이브러리 :: Recharts 사용법
[React] 리액트 차트 라이브러리 :: Recharts 사용법
2022.02.10🎯 Recharts 사용하기 프로젝트에서 데이터 시각화하는 부분을 마크업 하게 되었다. 아래 링크에서 사람들이 많이 사용하는 차트 라이브러리 리스트를 보면서 장/단점을 검색한 후 심플하고 사용법이 간단한 Recharts를 사용하기로 결정했다. 10 Best React Chart Libraries in 2022 | Openbase A comparison of the 10 Best React Chart Libraries in 2022: react-flexmonster, react-horizontal-bar-chart, frappe-gantt-react, zingchart-react, react-bpmn and more openbase.com Recharts 📝 Recharts 설치 npm install re..
[React] 리액트 조건부 렌더링 방법
[React] 리액트 조건부 렌더링 방법
2022.02.10🎯 리액트 조건부 렌더링 import React from "react"; import * as FarmPictures from "./style"; export function FarmPicture({ ratio }) { const Render = () => { if (ratio >= 20) { return ; } else if (ratio >= 40) { return ( ); } else if (ratio >= 60) { return ( ); } ... ... }; return Render(); } 이런 식으로 조건에 따라 렌더링을 달리해주는 코드를 작성하고 있었다. 저렇게 작성하면 마지막 조건에서는 Container안에 10개의 아이콘들이 들어가게 된다. 구현은 하겠지만 중복되는 코드를 줄이고 싶었다...
[styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider)
[styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider)
2022.02.08🎯 Styled-Components 전역 스타일링 (Global Style) & styled-reset & ThemeProvider createGlobalStyle Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다. 여러 컴포넌트에 걸쳐 공통된 css를 작업할 때 사용한다. styled-reset 프로젝트 시작할 때 css 초기화를 위해 Normalize 파일을 사용해본 경험이 있을 것이다. 이러한 부분을 npm으로 다운로드하여서 손쉽게 리액트에 적용할 수 있다. ThemeProvider Context API 기반으로 이루어진 Styled-Component에서 제공하는 Theme Provider이다. themeProvier로 감싼 Component들은 them..
[React] Debounce와 Throttle이란?
[React] Debounce와 Throttle이란?
2022.01.25🎯 Debounce와 Throttle이란? onChange 이벤트로 인해 글자가 작성될 때마다 api를 호출하게 된다면 서버에 과부하를 줄 수 있다. 이는 성능상의 문제가 발생될 수 있으며 유저의 사용성을 해치게 된다. 또한 비용적인 문제도 있다! 즉, Debounce와 Throttle는 이벤트 핸들러가 많은 연산을 수행하는 경우 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다. 디바운스(debounce)와 스로틀(throttle)은 시간이 지남에 따라 함수를 몇 번이나 실행할지를 제어하는 유사한 기술이지만 서로 다르다. 📝 Debounce란? 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 이벤트를 그룹화하여 특정 시간이 지난 후 하나의..
[React] useEffect에서 async/await 사용하는 방법
[React] useEffect에서 async/await 사용하는 방법
2022.01.19🎯 useEffect에서 async/await 사용하는 방법 useEffect 내에서 비동기 처리를 해주려고 async/await을 사용하려고 했는데 오류가 발생했다. Effect callbacks are synchronous to prevent race conditions. Put the async function inside: .. useEffect는 아무것도 반환하지 않거나 clean up 함수를 반환해야 한다. useEffect(() => { async function fetchData() { const respons = await fetch("http://localhost:3333/topics/" + id); const result = await respons.json(); console.log..
[React] 리액트 앱 배포 프로세스
[React] 리액트 앱 배포 프로세스
2022.01.19🎯 React 앱 배포 프로세스 IP를 부여받은 서버(VM)에 React 앱을 배포 앱을 빌드하고, 웹서버를 세팅 앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달 사용자는 필요한 데이터를 받아 앱을 로딩 📝 프론트엔드 앱 배포 시 유의할 점 서버와 통신 시, CORS가 허용되었는지 브라우저, 디바이스별로 앱이 정상적으로 동작하는지 앱의 로딩 속도, 각 동작 시 성능, 버그 등을 점검
[React] 리액트로 SSR 구현하기
[React] 리액트로 SSR 구현하기
2022.01.19🎯 React를 활용한 Server Side Rendering 📝 ReactDOMServer ReactDOMServer를 활용하여, 특정 React Component를 HTML로 빌드 Node.js 서버에서 JSX를 사용하여 페이지 빌드 📝 ReactDOMServer.renderToString() React Component를 HTML로 변환한다. 클라이언트의 페이지 요청 시, 변환된 HTML string을 전달한다. ReactDOMServer.renderToNodeStream은 readable stream을 생성하고 브라우저가 받아서 점진적으로 페이지를 그린다. 📝 ReactDOM.hydrate renderToString으로 생성한 HTML의 root을 기준으로, 받아온 React code를 통해 ma..
[React] React 테스팅
[React] React 테스팅
2022.01.17🎯 React 테스팅 📝 코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 코드를 리팩토링 하면, 원래대로 동작하는지 테스트를 한다. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다. → 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. 📝 테스팅 코드 작성의 이점 테스팅 코드를 작성하여, 미연의 에러를 방지할 수 있다. TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상할 수 있다. 리팩토링 할 때 용이하다. 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다. 테스트가 용이하게 코드를 작성하여, 코드..
[Redux] redux-toolkit
[Redux] redux-toolkit
2022.01.17🎯 redux-toolkit 활용 redux에서 공식적으로 추천하는 helper 라이브러리 기존에 만들어야 하는 수많은 보일러 플레이트를 제거하고 유용한 라이브러리를 포함하여 redux 코드를 쉽게 작성하게 한다. redux-devtools, immerjs, redux-thunk, reselect 등의 라이브러리가 미리 포함되어 있다. redux - unopinionated redux-toolkit - opinionated(의견이 반영된) 📝 configureStore const store = configureStore({ reducer: { posts: postsReducer, users: usersReducer } }) redux의 createStore 함수를 래핑 한다. named parameter..