본문 바로가기

전체 글

 (45)
스낵바 성능 개선하기 - 문제 해결(1) 스낵바 성능 개선하기 - 문제 인식 위 글에서 설명한 문제 중 두 번째 문제를 해결한 과정을 적어보려 한다. 우선 스낵바가 열리고 3초 후에 닫히는 로직은 다음과 같다. 스낵바 동작 순서 1. openSnackbar('로그인 되었습니다.') 호출 2. 전역 상태 변경 ▶ isSnackbarOpen = true, message = '로그인 되었습니다.' 3. useEffect에서 isSnackbarOpen = true가 된 걸 감지하고 setTimeout 함수 실행 useEffect(() => { if (!isSnackbarOpen) return; const timerId = setTimeout(() => { dispatch(closeSnackbarAction()); }, 3000); return () =..
스낵바 성능 개선하기 - 문제 인식 백신 중앙 정보원 프로젝트에서는 원래 스낵바 구현을 직접 하지 않고 notistack 라이브러리를 통해 스낵바를 적용했었다. 그런데 아무래도 내 프로젝트에 완전히 커스텀하기 어려웠기 때문에, 스낵바 컴포넌트 + 리덕스 + 커스텀 훅을 통해 내 프로젝트에 완전히 커스텀 된 스낵바 컴포넌트를 만들었고, 이어서 snack-snack 라이브러리도 출시했다. 그런데 최근 프로젝트에 적용한 스낵바에 성능적 문제가 있다는 걸 깨달았다 🥲. 내가 발견한 문제는 다음과 같다. 1. 스낵바가 열릴 때 한번, 닫힐 때 한번 전체 페이지가 리렌더링 된다. 2. 스낵바가 열리고 닫힐 때, 간헐적으로 깜박이며 다시 모습을 나타낸다. 여기서 주목할 점은 열릴 때, 닫힐 때 이렇게 두 번 리렌더링이 발생한다는 점, 그리고 스낵바 컴..
클래스형 컴포넌트 vs 함수형 컴포넌트 - Hook API 등장 전 요즘 React를 사용하는 개발자들은 함수형 컴포넌트를 많이 사용한다. 나 역시도 클래스형 컴포넌트를 작성해본 기억이 거의 없다. 그렇다면 리액트 개발자들은 클래스형 컴포넌트를 왜 만들었을까? 처음부터 함수형 컴포넌트만 사용하지? 🤔 ㅎ ㅎ 앞으로 몇 개의 글에 걸쳐서 리액트 사용법이 어떻게 발전되었는지에 정리해보려 한다. 리액트가 등장했을 초반에는 함수형 컴포넌트보다 클래스형 컴포넌트가 훨씬 더 인기를 끌었다. 왜일까? 클래스형 컴포넌트는 상태를 가질 수 있다 함수형 컴포넌트는 말 그대로 함수이다. 그리고 함수는 한번 호출되면 return과 함께 바로 종료되기 때문에 다시 호출할 수 없다. 물론 새로 호출은 가능하다. 함수 내에 변수를 선언하면서 상태를 가질 수는 있다. 하지만 이 상태의 생명주기는 함..
자바스크립트 Closure (+ 실행컨텍스트, 렉시컬 환경) 오늘은 자바스크립트의 클로져에 대해 얘기해볼까한다. 그런데 클로져를 이해하기 위해서는 클로져가 실행될 수 있는 환경에 대한 이해가 먼저 필요하다. 자바스크립트 엔진는 자바스크립트 코드를 처리할때 평가와 실행의 과정을 거친다. 1. 평가 실행컨텍스트를 생성하고, 선언문(변수, 함수)만 먼저 실행하여 해당 실행 컨텍스트의 렉시컬 환경 안 환경 레코드에 key로 등록한다. 이때 호이스팅이 발생한다고 볼 수 있다. 2. 실행 실제로 실행하는 코드의 정보(식별자에 바인딩 될 값)를 실행 컨텍스트 안의 스코프에서 검색한다. 위의 내용은 자바스크립트를 처음 접하는 사람이 보기에는 낯선 단어가 꽤 많다. 하나씩 알아보자. 실행 컨텍스트 실행 컨텍스트는 코드가 실행될 수 있는 환경을 제공한다. 따라서 이 환경 속에는 코..
자바스크립트 Promise Promise 객체 프로미스 객체는 비동기 통신에 이용되는 객체이다. 프로미스 객체 등장 전에 자바스크립트는 콜백함수를 통해 비동기 통신을 처리했다. 그런데 서비스의 규모가 커질수록, 콜백함수를 통한 비동기 통신 처리는 여러 한계를 마주쳤다. 대표적인 예로, 콜백함수가 계속해서 콜백함수를 낳는 콜백 헬 및 애매한 에러 처리가 있다. 그래서 콜백 헬을 없애고, 더 명확한 비동기 통신의 표현을 위해 ES6에서 프로미스 객체가 도입되었다. 비동기 통신을 callback으로 처리했을 때 문제점 콜백 헬(callback hell) 자바스크립트에서 자주 사용되는 비동기 통신은 각 요청을 병렬로 처리한다. 덕분에 프로그램이 Blocking되지 않는(중단되지 않는) 장점이 있다. 그러나 비동기 통신을 올바르게 처리하기..
Next.js + React를 AWS EC2로 배포하기(2) - 어플리케이션 무중단 배포 저번 포스트에서 EC2 Instance 생성 및 내 컴퓨터에서 접근까지 해보았다! 이번 포스트에서 내 터미널에서 접근한 EC2 Instance에 React 어플리케이션 무중단 배포를 정리해볼까 한다. Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 React 어플리케이션 무중단 배포 1. 내 프로젝트 clone 받기 배포 할 프로젝트를 클론받자. 2. Clone 받은 폴더로 이동 후, yarn(or npm)을 설치 를 하려하니 에러가 뜬다 🥲 우분투 내에서 yarn을 설치 할 경우에 Node가 다운되어 있지 않아 오류가 발생한다. Node부터 설치해보자. 3. nodejs 설치 아래의 명령어로 Node를 설치하자 $ sudo apt-get update $ sudo a..
Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 이전에 CSR을 이용하는 React 어플리케이션은 AWS Cloudfront + S3를 통해 배포했다. 이번에 새롭게 SSR을 도입한 React 어플리케이션은 AWS EC2를 통해 배포해볼까 한다. 순서는 다음과 같다. 1. EC2 인스턴스 생성 2. React 어플리케이션 배포 EC2 인스턴스 생성 1. AWS EC2 로그인 후 인스턴스 시작 클릭 2. Amazone Machine Image (AMI)선택 AMI란 소프트웨어 OS, 애플리케이션 서버, 소프트웨어 환경설정 등이 포함된 템플릿(이미지)이다. (어떤 점에서 이미지라는 건지는 공부가 더 필요하다! ) 가상 머신를 운영하는 데에 필요하며, AWS EC2의 경우 AMI는 서버를 이미지 파일로 만든 것이다. 나는 Ubuntu Server 18.04..
React에 Next.js 도입하기 현재 React + Javascript로 구성된 애플리케이션에 Next.js를 도입해보려한다! 처음해보는거라 신난다 😁 1. next 설치 원래 react, react-dom, next 설치가 필요한데 이미 react, react-dom은 설치되어 있던 상황이라 추가로 next만 설치했다. $ yarn add next 2. pages/ + pages/index.js 생성 Next.js는 pages라는 폴더를 꼭 필요로 한다! 그래서 최상위 디렉토리에 pages 폴더를 만들고, 첫 화면을 보여주는 index.js를 생성했다. // pages/index.js import React from 'react'; const Index = () => { return 첫 화면; }; export default Inde..

티스토리툴바