개발조각

지금까지 개발해 오면서 API 통신을 useEffect만 사용하거나, 아니면 react-Query만 사용해 봐서 이번기회에 Redux, Redux-saga 사용해 보면서 공부했던 내용을 정리해보려고 합니다. https://github.com/HyeokjaeLee/korea-webtoon-api GitHub - HyeokjaeLee/korea-webtoon-api: ✨ 한국의 웹툰 정보를 제공하는 API ✨ 한국의 웹툰 정보를 제공하는 API. Contribute to HyeokjaeLee/korea-webtoon-api development by creating an account on GitHub. github.com 여기서 제공하는 웹툰 정보 API를 사용하여 Redux-Saga를 사용해 보겠습니다...

예제코드에서는 next.js, typeScript를 사용하고 있습니다. recoil 설치 npm i recoil recoil 세팅 // _app.tsx import type { AppProps } from "next/app"; import { RecoilRoot } from "recoil"; export default function App({ Component, pageProps }: AppProps) { return ( ); } recoil-persist 사용이유 recoil-persist는 새로고침 시에도 데이터가 날아가지 않게 관리하기 위해 사용합니다. recoil만 사용하면 새로고침 시 데이터를 저장한 recoil state가 증발하게 됩니다. recoil-persist를 사용하면 새로고침을 해..

회사에서 랜딩페이지를 만들면서 비디오 배경 만들 때 골머리를 많이 때렸다... 만들어야 되는 기능 pc일 때는 배경이 pc비디오가 나오게 모바일일 때는 배경이 모바일비디오가 나오게 해야 된다. 과정 1 처음에 단순하게 반응형으로 처리했다가 사수분한테 혼났다ㅎㅎ 이렇게 만드는 건 옛날 방식이라고 이렇게 하면 안 된다고 했다... 과정 2 react-device-detect를 이용해서 아래와 같이 수정해 주었다. https://www.npmjs.com/package/react-device-detect react-device-detect Detect device type and render your component according to it. Latest version: 2.2.3, last publish..

회사에서 랜딩페이지를 작업하면서 react-device-detect를 사용한 경험에 대해서 정리해보려 한다. 만들어야 되는 기능 웹에서는 안드로이드 다운로드, ios 다운로드 버튼이 각각 있다. 모바일에서는 다운로드 하나만 있는데, 안드로이드에서 클릭하면 구글플레이스토어로 들어가고 ios에서 클릭하면 앱스토어로 들어가야 된다. 웹에서는 둘 다 만들면 되니까 별상관이 없는데 모바일에서는 디바이스가 무엇인가에 따라 처리해야 하니 난감하다는 생각이 들었다. 그래도 구원해 줄 라이브러리는 언제나 존재한다. 바로 react-device-detect이다. https://www.npmjs.com/package/react-device-detect react-device-detect Detect device type a..

만들고 싶은 슬라이드 슬라이드를 만들다 보면 각각의 다른 슬라이드를 제어를 하고 싶은 경우가 생기게 됩니다. 1번 슬라이드를 기준으로 1번 슬라이드가 움직이면 2번 슬라이드도 같이 움직이는 슬라이드를 만드는 방법입니다. 문제점 처음에는 아래의 예제를 참고해서 만들었으나 pagination, autoplay, loop를 적용하면 이상하게 동작하는 현상이 발생 https://codesandbox.io/s/k3cyyc?file=/src/App.jsx swiper-react-thumbs-gallery - CodeSandbox swiper-react-thumbs-gallery using react, react-dom, swiper codesandbox.io 해결방안 Thumbs를 사용하면 안 되고 Controll..

만들고 싶은 슬라이드 문제점 앞서 작성한 pagination과 같이 swiper의 hidden 때문에 swiper옵션으로 navigation을 적용하고 navigation을 밖으로 빼서 사용하면 navigation이 안 보이는 현상이 발생한다. Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 해결방안 import React, { useRef, useState } from 'react'; // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles import 'swiper/css'; impo..

만들고 싶은 슬라이드 문제점 React로 위와 같은 슬라이드를 만들려면 안에 아래와 같이 적용을 해야 되는데 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 이렇게 할 경우 Swiper가 hidden처리가 되어 있어 pagination을 따로 만들고 커스텀해주어야 된다. 해결방법 https://codesandbox.io/s/m54gfx?file=/src/App.jsx swiper-react-pagination-custom - CodeSandbox swiper-react-pagination-custom using react, react-dom, swiper codesandbox.io swiper demo예제 중에서 pagina..