개발일지

Redux 미들웨어Redux 미들웨어는 Redux 스토어에 전달되는 액션들을 가로채는 역할을 통해 액션 수정, 비동기 작업 처리, 액션을 디스패치하기 전 후에 특정 작업을 수행할 수 있다 (액션처리기로 생각할 것) 주로 Redux-thunk를 사용하며 서버와의 통신을 위해 사용한다thunk thunk를 사용하면 dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있게 해 준다.dispatch(객체) X => dispatch(함수) Othunk를 이용해 중간에 원하는 작업을 함수를 통해 넣을 수 있게 되며 이것을 이 함수를 thunk 함수라고 한다 thunk 예시코드 createAsyncThunk API로 thunk 함수 생성첫 번째 인자에는 Action Value, 두 번째 인자에는 함수..

Axios interceptor클라이언트에서 서버로 요청이 보내지기 전이나 서버에서 클라이언트로 응답을 받은 후에 실행되는 함수이다.interceptor를 이용해 HTTP 요청 및 응답의 중간 흐름을 가로채 수정할 수 있다 interceptor를 활용하면 할 수 있는 일들 요청 헤더 추가인증 관리로그 관련 로직 삽입에러 핸들링 instance 만들기, baseURL 설정하기 axios의 데이터 요청 시 ( )에 서버 주소를 직접 넣어주는 방식 대신, 리덕스의 액션크리에이트를 상수를 만들어 사용했듯 axios에 입력하는 서버 주소에 대한 휴먼 에러를 줄이기 위해 instance를 이용하여 baseURL에 서버 주소를 넣어 사용한다서버 주소가 변경될 경우 baseURL만 수정해 주면 되기 때문에 유지보수가..

Fetch브라우저 내장 API로 기본 제공된다기본적인 기능은 간단하고 가벼우며, 간단한 요청에 적합하다추가적인 기능(예: JSON 파싱, 오류 처리)을 위해 명시적으로 설정해야 한다axios외부 라이브러리로, 별도의 설치가 필요하다좀 더 사용하기 쉬운 API를 제공하며, 요청과 응답을 자동으로 처리한다기본적으로 JSON 파싱 및 오류 처리가 내장되어 있다axios 설치 명령어npm yarn  npm install axios yarn add axios fetch와 axios 코드 비교 데이터 읽어오기 fetch 첫 번째 .then()에서 JSON 형식의 응답 데이터를 JavaScript 객체로 파싱 하고, 두 번째 .then()에서 데이터를 출력해 준다.response.json()을 한번 더 해주는 과정..

HTTP인터넷에서 데이터를 주고받기 위한 표준 프로토콜, 웹 브라우저와 웹 서버 간에 문서를 전송하는 데 사용된다클라이언트 - 서버  기반으로  클라이언트가 요청을 보내면 서버가 응답을 제공한다메시지는 헤더와 본문으로 구성되며 헤더에는 요청이나 응답에 대한 메타데이터가 포함되고, 본문에는 전송되는 데이터가 포함된다  HTTP 메서드 종류GETPOSTPUT, PATCH DELETE조회생성수정삭제 URL

json-server가상의 REST API를 손쉽게 만들어주는 도구로 간단한 DB와 API 서버를 생성해 주는 패키지이다BE에서 실제 DB와 API Server가 구축될 때까지 FE 개발에 임시적으로 사용할 mock data를 생성하기 위해 사용한다FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현할 수 있어 효율적으로 협업을 할 수 있다 설치 명령어npmyarnnpm install json-serveryarn add json-server json-server 사용하기json-server가 간단한 패키지이긴 하나, 말 그대로 서버이므로 리액트와는 별개로 따로 실행을 해줘야 한다리액트도 start 하고, json-server로 start 해야 리액트와 json-server가 서로..

styled-components리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있도록 도와주는 패키지(라이브러리)* 패키지(써드파티 프로그램)특정 기능이나 서비스를 제공하기 위해 묶인 소프트웨어의 모음(라이브러리, 프레임워크, 응용프로그램 등)CSS-in-JsJavaScript 코드로 CSS를 작성하고 이를 컴포넌트에 적용하는 방식, 각 컴포넌트에 대한 스타일을 쉽게 관리하고 컴포넌트 간의 스타일 충돌을 방지할 수 있다styled-components 사용 전 설정 방법 VScode 플러그인 설치 터미널에 라이브러리 설치 명령어 입력npmyarn npm install styled-componentsyarn  add styled-components

Github_project작업 항목을 카드 형태로 보드에 추가하고, 해당 항목의 상태를 표시하여 프로젝트를 직관적으로 관리할 수 있다이슈와 결합되어 작업의 진행 상태를 간편하게 업데이트할 수 있다워크플로우 기능을 제공하여 자동으로 작업을 처리하고 필요한 작업들을 설정할 수 있다사용자에 맞춰 테이블을 커스터마이징 할 수 있다 Project 생성Milestone 생성Project 티켓 생성issue 작성티켓 설정 마무리Project Public으로 변경티켓 상세 정보 추가, 공개하기프로젝트 Branch 생성Branch 자동 삭제* 창을 두 개 띄워놓고 하나는 마일스톤, 하나는 프로젝트 생성 할 것, 기본 설정 시 프로젝트 생성 > 마일스톤 생성 > 티켓생성 > 이슈작성 순서로 보는 것을 권장한다왜? 어차피 ..

리렌더링(Rendering)리렌더링은 화면에 표시되는 내용이 변경될 경우 새로운 화면을 구성하는 과정으로 주로 상태(State)나 프로퍼티(Props)가 변경되었을 때 해당 변경 사항을 반영하여 새로운 가상 DOM(Virtual DOM)을 만들고 이를 화면에 렌더링 하는 과정을 의미한다 페인팅(Painting)페인팅은 실제 화면에 보이는 부분이 변경될 경우 변경 부분만 새로 화면에 반영시키는 과정으로 브라우저가 변경된 부분만을 업데이트하고 이를 화면에 그리는 과정을 의미한다. 페인팅은 리렌더링 과정 이후에 발생하는 단계이며, 변경된 부분만을 실제로 화면에 반영하여 성능을 향상하는데 중요한 역할을 한다

State리액트 컴포넌트의 내부에서 관리되는 상태 데이터컴포넌트의 상태(state)가 변경되면 컴포넌트는 다시 렌더링 되며 업데이트된 상태를 반영한다( 동작 및  UI 변경 )State를 만들 때는 useState()를 사용한다. useState 함수형 컴포넌트에서 상태를 관리하기 위한 Hook으로 배열 비구조화를 통해 (= 객체 구조분해할당) 상태값과 상태를 갱신하는 함수를 반환한다Child와 useState 예시 코드// 부모 컴포넌트import React, { useState } from "react";function App() { return ;}// 자식1 컴포넌트function GrandFather() { const [name, setName] = useState("김할아"); retur..

컴포넌트(Component)UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다React의 구성요소는 컴포넌트로 이루어져 있으며 헤더, 바디, 푸터 등. 벽돌을 쌓아 집을 만드는 것과 같다 (컴포넌트=벽돌) React는 주로 함수형 컴포넌트를 사용하며 재사용이 가능한 개별적인 여러 조각으로 나눠 특정 기능 또는 UI를 구성한다 * 명령형어떻게(How)를 중요시 여기며 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태* 선언형 무엇(What)을 중요시 여기며 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태부모 - 자식 컴포넌트컴포넌트는 다른 컴포넌트를 통해 호출하거나 값을 전달할 수 있다부모 컴포넌트(App)를 호출하면 부모컴포넌트는 자식 컴..