react-slick-slider 라이브러리사용
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로 구현을 했던 적이 있다.
지금은 라이브러리를 적용했지만 후에는 자바스크립트를 사용해서 라이브러리를 구현해보자.
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 세팅
이미지 등록하기: 공통컴포넌트로 빼기