개발일지

파이어베이스에 저장된 데이터 불러오는 로직을 React Query를 이용해 Migration 했다 이전에 정리한 todoList Query는 이전 버전으로 문법이 많이 다르니 공식문서를 꼭 참고하도록 하자.queryKey는 배열로 만들어주고 queryFn에 서버 데이터를 가져오는 로직을 작성하면 된다가져온 데이터를  useEffect을 이용해 id를 넣어주고 state에 저장(파이어베이스는 데이터를 가져온 후 문서의 id를 넣어준 후 다시 배열에 담아야 한다 파이어베이스 문법특성 때문이니 꼭 필수일 필요는 없다)정렬 버튼을 클릭할 때마다 데이터를 새로 요청해서 받아와야 하는데 쿼리로 작성하고 나니 정렬기능이 작동하지 않는다는 문제가 발생했다문제해결 방법useEffect 의존성배열에 data , selec..

이번 팀 프로젝트 주제는 마켓컬리와 같은 식품 쇼핑몰로 정해졌다카테고리 버튼을 클릭하여 상품 리스트 페이지에 들어가면 상품 데이터들이 높은 가격 기준으로 정렬된 상태로 가져와야하는데 상품 등록 시 상품 가격 타입을 number로 넣었지만 파이어베이스에서 문자열로 변환되어 등록되어 버린다 문자인 상태에서 orderBy로 정렬하게 되면 유니코드로 정렬이 되기 때문에 원하는 정렬 기준을 맞출 수 없다는 문제가 발생했다 내가 하고자 하는 것상품 가격을 기준으로 오름, 내림 차순을 만들고 싶다문제해결을 위해 시도한 방법파이어베이스로 전체 데이터를 불러온 뒤 sort를 이용해 정렬해 줬다이 방법으로 정렬은 가능하지만 클라이언트가 아닌 서버에서 요청값에 정렬을 요청해서 받아야 한다는 피드백을 받고 다시 수정하기로 했..

인증 / 인가 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가 서로..