강의 노트 - 간단한 쇼핑몰 만들기
1.React Query를 알아보자
React Query 캐시를 이용하여 서버 상태를 쉽게 관리할 수 있도록 도와주는 React 라이브러리 비동기 상태 관리자로, 데이터 뿐만 아니라 Promise 형태의 비동기 상태를 관리할 수 있다. React Query는 데이터를 refetch 해오는 전략 지표를 제
2.Data fetch 함수의 타입 지정
강의에서 제공된 data fetch 함수를 작성하고 사용하는 과정에서 타입 에러를 만났다. 강의에서는 에러가 발생하지 않았었는데, 동일한 코드를 작성했음에도 에러가 발생한 것을 보니 React Query 버전을 강의와 다르게 적용했기 때문인 것으로 보인다. 에러를 해결
3.Recoil를 알아보자
Recoil은 Facebook에서 만든 React를 위한 상태 관리 라이브러리로, 단방향으로 상태를 전달한다. API <RecoilRoot> <RecoilRoot>는 하위 컴포넌트에게 recoil 상태를 사용할 수 있도록 제공하는 컴포넌트이다. <RecoilRoot>
4.GraphQL를 알아보자
GraphQL은 API를 쉽게 설계하고 호출하는 데 사용되는 쿼리 언어로, REST API를 대체하기 위한 목적으로 만들어졌다.데이터베이스에 저장된 데이터를 효율적으로 가져오기 위한 언어인 sql과 달리 gql은 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는
5.Mocking을 알아보자 (MSW + GraphQL)
Mocking 이란? 애플리케이션을 만들 때 프론트엔드는 백엔드의 API를 활용이 필수적이었다. 때문에 백엔드의 구현이 끝나고 프론트의 개발이 시작되면 가장 이상적이겠지만, 생산성 측면에서 시간이 너무 많이 소요되는 단점이 있다. 따라서 생산하는 데 소요되는 시간을
6.React Query의 queryFn은 언제 async 함수로 호출되어야 할까?
기존 강의 코드에서는 react query로 쿼리 요청을 할 때 queryFn를 async 함수로 만들지 않았다. 게다가 공식 문서나 다른 여러 포스팅을 살펴보면 queryFn이 async 함수로 만들어진 것도 있고 아닌 것도 있어 어떤 경우에 async 키워드를 사용
7.Apollo Server와 Express 연동하여 서버 맛보기
Apollo Server란 Apollo Client를 포함한 모든 GraphQL 클라이언트와 호환되는 spec 호환 GraphQL Server이다.Apollo Client: GraphQL을 이용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript용 종합
8.path.resolve()와 __dirname의 차이
강의에서 shopping-mall/server/src/dbController.ts 파일에서 db 위치를 읽어올 때 basePath를 추출하기 위해 path.resolve() 함수를 사용했다. 나는 resolve() 대신 Node.js에서 제공하는 전역변수 \_\_dir