챗지회피티님의 블로그

TODO 주석 색상 설정하는 법1. Todo Tree 설치✅ VS code의 확장자(EXTENSIONS)에 들어가서 Todo Tree를 설치(Install)한다.2. VS code의 설정 ✅ VSCode에서 설정(Settings) 열기 단축키운영체제단축키🪟 Windows / LinuxCtrl + , (컨트롤 + 콤마)🍎 macOS (맥)⌘ + , (Command + 콤마) ✅ Edit in settings.json 클릭3. settings.json에 코드 추가 ✅ 추가해 줄 코드 ] , "todo-tree.highlights.defaultHighlight": { "icon": "alert", "type": "text", "foreground": "black", // 글꼴 색상 변..

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)..

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

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..

8단원. HOOK함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState렌더링 직후 작업을 설정하는 useEffect1. useState- component 내에서 state를 관리시켜주며 초기값에서 사용- component를 굳이 class형으로 바꿀 필요없음숫자 카운터]import React, { useState } from 'react';const Info = () => { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); const onChangeName = e => { setName(e.target.value); }; const onChangeNickname = e => { ..

6단원. 반복되는 Component리스트나 데이터셋을 기반으로 동일한 구조의 UI를 여러 개 렌더링1. Map 함수반복되는 컴포넌트를 렌더링파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성arr.map(callback, [thisArg])const numbers = [1, 2, 3, 4, 5];const result = numbers.map(num => num * num);console.log(result);2. 함수의 Parameter• callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지1. currentValue: 현재 처리하고 있는 요소2. index: 현재 처리하고 있는 요소의 index 값3. array..

4단원. Event Rerendering웹 브라우저에서 DOM 요소들과 상호작용하는 것1. 이벤트 이름은 카멜 표기법 사용onClick 2. 이벤트 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달화살표 함수 () => {}렌더링 부분 외부에 미리 만들어서 전달 3. DOM 요소에만 이벤트 설정 가능{ /\* (...) \*/ }1. onChange event 설정e 객체]SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체import React, { Component } from 'react';class EventPractice extends Component { render() { return ( 이벤트 연습 { ..