개발천재

리액트 컴포넌트(Component) 개념정리컴포넌트는 리액트에서 가장 중요한 개념 중 하나이다. 리액트 애플리케이션은 컴포넌트(Component)로 구성되며, 각각의 페이지는 여러 컴포넌트의 조합으로 만들어진다. 간단히 말해, 컴포넌트는 특정 기능이나 UI를 담당하는 독립적인 코드 블록이다. 작은 컴포넌트를 조합하여 더 큰 컴포넌트를 만들고, 이렇게 만들어진 컴포넌트들이 모여 전체 애플리케이션을 구성한다. 리액트는 컴포넌트 기반 구조여서, 개발과 유지보수에서 많은 장점이 있다. 하나의 컴포넌트를 반복적으로 사용할 수 있기 때문에 개발 시간을 단축할 수 있다. 또한, 기능별로 컴포넌트를 분리하여 개발하면 코드의 가독성이 높아지고, 변경 사항이 생기더라도 특정 컴포넌트만 수정하면 되기 때문에 유지보수 비용이..

웹 개발에서 클라이언트와 서버가 데이터를 주고받을 때, URL을 통해 원하는 정보를 전달하는 방법에는 여러 가지가 있다. 그중 대표적인 방식이 Query String과 Path Variable이다. 두 방법 모두 서버로 데이터를 전달하는 역할을 하지만, 사용 목적과 방식에서 차이가 있다. Query String은 URL의 끝에 ?key=value 형태로 데이터를 추가하는 방식이며, 보통 검색이나 필터링과 같은 기능에 사용된다. 반면, Path Variable은 URL 경로 자체에 값을 포함하는 방식으로, 특정 리소스를 식별할 때 활용된다. Query String (쿼리 스트링)URL의 끝에 물음표 (?)를 기준으로 매개변수를 추가하는 방식이다. Query Parameter라고도 한다. 매개변수는 key=..

CORS는 웹 브라우저에서 도메인이 다른 서버끼리 서로 요청을 주고 받을 수 있게끔 해주는 것  CORS 이해하기CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 다른 출처의 리소스를 요청할 수 있도록 허용하는 것을 말한다. 웹 애플리케이션은 보안을 위해 기본적으로 동일 출처 정책(Same-Origin Policy)을 따르는데, 이 정책에 따라 한 웹 페이지가 다른 출처의 리소스에 접근하려고 하면 제한이 발생한다. CORS는 이 제한을 허용할 수 있도록 한다. example.com 이라는 집이 있다고 가정해보자. example.com이라는 집은 그 집에 사는 사람만 들어갈 수 있다. 다른 사람은 허락 없이 들어올 수 없다. 그런데 만약에 example.com에 살고 있는 ..

props 개념이해props는 prop이 여러개인것을 의미한다. 프롭은 property를 줄여서 쓴 것인데 '속성'이라는 뜻을 가지고 있다. 여기서의 속성은 컴포넌트의 속성을 의미한다. React의 props(properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. props를 사용하면 컴포넌트 간 재사용성과 유연성을 높일 수 있다. 또한 props는 읽기 전용(immutable) 이므로 자식 컴포넌트에서 직접 변경할 수 없다. props는 오직 부모에서 자식에게만 전달되며 객체 형태로 전달된다. (단방향 데이터 흐름) [ props의 특징] - 읽기 전용 : read-only 읽을 수만 있고 값을 변경할 수 없다.- 단방향 데이터 흐름 : 부모에서 자식에게만 전달된다.- 구..

리액트 라우터 v6에서는 Route 컴포넌트의 사용 방식이 v5와 달라졌다. element 속성을 사용하여 JSX를 전달하고, Route 컴포넌트에 닫는 태그 없이 바로 JSX를 넣는 방식으로 변경되었다. 또한, "404 페이지"와 같은 fallback 경로를 처리할 때는 path="*"을 사용한다.  path="*"를 사용한 404 페이지 설정가장 간단한 방법은 를 추가하여 404 페이지를 만들고, 존재하지 않는 경로로 이동할 경우 해당 페이지를 렌더링하는 것이다.// App.js import { BrowserRouter as Router, Routes, Route } from "react-router-dom";import HomePage from "./pages/HomePage";import Abou..

[Immer] Immer only supports setting array indices and the 'length' property at die (http://localhost:3000/static/js/bundle.js:40209:11)  at ...  오류발생원인이 오류는 Immer가 배열의 인덱스나 length 속성을 제외한 다른 속성을 직접 변경하려고 할 때 발생한다. Immer는 불변성 유지를 위해 내부적으로 동작하며, 배열의 구조를 변경하는 작업은 제한적으로만 허용된다.  Immer는 다음과 같은 작업은 허용한다.배열의 특정 인덱스 값 변경배열의 length 속성 변경배열에 요소를 추가하거나 제거 (push, pop, splice 등) 그러나 배열에 직접적으로 새 속성을 추가하려고 하면 오..

리액트 라우터(React Router)는 리액트 애플리케이션에서 페이지 간 이동을 관리하는 라이브러리이다. 리액트는 기본적으로 단일 페이지 애플리케이션(SPA) 구조로 동작하기 때문에, 페이지 내에서의 URL 변경을 브라우저의 기본 방식으로 처리하는 대신, 리액트 라우터를 사용해 URL을 제어한다. 리액트 라우터를 사용하면 애플리케이션 내에서 페이지 이동을 쉽게 할 수 있다.import React from 'react';import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';function Home() { return Home Page;}function About() { return About Page;}funct..

리액트에서 페이지 간 이동과 URL 관리는 매우 중요하다. 페이지 이동을 처리하기 위해 react-router-dom 라이브러리를 사용하는데 이 라이브러리는 페이지간 이동을 간편하게 처리할 수 있도록 다양한 기능을 제공한다. 그중에서도 useNavigate, useLocation, URLSearchParams는 경로 이동, 현재 위치 정보 확인, 쿼리스트링 관리 등을 효과적으로 수행할 수 있도록 도와주는 필수적인 도구이다.  useNavigateuseNavigate는 페이지 이동(네비게이션)을 수행하는 Hook이다. react-router-dom에서 제공하며, 특정 경로로 이동하거나 뒤로 가기 등의 기능을 수행할 수 있다.import { useNavigate } from "react-router-dom"..

Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.  이 오류는 리액트에서 key 속성이 중복될 때 발생한다. 리액트는 컴포넌트 리스트를 렌더링할 때 각 항목을 고유하게 식별하기 위해 key 속성을 사용한다. 이를 통해 리액트는 항목의 변경, 추가, 삭제를 효율적으로 처리할 수 있는데 이 ..

firebase tool 설치하기리액트 프로젝트를 firebase 호스팅에 배포하기 위해서는 firebase CLI(Firebase 명령어 도구)를 설치해야한다. 설치는 터미널에서 아래 명령어를 실행해서 설치할 수 있다.npm install -g firebase-tools  아래 명령어를 입력하여 firebase에 로그인하고, 질문이 나오면 n을 입력하고 엔터를 누른다.firebase 프로젝트에 접근하려면 로그인을 해야하는데 아래 명령어를 실행하면 구글 계정으로 로그인할 수 있다. firebase loginAllow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n) n웹사이트 창이 열리면서 계정을 ..