프론트엔드15 [GraphQL] 2. Apollo client 생성 노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 강의를 보고 정리한 글입니다. Client 생성 - url는 GraphQL 서버 주소를 기입하면 된다. // src/apollo.ts import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: "http://localhost:4000/", cache: new InMemoryCache(), }); export default client; 쿼리 작성 // src/apollo.ts import { ApolloClient, gql, InMemoryCache } from "@apollo/client"; client .query({ query.. 2023. 2. 15. [GraphQL] 1. 설치 노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 강의를 보고 정리한 글입니다. 프로젝트 생성 npx create-react-app movieql-client --template typescript 필요한 패키지 설치 npm install @apollo/client graphql react-router-dom * 참고 22년 4월 강의 촬영 당시에는 apollo client가 React 18 버전을 지원하지 않아서 에러가 발생했다. 에러를 해결하기 위해 --legacy-peer-deps 를 함께 입력했는데, 23년 2월 지금은 에러가 발생하지 않아서 입력하지 않아도 된다. 2023. 2. 14. [CSS] 형제 요소가 width: 100%일 때 버튼 텍스트가 줄바꿈 되는 문제 Intro 인풋 + 버튼이 row 방향으로 나열되어 있는 UI를 구현하고 싶다. 이를 구현하기 위해 아래처럼 css를 적용했다. - 요소를 감싼 div에 display: flex를 적용 - 인풋 width : 100% - 버튼 padding: 0 40px 문제 그런데, 버튼에 padding을 줘서 버튼 자체의 width는 늘어나는데 내부 텍스트의 width가 늘어나지 않고 줄 바꿈이 되어버리는 문제가 생겼다. 버튼에 직접 width를 주는 방법도 있지만, 직접 지정하지 않고 padding으로 해결하고 싶었다. 해결 white-space : nowrap 을 적용해서 해결했다. white-space는 요소의 공백을 어떻게 처리할지 정의하는데, nowrap은 normal처럼 연속된 공백과 줄바꿈을 하나의 공백.. 2023. 1. 20. [react-query] 단일 진실 공급원을 고려하며 수정 form 만들기 Intro 원티드 프리온보딩 1월 - 리액트 쿼리 강의를 듣던 중, server state와 client state에 대한 얘기가 나왔다. server state 값을 client state에 할당해서 재사용할 때의 문제점에 대해 논했는데, 많이 공감되는 주제라 글을 쓰게 되었다. server state 만약 useQuery가 userDetail이라는 data를 리턴한다면 userDetail을 그대로 사용하면 된다. const { data : userDeail } = useQuery(...); 복제 근데 유저의 정보를 수정해야 한다면, userDetail을 변경할 수 없으니 새로운 client state를 만들어서 userDetail 값을 할당해주곤 했었다. 즉, 원본이 여러 개(?) 생기는 셈이 된다... 2023. 1. 18. 이전 1 2 3 4 다음
