node + Express 서버에 리엑트 프로젝트 띄우기

node.js로 웹 서버 만들기 1. node.js 설치 2. 작업폴더 만든 후 에디터로 오픈 3. server.js 파일 만들고 아래 코드 작성 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, function(){ console.log('listening on 8080'); }); 4. 터미널 열어서 npm init -y 입력 5. npm install express 입력 이렇게 하면 웹 서버 만들기 끝 서버 미리보기를 띄우고 싶으면 터미널에 nodemon server.js 입력 nodemon이 설치되어 있지 않다면 node server.js 입력 리액트 프로젝트..

2023.02.25

느린 컴포넌트 성능 향상 useTransition, useDeferredValue

react 18 버전에서 새롭게 추가된 hook이 있다. useTransition useTransition을 사용하면 동작이 느린 컴포넌트들을 혁신적으로 빠르게 동작시킬 수가 있다. // App.js import { useState } from "react"; function App(){ let [name, setName] = useState(''); let arr = new Array(10000).fill(0);// 0이 10000개 담긴 arr return ( { setName(e.target.value) }} /> { arr.map(()=>{ return {name} }) } ) } input에 유저가 글을 입력하게 되면 그 값을 name 이라는 state에 저장한 후 arr의 갯수(10000개)만..

2022.12.11

불필요한 재 렌더링을 막으려면 memo, useMemo

리액트에서 컴포넌트가 재 랜더링되면 안에 있는 자식 컴포넌트도 항상 함께 재랜더링된다. 이것은 리액트의 특징인데, 만약 자식컴포넌트의 랜더링 시간이 무거운 컴포넌트라면, memo 함수를 통해 재랜더링을 막아줄 수 있다. memo() import { memo, useEffect, useMemo, useState } from 'react'; let Child = memo( function (props){ useEffect(()=>{ console.log("Child") }) return child }) function Cart(){ return ( ) } memo 함수에 들어있는 함수는 꼭 필요할때만 재 랜더링 된다. 꼭 필요할 때란? Child 컴포넌트에 전달되는 props가 변할 때 하지만, 이전 pro..

2022.12.11

lazy import 코드분할과 Suspense

리액트에서 빌드를 하게되면 html, js 파일이 1개만 생성된다. 그 안에 지금까지 만든 컴포넌트 내용들이 들어있어 파일 사이즈가 크다. 그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데, 이 현상을 해결하려면 JS파일을 잘게 쪼개면 된다. 쪼개는 방법은 import 문법을 약간 수정하면 된다 (App.js) import Detail from './routes/Detail.js' import Cart from './routes/Cart.js' 위 코드를 으래 코드로 수정하면 된다. (App.js) import {lazy, Suspense, useEffect, useState} from 'react' const Detail = lazy( () => import('./routes/Deta..

2022.12.11

실시간 데이터가 중요하다면 react-query

react-query? react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 여러가지 장점이 있지만 주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행한다. 몇초마다 자동으로 데이터를 다시 가져온다. 요청 실패시 몇초 간격으로 재시도할 때 다음 페이지를 미리 가져올 수 있다 ajax 성공 / 실패 시 각각 다른 html을 보여준다. 직접 개발해도 되지만, react-query 라이브러리를 사용하면 편리하게 구현할 수 있다. SNS, 코인거래소 같은 실시간 데이터를 보여줘야 하는 사이트에서 유용하다. react-query 사용하기 1. 설치하기 npm install @tanstack/react-query 2..

2022.12.11

React에서 자주 쓰는 if문 작성패턴 5가지

1. component 안에서 쓰는 if else component에서 JSX를 조건부로 보여주고 싶으면 이렇게 쓴다. function Compoenent(){ if ( true ){ return 참이면 보여줄 HTML } return null; } 2. JSX안에서 쓰는 3항 연산자 ternary operator 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드 function Component(){ return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } 3항 연산자는 중첩 사용도 가능하다. 단점. 가독성이 나쁘다. function component(){ return ( { 1 === 1 ? 참이면 보여줄 HTML : ( 2 === 2 ? 안녕 : 하이 ) }..

2022.11.17