챗지회피티님의 블로그

1. RTK ( Redux Toolkit )Redux의 공식 상태관리 툴킷Redux를 더 쉽게, 짧게, 안전하게 사용할 수 있도록 만든 공식 라이브러리1.1 Redux란?Redux는 자바스크립트 앱의 전역 상태 관리(state management)를 위한 라이브러리- 여러 컴포넌트에서 공유해야 하는 데이터를 하나의 중앙 저장소(store)에서 관리하도록 도와주는 도구- 부모 → 자식 → 손자 → … 상태 전달이 너무 복잡할 때 사용1.2 Redux에서 알아야 할 개념 4가지구성 요소설명Store모든 상태(state)가 저장되는 단 하나의 중앙 공간Action상태를 바꾸고 싶다고 알리는 신호 (객체)Reducer액션에 따라 상태를 어떻게 바꿀지 정의한 함수Dispatch액션을 리듀서에 전달하는 함수 흐름..

🧩 HTML/JSX에서는 속성(attribute)🧠 JavaScript 함수에서는 인자(argument) + 매개변수(parameter)⚛️ React에서는 속성이 props가 되어 함수의 인자처럼 전달됨1. 자바스크립트의 객체객체 안에 정의된 함수(동작)으로 데이터를 표현하고 조작하는데 필수적인 요소표현법] 객체명.속성명 객체명["속성명"]1.1 객체 (Object)키(key): 값(value) 쌍의 집합- **관련된 데이터(속성)와 기능(메서드)** 를 하나로 묶는 자료형const 객체이름 = { 키1: 값1, 키2: 값2, ... }; - 예시 ]const user = { name: "챗지회피티", age: 25}; 1.2 속성 (attribute)..

utils -> http-commons.js 주소 변경하기store -> member -> useHook, app -> layout -> bookmarksrc -> member -> book -> isbn -> bookmark -> page구현 사항 - 기능: 등록/ 삭제/ 모두 삭제등록: 도서 상세 페이지에서삭제, 모두 삭제: 북마크 리스트 페이지에서 1. store > book-mark.tsxtodo1.제공할 상태와 상태를 변경할 함수에 대한 타입 설정하기todo2.createContext() 함수로 제공할 context 생성하기interface BookContextType { //todo1. 사용할 데이터 타입 정의 books: Book[];//여러 배열 가져오니까 [] 사용 registBookM..

React Query서버에서 데이터를 불러오고, 그걸 적절히 캐싱하고, 갱신하고, 상태를 관리하는 라이브러리.즉, **서버 상태를 다루기 위한 "비동기 상태 관리 도구"**비동기 상태관리 (Asynchronous State Management)1. useQueryfetching(서버에서 데이터를 가져옴) 후 자동으로 데이터를 캐싱하고,상태를 관리하는 일을 아주 간편하게 만들어주는 훅 - 데이터 인식 (GET) 후 캐싱 - API 호출이 많은 코드에서 중복 코드를 줄여줌- 이미 불러온 데이터들은 다시 재요청하지 않아도 됨refetch: Query의 queryKey가 변할 때마다 새로운 데이터를 자동으로 요청하도록 만듦 2. useMutation데이터를 생성, 수정, 삭제 할 때 사용하는 서버 변화 작업 -..

1. 라우팅 ( Client-side routing )사용자의 요청(URL 경로)에 따라 어떤 화면 또는 기능을 보여줄지 결정하는 기술- 사용자가 페이지를 이동해도 전체 페이지를 새로고침하지 않고, 일부만 바꿔주는 방식- 대표적으로 React, Vue, Angular2. path='*'정확한 path 요청이 들어오면 해당 Component 로 분기하고, 그 외는 모두 처리하는 기법특정 URL 경로에 해당하는 컴포넌트를 매칭하는 라우팅 주소} />사용자가 /home 주소로 접속하면 컴포넌트를 렌더링함path="/": 루트 경로 (홈페이지)path="/about": About 페이지path="/user/:id": 동적 경로3. 동적 파라미터 } />/user/123 요청이 들어오면 컴포넌트가 뜨고, ..

1. Metadata페이지에 대한 정보를 브라우저나 검색엔진에게 알려주는 역할html로 rendering될 때 head의 title과 meta를 생성하는 기능server component임 (client component: useState 등의 함수)page or layout에 metadata를 생성할 수 있다.전역으로 app에 설정할 수 있고 local로 각 routing 마다 설정할 수 있다.1. Metadata 종류 HTML의 과 요소를 TypeScript로 다룰 때 정확한 타입을 지정하기 위한 용도app > layout > ,,,중첩돼서 들어감 > {children}HTMLINputElement / HTMLTextraElement2. 타입 대상 HTML 태그 주요 속성HTMLInputEleme..

Typescript란?type이 있는 자바스크립트로정적 타입을 제공하며 개발 시 타입 오류를 보여줌으로써 추후 개발 시 오류 예방할 수 있음let name = "챗지회피티"; // JS에서는 문자열인지 검사 안 함let age: number = 23; // TS에서는 타입 지정 시 그 타입만 가능 Typescript 분류내용 ]타입 선언type, interface, enum 등타입 조합유니언(`타입 별칭이름 붙여서 재사용타입 예시문자열, 숫자, 객체, 배열, 함수 등특수 타입children, ReactNode, CSSProperties비교interface vs type & 명확히 구분 1. React에서 사용하는 EventReact Event는 React에서 사용하는 이벤트 처리 시스템이는 브라우저의..

Component 생성const 이름 = () => {}function App() { return { }}export default Component;App.js에 component 불러오기import TodoList from "./components/TodoList"App.css에 스타일 설정하기.APP { width: 500px; margin: 0, auto; //위아래 display: felx; felx-direction: column; gap: 10px; padding: 15px 0px; //위아래 }Component 코드 작성 후 그 컴포넌트.css 를 생성하고 import “./TodoList.css” 불러오기import “./TodoList.css”const 이름 = () => {}fu..

9단원. 컴포넌트 스타일링일반 css 사용하기 -> sass 사용하기 -> css module 사용하기 -> styled-components 사용하기1. cssCSS 클래스를 중복되지 않게 만드는 것이 중요ex. 컴포넌트 이름-클래스 형태 [ [ [ content ] padding ] border ]1.1 flexflex box 안에 담긴 것들은 item이 됨- 가로: 기본축/ 세로: 크로스축 시 item 배치 방향 가로축flex-wrap: nowrap; //default값flex-wrap: wrap; //박스가 아래로 떨어짐flex : flex : 1 => flex: 1 1 0%; flex-grow: 1 부모가 가진 여유 공간을 1배 비율로 가져라 flex-shrink..