react9 코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) 프로젝트가 빌드업됨에 따라 많은 로직들과 Import 라이브러리들이 증가하게 마련이고 우리는 렌더링 최적화를 고민해야하는 시점과 마주하게 된다. 백엔드에서 진행할 수 있는 API 최적화와 별게로 프론트엔드에서도 최적화 할 수 있는 만큼은 진행하는 것이 더 좋은 사용자 경험을 제공한다. 하지만 웹서비스라는 것은 사용자가 어느정도 페이지 로딩이 지연되어도 알게모르게 이해하고 넘어가는 유저들이 많다. 이 정도 기다림 쯤이야.. (본인 포함...) 하지만 그 기다림에도 한계가 분명 있기 때문에 우리들은 개선을 해야한다. 프론트엔드 성능 측정 도구로 크롬 Lighthouse를 통해 성능지표를 확인한다. SSR 방식이 아닌 서비스는 번들링 된 자바스크립트 파일의 분할을 권고한다. 리액트에서는 Lazy, Suspen.. 2022. 9. 28. [번역] useMemo, useCallback 제대로 알기 리액트 개발을 하다보면 useMemo, useCallback 이 두 가지 훅 사용에 대한 혼란을 겪을때가 있다. 이 포스팅은 이 훅들에 대해 정확히 알아 이 혼란을 줄이기 위해 번역하였다. 썸네일 제너레이터 - Thumbnail Generator useMemo useMemo의 기능은 렌더링 사이에서 계산된 값을 기억 하는 것이다. 리액트가 하는 주된 일은 UI를 어플리케이션 상태와 동기화 하는 것이고 이를 수행하는데 사용하는 도구가 리렌더링 이다. 각 리렌더링은 상태를 기반으로 하여 주어진 순간에 어플리케이션의 UI가 어떻게 보여야 하는지에 대한 스냅샷(*) 찍는다. *스냅샷 : 사진으로 비유하자면 각 사진은 모든 상태 변수에 대해 특정 값이 주어졌을 때, 사물이 어떻게 보이는지 포착하는 것 각 리렌더링.. 2022. 9. 23. [Next.js] getStaticProps, getServerSideProps SG / SSR의 개념 SG : Static Generation SSR : Server Side Rendering Next는 브라우저 렌더링 시, 기본적으로 Pre-rendering(사전렌더링)을 한다 Pre-rendering이란, 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다. 이 말을 리액트와 비교해 보자면 아래와 같다. 리액트에서 CSR 방식은 번들링 된 JS 가 클라이언트 단에서 모든 렌더링을 담당했다. 하지만, Next의 Pre-rendering 시스템에서는 `빌드타임(Build Time)` 에서 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해서 가지고 있다가 서버로 해당페이지에 대한 요청이 들어올 때 알맞은 페이지를 반환해준다. No Pre-Rendering,.. 2022. 1. 19. [React] Create-react-app 없이 Webpack, Babel 빌드 해보기 2020.05.22 - [Front/React] - Create-React-App으로 React 시작하기 Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른.. sihus.tistory.com 현재 사내 뿐만 아니라 토이프로젝트들도 CRA (Create React App) 로 빌드한 React 프로젝트들이 많았습니다. 하지만 많은 라이브러리 추가와 프로젝트 규모가 커지면서 빌드 및 구동 속도가 느려지고 무거워지기 시작했습니다. 이것에 대한 근본적인 해결법을 찾고.. 2021. 4. 22. [Nginx] React 프로젝트 배포하는 방법 리눅스 Ubuntu 환경Nginx 웹서버에 React 프로젝트를 배포해보는 방법에 대해서 알아봅니다. React Project Build 첫번째로 리액트 프로젝트 빌드 파일들이 준비되어야 겠죠 CRA(Create React App) 혹은 Webpack을 통해 번들링 및 빌드 된 파일들을 준비해주시면 됩니다. Nginx Setting 저는 AWS EC2 인스턴스에 리눅스 Ubuntu 18.04 환경을 사용하고 있습니다. 1. Nginx Install sudo apt install nginx 2. Nginx Config sudo vi /etc/nginx/sites-enabled/default 위 명령어로 Nginx 설정파일에 접근합니다. server { listen 3000; location / { root.. 2021. 4. 15. AIS Analytics & AIS Analytics Web DashBoard AIS Analytics : AIS 수신메세지 데이터를 분석하고 대량의 데이터를 DB로 Insert하기 위한 목적 구축환경 - NodeJS v12.16.1 라이브러리 - Ais Parser : v0.0.13 - Async : v3.2.0 - Cli-progress : v3.8.2 - Moment : v2.26.0 - Pg(PostgreSQL) : v8.2.1 - Prompt-confirm: v2.0.4 AIS 수신메세지 전체 건수 1. 약 100억 건 기능 1. AIS 수신 원문데이터 Header, Sentence 분리 2. Sentence Parsing 3. Message Type 1~24 분류 및 Message Type Count 4. 년별, 월별, 일별 수신채널(A or B)에 따른 Message .. 2020. 7. 2. React Hook 이해하기 - useEffect (Effect Hook) useEffect가 하는 일 리액트에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야 하는지를 말한다. 리액트에게 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 후 Effect를 불러온다. useEffect를 컴포넌트 안에서 불러내는 이유 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 우리가 지정한 state 또는 props에 접근 할 수 있게 되고, 특별한 API 없이도 값을 가져올 수 있기 때문이다. useEffect는 렌더링 이후 매번 수행되나? useEffect는 렌더링 이후 매번 수행 된다. ( 첫번째 렌더링 ~ 이후 모든 업데이트에서 수행 됨 ) 마운팅, 업데이트라는 방식으로 생각하는 것 보다 -> 렌더링 이후에 발생 하는 것 이라고 생각하는 것이 쉽다. useEffect.. 2020. 5. 25. React Hook 이해하기 - useState (State Hook) React Hook, useState useState는 state를 함수 컴포넌트 안에서 사용할 수 있도록 해준다. 기존에는 state를 추가하고, 변경하고 싶을 때 클래스(Class) 컴포넌트로 바꾸어 사용했으나, 이제 함수형 컴포넌트안에서 Hook을 이용해 state를 사용할 수 있다. Hook의 규칙 최상위 레벨에서만 Hook을 호출해야 한다. 오직 React 함수 내에서만 Hook을 호출해야 한다. useState를 사용하여 state 초기화 하기 import React, { useState } from 'react'; export default function Sample() { // 새로운 state 변수 선언 및 할당 const [count, setCount] = useState(0); } .. 2020. 5. 25. Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른 속도와 개발환경을 구성해줍니다. 그럼 시작해볼까요. 첫번째 리액트 앱 만들기 터미널을 열고, 프로젝트가 생성될 곳으로 이동해준 뒤 create-react-app 모듈을 Global 로 설치 해줍시다. npm i -g create-react-app 설치가 완료 된 후, 리액트 앱을 생성합니다. create-react-app [프로젝트명, 대문자가 들어가지 않도록합니다.] npx create-react-app [프로젝트 명, 소문자로만 작성] npx create-re.. 2020. 5. 22. 이전 1 다음
