📝 React

화면에 보여지게 하기 => Rendering함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식 => JSX이렇게 변화도 가능하다.HTML을 품은 JS ⇒ JSX!p태그 안에 {}중괄호로 js 값 가져온다!style이라는 스타일 객체를 변수로 만

props는 반드시 위에서 아래 방향으로 흐른다. 즉, 부모 → 자식 방향으로만 흐른다(단방향).props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.props는 object literal(={key: “value”} 데이터) 형태이기 때문에 {props.mot

리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미. ✔︎ 렌더링✔︎ 리렌더링 ✔︎ DOM(명령형 프로그래밍) ✔︎ 리액트(선언형 프로그래밍)트리의 요소 하나하나를 ‘노드’라고 하고

useEffect = Hook어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용합니다.import React, { useEffect } from "react"

RTK는 Redux Toolkit의 패키지로, React와 Redux를 함께 사용하는 프로젝트에서 Redux를 더 쉽게 사용할 수 있도록 도와줌.RTK의 다양한 기능을 활용해 Redux 코드를 더욱 간결하고 효율적으로 작성 가능.

✔︎ React Router DOM: 페이지 이동을 구현할 수 있게 해주는 패키지Home, About, Contact, Works브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분. URL 1개당 페이지 컴포넌트를

useParams 은 path의 있는 id 값을 조회할 수 있게 해주는 훅 페이지 컴포넌트를 모두 동일하게 렌더링하지만 useParams을 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할 수 있다. works/1로 이동하면 1 이라는 값을 주고

BaaS는 웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반의 백엔드 서비스랍니다. BaaS를 이용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도ok프론트엔드: 사용자가 보고 상호작용하는 면이죠. 웹 사이트의 모든 시각적 요소를 담당해요.백엔드

단연 가장 헷갈리고 기준 세우기 어렵다고 머리 싸맬 리팩토링 일명 '파일 세분화하기'를 해보았다.일단 기존 파일은 src/component/TodoList.jsx 하나에 App.jsx의 file tree.이제 component 폴더 아래 TodoContainer - 상

Vite 프로젝트 생성:프로젝트 디렉토리로 이동:React-Redux 및 Redux Toolkit 설치:(필요 시) 모든 의존성 설치:개발 서버 실행:→ Vite 기반의 React 프로젝트에서 Redux를 사용하여 상태 관리 가능.

forEach배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다. 반환 값이 없고, 단순히 배열을 순회할 때 사용됩니다.사용법:filter조건을 만족하는 요소만 걸러내어 새로운 배열로 반환합니다.사용법:reduce배열을 하나의 값으로 줄이기 위해 누적 값을 계산합니다

handleSubmit(e):폼 제출 시 실행되는 함수로, e.preventDefault()를 사용하여 기본 동작(새로고침)을 막고 입력값을 처리합니다.handleChange(e):입력 필드의 값이 변경될 때 실행되며, e.target.value로 변경된 값을 가져와

React 애플리케이션에서 컴포넌트 간의 데이터 전달과 상태 관리는 매우 중요한 요소입니다. 이를 효과적으로 관리하기 위해 컴포넌트의 역할을 명확하게 분리하고, 각 컴포넌트가 특정한 역할에 충실하도록 설계할 필요가 있습니다.Form 컴포넌트 (TodoForm)사용자가

&& 연산자는 JavaScript에서 "논리 AND" (Logical AND) 연산자로, 두 개의 표현식을 평가할 때 사용됩니다. 이 연산자는 두 표현식이 모두 true일 때만 true를 반환하고, 그렇지 않으면 false를 반환합니다.두 값 모두 참일 때만 참을 반환

쿼리스트링은 URL의 끝에 붙어서, 서버나 웹 애플리케이션에 추가적인 데이터를 전달하는 역할을 합니다. 주로 물음표(?) 뒤에 오는 부분을 가리키며, 여러 개의 값이 있을 경우에는 &로 구분됩니다.아래와 같은 URL을 생각해볼게요:https://example.

📌 JWT = 사용자가 로그인에 성공하면 서버에서 발급하는 토큰네, 정확히 말하면 JWT (JSON Web Token)은 클라이언트 측(예: 브라우저)에서 localStorage나 sessionStorage에 저장하는 것이 일반적입니다. 이렇게 저장된 JWT를 사용하

Repository.git에는 git clone 주소를 넣어준다git clone을 하고 나면 xxx.git 이라는 디렉토리가 나타나는데 이름을 .git으로 바꿔준다새 레파지토리의 git 주소를 연결한다push 해주면 끝!

Zustand를 사용하려면 먼저 패키지를 설치해야 해요.Zustand 스토어는 상태를 관리하는 곳user: 유저 정보를 담는 상태에요. 처음에는 아무 유저 정보도 없기 때문에 null로 초기화했어요.setUser: 유저 정보를 업데이트하는 함수에요. 유저가 로그인할 때

Zustand를 사용할 때 상태 관리를 위한 store 생성store를 사용하기 위해 useUserStore 훅 넣기상태의 분류와 역할user 상태:역할: 로그인된 사용자에 대한 정보를 저장합니다. 예를 들어, 사용자 ID, 닉네임, 프로필 사진 등의 정보를 담습니다.

프로젝트 진행 중, 로그인/회원가입 후 사용자 정보를 관리하는 과정에서 두 가지 서로 다른 정보(user와 userInfo)를 혼동하는 문제가 발생했습니다. user: 회원가입 또는 로그인 시 사용자의 정보를 로컬 스토리지와 전역 상태(AuthContext)에 저장하여

Tailwind CSS를 프로젝트에 설치하고 설정합니다.​tailwind.config.js 파일을 열고 content 배열에 Tailwind가 사용할 파일 경로를 지정합니다:​src/index.css 파일 최상단에 다음 내용을 추가합니다:📚 참고- Tailwind

useEffect hook을 사용하여 컴포넌트가 마운트될 때 비동기 요청을 통해 데이터를 가져오는 방식상태 관리의 복잡성 중복된 코드각 컴포넌트마다 동일한 비동기 로직을 반복해서 작성비즈니스 로직의 분리 부족비즈니스 로직과 UI 로직이 혼합서버 상태 관리의 어려움