First Hooks Query

노마드 코더의 인스타 클론 코딩 두번째 프론트엔드 셋업 마지막 시간입니다.
본격적인 프론트엔드 코딩 시작하기에 앞서 사용하는 개념들을 한번 되집어 보는 마지막 시간입니다.

이번 시간은 React-Apollo에서 Query를 만드는 시간입니다. React-Apollo에서 Query를 만드는 법은 생각보다 쉽습니다.

Client Query

Apollo에서 Client Query는 해당 컴포넌트 폴더(이 경우에는 s에서 Queries.js 파일을 만들어 따로 관리해주는 것이 좋습니다. 다만 인스타 클론 코딩에서는 로그인을 했는지 여부만 판단하기에 src/Components/App.js에서 한줄로 요약하여 기입하였습니다.

보통 따로 폴더를 만들 때는 백엔드의 GrqphQL에서 만들었던 것과 같이 변수를 Export하여 index.js에서 불러와 쓸 수 있도록 하는 것이 중요합니다. Query의 네이밍 규칙은 첫글자만 소문자로하는 lowerCarmelCase를 사용합니다.

Query를 만들고 이 Query를 사용하려면 변수명 옆에다 @client를 붙여 주어야 하는데 이를 통해 Apollo Client에서는 해당 Query를 GraphQL 서버로 전송하지 않고 로컬에서(캐시 또는 로컬 리졸버를 사용하여) 필드 데이터를 가져오도록 호출합니다. 이 때 Query의 result는 함수가 렌더 될 때 자동으로 업데이트 됩니다.

모든 캐시 읽기 및 쓰기는 동기 방식으로 로드 되기에 상태에 대해서는 걱정할 필요가 없습니다. 자세한 내용은 ApolloGraphQL에서 확인하실 수 있습니다. src/Components/App.js

// 추가코드만 기입하였습니다.
import { gql } from "apollo-graphql";

const QUERY = gql`
  {
    isLoggedIn @client
  }
`;
export default () => {
  const {
    data: { isLoggedIn }
  } = useQuery(QUERY);
  return (
    //... 기존 코드 생략
    <Router isLoggedIn={isLoggedIn} />
  );
};

이렇게 추가를 하고 나서 터미널에 yarn start를 실행합니다. 그러고 나면 기존 Router 경로에 지정되어 있듯이 token값이 없기 때문에 화면에 Auth라고 출력되는 것을 볼 수 있습니다.

그 후 브라우저의 개발자 모드에서 Application -> Local Storage -> http://locat… 에서 Key 값에 token을 입력하고 Value에는 아무 글자나 넣어보면 Auth화면에서 Feed 화면으로 넘어가 있는 것이 보입니다.

Global Style 설정

스타일, 라우터, 로그인 여부를 파악할 수 있기에 이제 본격적인 프론트엔드 코딩에 앞서 GloblaStyles을 먼저 설정해주도록 하겠습니다.

글로벌 설정에서 body 부분에 바탕 화면 컬러와 함께 여러 색상들을 Theme에서 불러와서 지정해주었습니다. src/Components/GlobalStyles.js`

//...기존 코드 생략
export default createGlobalStyles`
/*...기존 코드 생략 */
body {
    background-color:${props => props.theme.bgColor};
    color:${props => props.theme.blackColor};
  }
  a {
    color:${props => props.theme.blueColor};
    text-decoration:none;
  }
`;

다음 부터 노마드 코더의 본격적인 프론트엔드 코딩을 시작하도록 하겠습니다. github의 React-Apollo 페이지가 현재는 리뉴얼되어 다른 페이지로 접속되는 것을 보실 수가 있는데 강의에서 나오는 페이지는 React-Apollo-Hooks로 접속하시면 됩니다.

참고자료

• academy.nomadcoders.InstagramClonCoding