프론트 엔드/React

[React] 컴포넌트 성능 개선 React.memo()

1.React.memo란? React.memo는 함수형 컴포넌트에서 동일한 파라미터로 생성된 함수들을 메모이제이션을 이용하여 재사용하게 도와 줍니다. 예를 들어 다음과 같은 상황이 있다고 가정해보겠습니다. 이름, 나이, 주소값을 받는 useState를 이용해 표현하고 있고 주소를 제외한 이름, 나이를 파라미터로 받는 컴포넌트가 있습니다. 여기서 이름, 나이 값이 변경되면 해당 값을 가져다 사용하는 컴포넌트도 당연히 리 렌더링이 발생되어 수정된 화면을 보여줘야 합니다. 하지만 주소값이 변경될 경우에는 어떨까요? 주소 값이 변경되더라도 useState로 정의된 값들을 같이 리 렌더링이 발생되기 때문에 이름,나이,값이 동일함에도 불구 하고 해당 값들을 가져다 사용하는 컴포넌트도 리 렌더링이 발생됩니다. 결국 ..

[React] react에서 불변성을 지켜야하는 이유

불변성이란 단어는 React를 관통하는 핵심키워드라 볼 수 있습니다. 불변성은 어떤 값을 직접 변경하지 않고 새로운 값으로 다시 만들어내는 것입니다. 필요한 값을 변형해서 사용하려면 어떤 값의 사본을 만들어 사용해야 합니다. JS에서 원시타입은 괜찮지만 객체 타입의 불변성을 지키는 것은 고려해야 하는 부분이 있습니다. 아래와 같은 코드가 있다고 가정할때 user와 copyUser 변수는 같은 참조 (Memory Address) 값을 가집니다. (객체 타입은 참조 값을 주고받습니다.) 그렇기 떄문에 user가 가지고 있는 객체의 값이 변경된다면 copyUser도 같은 객체를 가지기 때문에 값이 공유 됩니다. 하지만 이런 작동 방식에는 값을 예측할 수 없거나 버그를 유발하기 떄문에 붋변성을 통해서 해결해야 ..

[React] useCallback과 useMemo를 제대로 사용하는 법

useCallback React 문서에는 아래와 같이 설명되어 있습니다. const memorizedCallback = useCallback(() => { doSomething(a,b); }, [a,b]); // function , dependencies 메모이제이션된 콜백을 반환합니다. 콜백과 그것의 의존성 값의 배열을 전달해야 합니다. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다. useCallback(fn, deps) 은 use..

[React] useEffect와 useLayoutEffect의 차이는 무엇일까?

React가 웹 프레임워크 시장에서 대세가 되면서, 많은 사람들이 웹 어플리케이션을 제작하기 위해 React를 사용하고 있습니다. 특히, 2018년 10월의 React Conf에서 발표된 React Hooks가 등장함에 따라서 Class Component기반에서 Functional Component 기반으로 넘어오고 있습니다. 많은 hooks에서 useEffect 와 useLayoutEffect 의 차이점을 명확하게 구분하지 못하는 경우가 많아 이번 글에서는 useEffect 와 useLayoutEffect 의 차이점을 설명해 보겠습니다. 설명에 들어가기전에 필수개념2가지를 먼저 눈에 익혀보자 Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스..

[React] 프로젝트를 Github Pages에 배포하는법

이번 시간에는 그 동안 다루지 못한 Github Pages를 React에서 배포하는 방법을 알아보도록 하겠습니다. 제가 지금 현재 Windows버전으로 진행중인데 방식은 동일하니 참고하시면 되겠습니다. 우선 먼저 배포할 프로젝트를 준비해주세요. 1. Github 저장소 만들기 먼저 자신의 Github 저장소를 하나 생성해줍시다. 저장소 이름, 설명을 작성후 Create repository 클릭 첫번째 comman line 부분을 오른쪽상단 아이콘을 클릭해 복사 or 아래 명령어대로 차례대로 입력 git init git add * git commit -m "first commit" git remote add origin https://github.com/Koras02/react-github-pages.gi..

REACT - Github Pages SPA(Single-Page-App) 해결

이번 시간에는 단일 페이지 블로그를 제외한 클론 페이지 제작 시 중요한 SPA(Single-Page-App)에 대한 해결방법을 포스팅해보겠습니다. 기본적으로 깃허브에서는 SPA를 지원하지 않습니다. 리액트 라우터(React)의 를 사용하면 데모사이트 같은 리액트(react), 그 외 프런트엔드 라이브러리 및 프레임워크를 사용하면 애플리케이션을 쉽게 배포 할 수 있습니다. 1.SPA 가 필요한 이유? 기본적으로 github Pages는 단일 페이지 앱을 지원하지 않습니다. 예를 들어 URL이 example.tId/foo이고 /foo가 프론트엔드 경로인 경우, 깃허브 페이지 서버는 /foo를 모르기 때문에 404 에러를 반환합니다. 이 문제를 해결하는 방법을 알아보겠습니다. 작동방식 - Github 페이지 ..

Sentry.io로 프로젝트 오류 잡아내기

이번 시간에는 프로젝트에 오류를 쉽게 정리하고 찾아내는데 유용한 Sentry.io에 대해서 알아보겠습니다. setry.io란 프로젝트 진행중 어떤오류가 발생한지를 정리해주는 사이트인데요 우리가 일반적으로 오류가 발생하는 부분은 console.log나 vs code로 작성된 에디터에서 종종 발견하는데요 이에대해서는 우리가 검색해서 해결해야되는 복잡함도 있습니다. 또한 이 많은 오류들을 정리하는데에도 어렵움이있는데 이런 오류들을 잡기위해서 제일 유용한것이 . sentry.io라고 할수 있습니다. 1. Sentry.io를 사용하는 이유 - 우선 Sentry에 대해 알아보자면 프로젝트를 운용하는데 있어 발생하는 에러들을 로깅하여 쉽게 파악할 수 있으며, slack 같은 협업 도구들에 연동시 오류들을 쉽게 모니터..

[Firebase] React에서 Firebase Auth를 사용한 로그인 구글 로그인 구현

이번 시간에는 React 프로젝트에서 Firebase 통한 로그인을 구현하는 법을 알아보겠습니다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com Firebase 로그인을 구현하기전 먼저 Firebase 프로젝트를 만들어준다. 왼쪽 상단 톱니바퀴를 누르면 프로젝트 설정이 뜹니다. 프로젝트 설정에 가셔서 스크롤 내리시면 SDK 설정 및 구성이라는 곳에 가면 Config키들이 있으니 apiKey에서부터 measurmentid 까지 복사하세요 1.React 앱에 Firebase 추가하기 - 먼저 내가 생성한 프로젝트에 firebase 추가가 필요하다. yarn add firebase 다음..

[React+Node.js] Node.js(Express)연동하기 - 3.다시한번 도전!

저번 Express 시간에 실패 이후로 눈물을 머금꼬 다시한번 도전해보도록 하겠습니다. 기준 은 여러 블로그를 참조해서 그떄 처럼 맟추었습니다. 1. React Project 만들기 npx create-react-app react-express 새로운 프로젝트를 만들어 줍니다. 2. Node.js express 설치하기 npm install express --save && yarn add express 터미널에서 express 를 설치해준다. 3. Proxy 설정하기 server 폴더를 만들어주고 그 아래 routes 폴더를 만들고 index.js 와 server.js를 해당하는 폴더 아래에 생성 초록색으로 표시된 부분만 새로 생성해주세요 termial 에서 middleware를 설치해주세요 npm in..

[heroku] React Heroku 배포하기

이번시간에는 React를 배포하는 방법중 하나인 Heroku를 알아보도록 하겠습니다. Herokut란 여러 프로드래밍에 언어를 지원하는 클라우드 컴퓨팅 플랫폼입니다. Git과 Github를 지원해주고 많은 서비스를 애드 온과 API로 지원합니다. 소규모 프로젝트에서 무료 플랜을 기본적으로 제공해주면서 굉장히 좋기 때문에 한번 사용하는 것도 나쁘지 않을 거라 봅니다. 우선 heroku를 이용하기 위해 Heroku 공식 페이지에서 다운받으셔야 합니다. 위에 홈페이지에서 The Heroku CLI | Heroku Dev Center Last updated April 27, 2021 The Heroku Command Line Interface (CLI) makes it easy to create and mana..

[Material-Ui] React에서 자주사용하는 스타일 UI라이브러리

이번 시간에는 React에서 자주 사용하는 기능/디자인들을 Compnent/Api로 제공해서, Reacr 개발시 다양한 UI를 만들어주는 Meterial-ui 에 대해 알아보도록 하겠습니다. 1. Material-UI 시작하기 @material-ui/core // npm 사용시 npm install @material-ui/core // yarn 사용시 yarn add @material-ui/core @material-ul/icons // npm 사용시 npm install @material-ui/icons // yarn 사용시 yarn add @material-ui/icons meterial에서 제공하는 icon도 다운받아줍니다. material-ui을 불러오기위해 아래 명령어른 입력한다. import ..

[React] Firebase 배포하기

이번 시간에는 정말 간단한 Firebase 웹배포하는 법을 알아봅시다 이번시간에는 정말 할게없어서 빨리 끝날 겁니다. 1. 설치 CLI 설치법 npm install -g firebase-tools && yarn add firebase-tools yarn && npm 둘중 하나로 firebase-tools을 설치해주세요 2. firebase 권한주기 우선 firebaes 홈페이지에서 시작하기를 눌러줍시다. 프로젝트 만들기 - 프로젝트 추가 - 프로젝트 이름 설정 - 서버설정 - 끝 여기까지 끝입니다. Hosting 아이콘을 눌러 시작하기 아래 내용에 제가 코드를 치면서 설명해드리겠습니다. yarn add firebase-tools 먼저 방금 전 위 에서 설명한 tools를 받아주세요 저는 yarn을 선호해..