발자취

웹 개발을 하다 보면, 브라우저에 데이터를 저장해야 할 상황이 많습니다. 이때 사용할 수 있는 기술이 바로 Web Storage입니다. Web Storage는 클라이언트 측에 Key-Value 형식으로 데이터를 저장할 수 있게 해주는 기능으로, HTML5부터 지원되기 시작했습니다.개념Web Storage는 HTML5에서 도입된 기술이다.데이터를 Key - Value 쌍으로 저장할 수 있다.저장된 데이터는 서버로 전송되지 않고 클라이언트(브라우저)에만 존재한다.보통 5MB에서 10MB까지 저장 가능하다.JavaScript를 통해 데이터를 저장하고 조회하며 삭제할 수 있다.Web Storage의 두 가지 종류1.  Local StorageLocal Storage는 브라우저에 데이터를 key-value 쌍으로..

React Hooks는 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 기능입니다. useState, useEffect, useCallback, useMemo, useContext, useRef, useLayoutEffect 가 있지만 대표적인 많이 쓰이는 훅으로 useState, useEffect, useCallback 등이 있습니다,useState – 상태 관리 훅useState는 컴포넌트 내부에서 상태를 관리하는 훅입니다.상태 값과 그 상태를 변경하는 함수를 반환합니다.상태 값이 변경되면 해당 컴포넌트가 리렌더링 됩니다.import { useState } from "react";function Counter() { // count 상태 변수와..

React의 상태(state)가 변경되면 렌더링(Rendering) 과정이 실행됩니다.React는 효율적인 업데이트를 위해 Virtual DOM을 활용한 최적화된 리렌더링을 수행합니다.React는 변경된 state 값을 Virtual DOM에 적용합니다.Virtual DOM이란?실제 DOM을 직접 변경하는 것이 아니라, 메모리 상에 존재하는 가상의 DOM을 수정하는 방식.변경 사항을 먼저 Virtual DOM에 적용한 후, 실제 DOM과 비교하여 최소한의 변경만 실제 DOM에 반영함.React의 State가 변경되면? setState(useState)가 호출됨Virtual DOM을 변경기존 Virtual DOM과 비교(diffing)변경된 부분만 실제 DOM에 반영 (최적화)필요한 경우, useEffec..

[Node.js]Node.js는 브라우저 밖에서도 Javascript를 실행할 수 있게 해주는 런타임 환경이다.크롬 v8 기반으로 동작하며 Single-Thread의 non-blocking I/O 이벤트 기반으로 동작한다.아래 URL을 통해 Node.js를 설치할 수 있다.https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org [NPM ( Node Packege Manager )]Javascript를 위한 패키지 관리자로 공개된 Javascript 라이브러리들을 쉽게 설치해 사용할 수 있다.[React 파일 생성하기]..

React는 SPA(Single Page Application) 라이브러리로, 기존의 SSR(Server Side Rendering) 방식과 달리 CSR(Client Side Rendering)을 기본적으로 사용합니다. 이를 통해 서버 부하를 줄일 수있습니다.1. SSR(Server Side Rendering) vs CSR(Client Side Rendering)SSR(Server Side Rendering)서버에서 HTML을 미리 생성하여 클라이언트에 전달하는 방식입니다.페이지 이동 시마다 새로운 HTML을 서버에서 받아야 하므로 서버 부하가 큼.예: 전통적인 웹사이트, Next.js 등의 프레임워크에서 지원.CSR(Client Side Rendering)서버에서 데이터만 받아오고, HTML과 UI는 ..

로컬스토리지 로컬스토리지는 사용자(클라이언트) 피시에 데이터를 저장하는 방법으로 쿠키나 캐시등을 삭제하지 않는 다면 영구적으로 브라우저에 데이터를 보존할 수 있다. 사용자 개인피시에 저장하는 방식이기 때문에 컴퓨터를 해킹하지 않는 이상 보안적으로 강력하지만 아이디나 비밀번호같이 중요한 개인정보를 저장하는 것은 위험하며 보통 지속적으로 필요한 데이터인 자동 로그인등을 로컬 스토리지에 저장한다. 로컬스토리지 등록 로컬 스토리지에 객체를 등록할 경우 key3과 같이 {value:30}을 바로 쓰게되면 브라우저에서 value가 {object Object}로 출력된다.웹브라우저에서는 읽지 못하는 데이터로 등록이 되기 때문에 key4와 같이 JSON.stringify를 사용하여 직렬화 하여 사용해 줘야한다. 소스코..

라우터 설치 dom뒤에 @6는 라우터의 버전을 의미한다. React route 참고서 https://reactrouter.com/en/main/start/tutorial#setup Tutorial v6.11.0 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in th reactrouter.com BrowserRou..

prop drilling 이란 React 컴포넌트 트리의 일부로 데이터를 전달하기 위한 프로세스. props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정을 말한다. 이를 해결하기 위해 React에서는 Context를 사용한다. Context 생성 const MyContext = React.createContext(value); Context Provider를 통한 데이터 공급 { //context안에 위치할 자식 컴포넌트들 }

컴포넌트 내에서 함수가 많아지고 길어지는 방법은 복잡해지기 때문에 올바른 방법이라고 할 수 없다. useReducer은 컴포넌트의 상태변화 로직을 컴포넌트 밖으로 분리하여 사용할 수 있다. reducer const reducer = (state, action) => { switch (action.type) { case 1: return state +1; case 2: return state +2; case 3: return state +3; default: return state; } ); 형식 const reducer = (상태변화가 일어나기전 status, 어떤 상태변화를 일으킬 지의 action 객체) =>{ switch(action.type){ return 새로운 상태 값 } } dispatch ..

Reac.memo는 고차 컴포넌트이다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. Reac.memo은 똑같은 Prop을 전달받으면 리렌더링 하지 않는다. 문자열과 정수형에 memo 사용할 경우 import React, { useEffect, useState } from "react"; const Textview = React.memo(({ text }) => { useEffect(() => { console.log(`updatae :: text : ${text}`); }); return {text}; }); const CountView = ({ count }) => { useEffect(() => { console.log(`updatae :: count : ${count}`);..