[Day08] 기능구현: 아폴로세팅/ 메인 / 등록하기

📌 메인

react-slick-slider 라이브러리사용

• 데스크탑에 사진이 없어서 임시 사진 적용
• Auto Play 로 자동넘김 적용
• 메뉴 상단 제목이 잘 안보임 .. > 서잔 바뀌면 글자 폰트 색상 변경하도록하기?

  const settings = {
    // 아래 버튼
    dots: false,
    // 화살표
    arrows: false,
    // 반복
    infinite: true,
    // 한 화면에 보이는 이미지 수
    slidesToShow: 1,
    // 한 번에 넘어가는 콘텐츠 수
    slidesToScroll: 1,
    autoplay: true,
    // 넘어갈 때 속도
    speed: 3000,
    // 넘어가는 속도
    autoplaySpeed: 2000,
    // css easing 모션 함수
    cssEase: "linear",
  };

css 커스텀경로
node modules > slick-carousel > slick

작년에 슬라이드 작업할 때 html과 css로 구현을 했던 적이 있다.
지금은 라이브러리를 적용했지만 후에는 자바스크립트를 사용해서 라이브러리를 구현해보자.

📌 Apollo client 세팅

GraphQL을 기반으로 한 Apollo client 사용하기 !
클라이언트 애플리케이션과 GraphQL의 데이터 교환을 돕는다. 라이브러리임!

GraphQL 은 서버 API를 통해 정보를 주고받기 위해 사용하는 query langauage이다. GraphQL API는 보통 하나의 엔드포인트를 사용한다. 요청시 사용하는 질의문에 따라 응답구조가 달라진다.

// import ApolloSetting from "../src/components/commons/apollo";
// 랜딩페이지
import "antd/dist/antd.css"; // antd css 전체적으로 골고루 주려면 (특히 별모양)
import "../styles/globals.css"; //
import { AppProps } from "next/app";
import Layout from "../src/components/commons/layout";
import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  ApolloLink,
} from "@apollo/client";
// import ApolloSetting from "../src/components/commons/apollo";
import { createUploadLink } from "apollo-upload-client";

function MyApp({ Component, pageProps }: AppProps) {
  // 이미지 업로드를 위한 URL 받아오기
  const uplodLink = createUploadLink({
    // 백엔드 서버 연결
    uri: "https://backend06.codebootcamp.co.kr/graphql",
  });
  const client = new ApolloClient({
    link: ApolloLink.from([uplodLink as unknown as ApolloLink]),
    cache: new InMemoryCache(),
  });

  return (
    <>
      {/* <ApolloSetting> */}
      <ApolloProvider client={client}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ApolloProvider>
      {/* </ApolloSetting> */}
    </>
  );
}

export default MyApp;

우선은 _app.tsx 에 아폴로세팅을 했고, 추후 폴더를 따로 빼서 import 할 예정

📌 등록하기

backend06 이랑 연결 > apollo 세팅
이미지 등록하기: 공통컴포넌트로 빼기