1. 리액트를 내가 만든 서버에서 사용하기 1) 노드js 설치 2) 작업할 폴더를 생성하고 해당 폴더를 에디터로 열기 3) server.js 파일을 생성하고 다음과 같이 코드 작성 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, function () { console.log('서버가 8080 포트에서 실행 중입니다.'); }); 4) 터미널을 열고 npm init -y 명령을 실행하여 package.json 파일을 생성 5) npm install express 명령을 실행 6) node server.js 명령으로 서버 실행해보기 7) 웹브라우저에서 localhost..
이번에는 자바스크립트의 동기와 비동기 처리 방식에 대해 알아보고, 그 중에서도 리액트의 seetState 함수의 특징에 대해 알아보겠습니다. 1. 자바스크립트에서의 동기와 비동기 처리 자바스크립트는 기본적으로 코드를 동기적으로 처리합니다. 즉, 코드는 작성된 순서대로 한 줄씩 실행됩니다. console.log(1+1) console.log(1+2) console.log(1+3) 위 예시 코드를 보면 한 줄씩 실행되어 2, 3, 4를 순차적으로 출력합니다. 이는 대부분의 프로그래밍 언어에서 동일하게 동작합니다. 하지만, 자바스크립트에서는 비동기적인 코드 실행도 가능합니다. 이는 특정 함수들이 처리 시간이 오래 걸릴 수 있는 경우에 주로 사용됩니다. 예를 들어 AJAX 요청이나 이벤트 리스너, setTime..
이번 시간에는 Progressive Web App, 줄여서 PWA를 알아보겠습니다. 1. PWA란? PWA는 웹 개발 기술 중 하나로, 웹 사이트를 안드로이드나 ios 모바일 앱처럼 사용할 수 있도록 만들어주는 기술입니다. 그렇다면 PWA를 사용하면 무엇이 좋을까요? 1) 스마트폰이나 태블릿의 홈화면에 웹사이트를 설치할 수 있습니다. - 사용자가 웹사이트를 설치하면 앱처럼 동작하는데, 일반 사용자들은 이것이 앱인지 구분하기 어렵습니다. 2) 오프라인에서도 동작할 수 있습니다. - service-worker.js 파일과 브라우저의 Cache Storage를 통해 가능하며 JS로 게임 등을 개발할 때 유용합니다. 3) 설치 유도 비용이 적습니다. - 플레이 스토어에 앱을 올리는 것을 많은 비용이 들지만, P..
리액트 18버전부터는 렌덜이 성능이 저하되는 컴포넌트에서 사용할 수 있는 기능들이 추가되었습니다. 이러한 기능들을 활용하면 오랜 시간이 걸리는 작업을 수행하는 컴포넌트가 있어도 렌더링 과정에서 버벅임 없이 부드럽게 동작할 수 있습니다. 1. Automatic Batching 리액트는 state 값이 연속적으로 변경되었을 때 묶어서 마지막에 한 번만 재렌더링합니다. 이를 Batching이라고 하며 불필요한 재렌더링을 막을 수 있다는 장점이 있습니다. setCount(1); setName(2); setValue(3); // 한 번만 재렌더링됨 리액트 18버전 이전에는 ajax 요청이나 setTimeout 안에 있는 state 변경 함수와 같은 경우에는 batching 처리가 되지 않았습니다. 하지만, 리액트..
리액트에서 컴포넌트를 개발할 대, 부모 컴포넌트가 재렌더링될 때마다 자식 컴포넌트도 함께 재렌더링되는 경우가 있습니다. 이러한 경우 자식 컴포넌트가 무거운 작업을 수행하는 경우에는 성능 저하가 발생할 수 있습니다. 이런 상황에서 memo와 useMemo를 사용하여 불필요한 재렌더링을 방지할 수 있습니다. 1. memo (Cart.js) import {memo, useState} from 'react' let Child = memo( function(){ console.log('재렌더링됨') return 자식임 }) function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } Cart.js 파일에 Chi..
React 개발자 도구와 Redux 개발자 도구는 개발 중인 React를 디버깅하고, state와 컴포넌트 구조를 확인하는 데 도움을 주는 유용한 도구입니다. 1. React 개발자 도구 React 개발자 도구는 크롬 웹 스토어에서 설치할 수 있는 확장프로그램입니다. 설치 후, 크롬 개발자 도구의 Components탭에서 React의 컴포넌트 구조를 살펴볼 수 있습니다. 이를 통해 컴포넌트 구조를 시각적으로 확인할 수 있고, 컴포넌트의 props와 state를 쉽게 확인할 수 있습니다. 또한 컴포넌트를 선택하면 해당 컴포넌트의 props과 state를 수정해 볼 수도 있습니다. 2. Redux 개발자 도구 Redux 개발자 도구도 크롬 웹 스토어에서 설치할 수 있는 확장프로그램으로, Redux를 사용하여..
이번에는 localStorage를 사용하여 state 데이터를 저장하는 방법에 대해 알아보겠습니다. 현재 저희가 만들고 있는 쇼핑몰 사이트는 새로고침하면 모든 state데이터가 초기화되고 있습니다. 브라우저가 HTML, CSS, JS 파일을 다시 읽기 때문인데, 데이터 리셋이 싫다면 데이터를 서버로 보내서 데이터베이스에 저장하거나, 서버를 사용할 수 없다면 localStorage를 사용할 수 있습니다. localStorage는 브라우저에 정보를 저장하는 공간으로, 사용자의 브라우저에 정보를 저장하고 싶을 때 사용됩니다. 1. localStorage 사용하는법 크롬 개발자 도구의 Applicatiion 탭을 통해 localStorage를 확인할 수 있습니다. localStorage는 약 5MB의 문자 데이..
1. 컴포넌트 안에서 쓰는 if/else function Component() { if (true) { return 참이면 보여줄 HTML; } else { return null; } } 컴포넌트 함수 내에서 if문을 작성하여 조건에 따라 JSX를 반환합니다. 조건이 참일 경우 JSX를 반환하고 거짓을 경우 null을 반환합니다. 이 때, return키워드를 사용해서 JSX를 반환해야합니다. return() 안의 JSX 내에서는 자바스크립트 if문을 사용할 수 없습니다. 2. JSX 안에서 쓰는 삼항연산자 function Component() { return ( {1 == 1 ? 참이면 보여줄 HTML : null } ) } JSX 내에서 삼항 연산자(조건 ? 참일 때 실행할 코드 : 거짓일 때 실행할 ..
1. state 변경하기 Redux에서는 object/array 같은 자료형의 state를 직접 수정하는 것이 편리합니다. Redux에 딸려오는 Immer.js 라이브러리의 도움으로 state 사본을 생성하여 직접 수정해도 잘 작동합니다. let user = createSlice({ name: 'user', initialState: { name: 'kim', age: 20 }, reducers: { changeName(state) { return { name: 'park', age: 20 }; } } }); 예를들어 name 값을 kim에서 park으로 바꾸고 싶을 때 위와 같은 코드를 작성해도 되지만, let user = createSlice({ name : 'user', initialState : {..
Redux는 state를 효율적으로 관리하기 위한 라이브러리입니다. 모든 컴포넌트가 공유할 수 있는 보관소인 redux store에 state를 보관하여 필요한 곳에서 가져다 사용할 수 있습니다. Redux로 state를 사용하는 방법은 아래와 같습니다. 1. createSlice() 함수로 state 생성 (store.js) import { configureStore, createSlice } from '@reduxjs/toolkit'; // 1. createSlice()로 state 만들기 let user = createSlice({ name: 'user', initialState: 'kim' }); 먼저, store.js 파일에서 createSlice 함수를 사용하여 원하는 state를 생성합니다...
