JSON -server= 간단한 데이터 베이스 api 서버를 쉽게 생성해주는 도구임시로 사용할 목적으로 많이 사용 설치 방법yarn add json-server# 개발 환경에만 필요할 경우 -D 옵션을 추가합니다.yarn add json-server -D 사용1. db.json 파일 생성{ "todos": []} 2. 서버 실행실행 중인 터미널이 아닌 다른 터미널을 열어서 다음 명령어 입력yarn json-server db.json --port 4000 axios= 브라우저와 노드 js 환경에서 사용할 수 있는 프로미스 기반 http 클라이언트간단히 말해, 서버와 http 통신을 쉽게 할 수 있도록 도와주는 도구 설치 방법yarn add axios GET 요청axios.get(url[, config])..
동기, 비동기1. 동기 -> 요청을 보내면 요청을 받을 때까지 기다리고, 그 후에 다음 작업을 진행함. 순차적으로 처리됨2. 비동기 -> 요청을 보내고 응답을 기다리지 않고, 바로 다음 작업을 진행함. 요청과 응답이 비순차적으로 일어남promise= 자바스크립트에서 비동기 작업의 결과를 처리하기 위해 사용되는 객체비동기 작업이 완료되거나 실패했을 때, 각각의 결과를 쉽게 다룰 수 있도록 도와줌 프로미스 객체는 비동기 작업이 끝난 후 실행될 콜백을 등록할 수 있는 메서드를 제공 프로미스 객체는 then, catch, finally 메서드를 통해 이행되거나 거부된 이후의 동작을 정의할 수 있음 * 예제프로미스 객체를 생성하려면 프로미스 생성자를 사용함const myPromise = new Promise((r..
중첩 라우팅과 outlet 컴포넌트= 페이지 안에 또 다른 페이지를 넣을 수 있게 해주는 기술 1. 중첩 라우팅 개념큰 페이지 안에 작은 페이지들을 정의하는 방법임import { BrowserRouter, Routes, Route } from 'react-router-dom';import DashboardLayout from './DashboardLayout';import Profile from './Profile';import Settings from './Settings';import Reports from './Reports';function App() { return ( {/* 대시보드 경로 */} }> {/* /dashb..
useEffect = 리액트에서 컴포넌트가 렌더링 되거나 업데이트 도리 때 특정 작업을 수행하도록 설정할 수 있는 훅이를 통해 컴포넌트의 생명주기 이벤트를 처리할 수 있다. 언제 사용하는지?-> 1. 렌더링 후 작업 : 컴포넌트가 화면에 렌더링된 이후 특정 작업을 수행하고 싶을 때-> 2. 컴포넌트 언마운트 시 작업 : 컴포넌트가 화면에서 사라질 때 특정 작업을 수행하고 싶을 때 의존성 배열= useEffect의 두 번째 인자로 전달되는 배열로, 배열에 있는 값이 변경될 때만 useEffect가 실행됨 비어있을 경우 -> 컴포넌트가 처음 렌더링 될 때만 실행됨값이 있을 경우 -> value를 넣을 경우 value가 변경될 때마다 useEffect가 실행됨 클린업= 컴포넌트가 언마운트될 때 실행되는 함수i..
props란?부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법.단방향으로 부모 -> 자식으로만 흐름읽기 전용으로, 값을 변경하지 않음 children이란?props 중 하나인 children은 부모 컴포넌트가 자식 컴포넌트에게 전달하는 또 다른 방법 컴포넌트의 구조는 동일하게 유지하면서 내용을 쉽게 바꿀 수 있어공통적인 레이아웃을 가지면서 내용만 바꾸고 싶을 때 레이아웃 컴포넌트에서 사용한다. children은 부모 컴포넌트가 자식 컴포넌트에게 전달할 내용을자식 컴포넌트에서 원하는 위치에 넣기 위해 사용한다.자식 컴포넌트는 children을 사용해 부모가 전달할 내용을 특정 위치에 렌더링한다. state* 꼭 onChange와 value를 둘 다 연결해야 하는지?-> 리액트에서 input 요소의..
21. 객체키와 값의 쌍으로 구성된 데이터 구조. 1-2. 객체 선언let user = { name: "르탄이", age: 30, isAdmin: true, printHello: () => console.log("hello!")}; 1-3. 객체 접근점 표기법console.log(user.name); // 르탄이console.log(user.age); // 30user.printHello(); // hello! 괄호 표기법console.log(user['name']); // 르탄이console.log(user['age']); // 30let attribute = "name";console.log(user[attribute]); // 르탄이 1-4. 객체 속성 추가 및 수정us..
