개발일지

인증 / 인가 http 프로토콜 통신 특징쿠키 세션 JWT토큰인증인증(Authentication)은 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다 기본인증 (Basic Authentication)과 토큰 기반 인증 (Token-based Authentication), OAuth 등이 있다HTTP 프로토콜에서는 보통 헤더에 인증 정보를 포함하여 요청을 전송한다인가인가(Authorization)는 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다주로 인증된 사용자에 대한 접근 제어를 다룹니다. 인가는 사용자의 역할, 그룹, 권한 등을 기반으로 한다 HTTP 프로토콜에서는 주로 요청의 특정 부분에 권한 정보를 포함하여 요청을 전송하거나, 서버에서 요청을 받은 후에 권한을 확인하여 응..

React QueryReact 애플리케이션에서 데이터 관리를 위한 JavaScript 라이브러리비동기 데이터를 관리하고 캐싱하며, 상태 관리와 관련된 작업을 쉽게 처리할 수 있다Redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니며, Redux-thunk의 보일러 플레이트가 많다는 단점을 보완하기 위해 사용된다비동기 통신을 위해 사용되므로 json-servser(파이어베이스, 수파베이스도 상관없음) 등의 서버를 연결해 사용하며 axios(fetch도 상관없음) 설치도 필요하다(비동기 통신을 해야 하니까)설치 명령어npm yarn npm install react-queryyarn add react-query Query요청을 의미하며 서버로부터 데이터를 요청한다 CRUD 중, R(Read)에 해당한..

json-server를 이용해 Thunk 함수를 통해서 API를 호출하고 서버로부터 가져온 값을 Store에 dispatch 하는 기능 구현하기extraReducers를 사용해 리듀서 로직 구현하기비동기 통신 상태를 관리하는 로직 구현하기extraReducersreducers에서 바로구현되지 않는 기타 Reducer로직을 구현할 때 사용하는 기능. 보통 thunk 함수를 사용할 때 extraReducers를 사용한다. thunk 함수 작성const data는 Promise를 반환한다axios.get() (함수)가 반환하는 Promise의 fullfilled 또는 rejected 된 것을 처리하기 위해 async/await 추가요청 성공  / 실패 결과 확인을 위해 try.. catch 구문 사용 impo..

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

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