콛 다이어리

Interceptor:1. 요청 및 응답 시 필요한 작업을한 번에 처리할 수 있음2. 요청 헤더 추가3. 인증 관리4. 로그 관련 로직 삽입5. 에러 핸들링 Custom Instance 만들기1. baseURL을 설정하여 서버 주소가 변경돼도한 곳에서 수정하면 모든 요청에 반영되도록할 수 있음 Interceptor의 필요성1. HTTP 요청과 응답을 가로채서특정 작업을 수행할 수 있게 함2. 모든 요청에 공통적인 헤더를 추가할 수 있음3. 응답에 대한 공통적인 에러 처리 가능 Interceptor가 흐름을 가로채는 상황1. 요청(request)이 전송되기 전2. 요청 또는 요청을 보내기 전3. 요청이 출발하기 전4. 응답(response)의 then또는 catch가 처리되기 전

DELETE1. 데이터를 삭제하는 기능 2. await axios.delete("url 주소" * id);  1. PATCH: 전체 데이터를 새롭게 교체하는 방식 const { default: axios } = require("axios");axios  .patch("https://api.example.com/users/1", {    email: "newalice@example.com",  })  .then((response) => {// 서버 응답    console.log(response.data);  })  .catch((error) => {// 에러 처리    console.error(error);  }); 2. PUT: 일부 데이터만 수정할 때 사용하는 방식const { default: axi..

axios:1. node.js와 브라우저를 위한Promise 기반 https 클라이언트2. http를 이용해서 통신하기 위해 사용하는 패키지3. fetch와 기능이 겹침4. response.json() 할 필요가 없음5. await("url링크");만 해도 됨6. import axios from 'axios'; 사용하는 이유 1. fetch API 같은 내장 함수보다 코드가 간결 2. 비동기 요청을 관리하는 데 좋음 3. then()과 catch()`로 쉬운 결과처리 가능 4. 기본 설정 기능: 공통 URL이나 헤더 같은 설정을 쉽게 지정 가능 5. JSON 자동 변환: 서버에서 받은 데이터를 JSON 형태로 쉽게 변환 가능 json server 변경 사항이 생기면 터미널을 껐다가 다시 켜줘야 함 동기 ..

json-server:1. 간단한 DB와 API 서버를 생성해주는 패키지2. 백엔드에서의 실제 DB와 API 서버가 구축될 때까지프론트엔드 개발에 임시적으로 사용할 mock data를 생성하기 위함3.프론트 엔드에서는 백엔드가 하고있는 작업을 기다리지 않고프론트엔드의 로직과 화면을 구현할 수 있어효율적으로 협업을 할 수 있음supabase나 firebase를 사용하지 않는 이유1.백엔드가 없는 환경에서 실제 서비스 구축에 유용하지만,실무와의 연관성을 생각한다면,json server가 더 적합할 수 있음설치 방법1. 터미널에 yarn add json-server 입력사용 방법1. src 폴더에 새 파일 생성2. json 형식으로 데이터 입력3. JSON Server started on PORT: 4000 입력

HTTP (HyperText Transfer Protocol)1. 통신 규약2. 웹 상태에서 데이터를 주고받기 위한 프로토콜3. 클라이언트와 서버 간의 요청과 응답을 정의4. 상태 코드와 헤더를 포함한 다양한 요소를 가짐5. 클라이언트 - 서버 모델을 기반으로 동작6. 클라이언트가 요청을 보내면 서버가 응답을 반환7. 응답은 텍스트 기반의 메시지로 이뤄짐HTTP의 특징1. 무상태성 (이전 정보를 기억하지 않음)2. 확장성 (확장 헤더를 추가해 기능 확장 가능)3) 유연성 (다양한 데이터 형식 전송 가능)HTTP의 메시지 구조요청(Request)과 응답(Response)으로 나뉨요청 메시지: 클라이언트가 서버로 데이터를 요청할 때 사용1. 요청 라인: 메서드(GET, POST 등), URL, HTTP 버전..

순차 처리(Sequential Processing):순차 또는 연속적으로 두 가지 이상의 처리를 행하는 형태병렬 처리(Parallel Processing):복수의 처리를 병렬 시키거나 동시에 처리하는 방법async/await1. Promise 객체를 더욱 간편하게 다룰 수 있도록 도와줌2. async함수는 항상 Promise를 반환3. await 키워드는 Promise가 이행될 때 까지 기다림4. 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 향상됨async1. 항상 Promise를 반환2. 내부에서 명시적으로 return문으로 값을 반환하면자동으로 Promise.resolve()를 통해 감싸져서 반환됨fetch1. fetch(url, [options])2. url: 접근하고자 하는 주소3. op..

동기 (Synchronous Processing):1. 요청과 그에 따른 응답이 순차적으로 일어나는 방식2. 요청을 보내면 그 응답이 올 때까지 대기한 후다음 작업을 진행3. 일의 순서가 중요한 경우4. 처리 순서가 보장되지만,응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에비효율 적일 수 있음 비동기 처리 (Acyncronous Processing):1. 요청과 그에 따른 응답이비순차적으로 일어나는 방식2. 요청을 보내고 응답을 기다리지 않고,다음 작업을 계속 진행함3. 일의 순서가 중요하지 않은 경우,효율적인 일 처리를 위해  처리  Promise:1. 자바스크립트에서 비동기 작업의 완료 또는 실패를처리하기 위해 사용되는 개념2. 비동기 작업이 성공하거나 실패했을 때각각의 결과를 처리하는 데 ..

json-server:비동기 프로그래밍 테스트를 위해 만드는 가짜 서버 axios:fetch를 대체하는 라이브러리 TanStack Query:클라이언트 상태, 서버 상태 Zustand:Redux를 대체하는 전역상태 라이브러리 tailwind css:styled-component를 대체하거나 상호 공존하는 방식 반응형 웹:다양한 사용자 환경 (노트북, 모바일, 데스크탑 등)