Development (19) 썸네일형 리스트형 스낵바 성능 개선하기 - 문제 해결(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. 스낵바가 열리고 닫힐 때, 간헐적으로 깜박이며 다시 모습을 나타낸다. 여기서 주목할 점은 열릴 때, 닫힐 때 이렇게 두 번 리렌더링이 발생한다는 점, 그리고 스낵바 컴.. 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.. 웹에서 렌더링은 어떻게 발전하고 있을까? 오늘은 웹의 렌더링 발전 과정에 대해 애기해볼까 한다. 1. 최초의 렌더링 SSR 맨 처음 웹은 static한 html 파일 하나로 동작했다. 사용자와 상호작용을 할 수도 없었을 뿐더러 웹이란 특정 분야에서만 사용하던 것이었기 때문에 대중적이게 꾸밀 필요가 없어 더 가벼웠고 간단했다. 그러나 웹의 규모가 점점 커지고 사용자가 많아지면서 동적인 웹이 필요했다. 2. CSR - Ajax 지금은 사라진 네이버 실시간 검색어를 예로 들어보자. SSR은 페이지 내 요소 하나만 바뀌어도 새로고침 하듯 페이지를 새로 받아온다. 그러다 보니 실시간 검색어 같은 경우는 검색어 하나가 업데이트 될 때마다 페이를 새로 받아와야 했을 것이다. (실제 네이버가 그랬는지는 모르겠다!!! 예시일 뿐이다 ㅎㅡㅎ) 그래서 화면 깜빡임.. Babel과 Babel polyfill Babel 바벨은 트랜스파일러이다. 최신 브라우저는 자바스크립트의 ES6 문법을 지원하지만, 구형 브라우저는 그렇지 않을 수 있다. 따라서 구형 브라우저가 이해할 수 있는 자바스크립트 코드로 변환해주는 역할을 바벨이 한다. 예시로 ES6 문법이나 타입스크립트, JSX 문법을 변경해준다. 트랜스파일은 파싱, 변환, 출력 세 단계로 진행된다. 그런데 여기서 바벨은 파싱, 출력을 담당하고 변환은 바벨 플러그인이 담당한다. 바벨 플러그인이란 바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙이다. 이런 플러그인을 매번 환경 세팅마다 설정하는 일은 꽤 번거로운일이다. 그래서 목적에 따라 필요한 플러그인들을 묶어 놓은 것이 preset이다. 대표적인 예로 ES6 문법을 ES5로 변환해주는 @babel/preset-en.. React 앱을 S3+CloudFront로 배포하기(3) - 도메인 연결 React 앱을 S3+CloudFront로 배포하기(1) - S3 Bucket 생성 React 앱을 S3+CloudFront로 배포하기(2) - CloudFront 설정 앞서 S3 + CloudFront로 React 앱을 연결하는 방법을 알아봤다. 지금 우리는 클라우드 프론트 url을 통해 서비스에 접근할 수 있다. 하지만 우리는 서비스에 접근할 때 서비스 url을 검색하여 서비스를 찾아간다. 따라서 지금부터는 가비아에서 도메인을 구입하여 cloudfront와 연결할 예정이다. 이 연결이 완료되면 서비스 주소를 검색하여 서비스에 접근할 수 있다! 1. 가비아에서 원하는 도메인 구입하기 현재 백신중앙정보원이라는 백신 접종 후기를 공유하는 프로젝트를 하고 있다. 따라서 vaccine-review.com 이라.. 이전 1 2 3 다음
