어리둥절 분석가 그리고 개발자

https://swr.vercel.app/docs/getting-started Getting Started – SWR For normal RESTful APIs with JSON data, first you need to create a fetcher function, which is just a wrapper of the native fetch: 💡 If you want to use GraphQL API or libs like Axios, you can create your own fetcher function. Check here for more examples swr.vercel.app SWR은 Next.js팀이 만든 데이터 fetching 라이브러리로, 나는 정확하게는 잘 모르지만 react-qu..

Next.js에서 이미지를 사용할 때는 태그를 쓰지말고 next/image의 Image를 사용하라고 권고한다. 이 때 이미지를 비율을 유지하면서 크기를 조절하고 싶을 때는 layout="fill"을 사용하면 된다. import Image from "next/image"; import styled from "@emotion/styled"; const Container = styled.div` width: '100%'; height: '100%'; position: relative; ` 그런데 특히 특정 크기로 줄이고 싶을 때는 그냥 원초적인 방법으로 아래 방법을 사용했다. 원래 이미지의 크기가 624 * 210 이라서 그 비율에 따라서 height를 구해줬다. 너무 원초적인가? 난 되기만 하면 된다. im..

Sample.getInitialProps = async () => { const { data } = await axios.get( encodeURI( `http://alb-diaas-07480.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) ); return data; }; export async function getServerSideProps() { const data = await axios .get( encodeURI( `http://alb-diaas-07480.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) ) .then((res) => { console.log("response"); return res.data.data[0]; }..

✔️ 필요성 Next.js에서 fusionCharts를 활용한 차트 컴포넌트를 올리니까, 맨 처음에는 차트가 잘 나오는데 새로고침을 누르니까 "Reference Error: document is not defined"라는 에러가 등장한다. ✔️ 문제 확인 문제 원인은 Next.js의 장점인 SSR(Server Side Rendering) 때문인데 https://helloinyong.tistory.com/248 여기 블로그에 이유가 상세하게 잘 나와있다. 웹 페이지를 구성시킬 요소들이 렌더링 및 클라이언트로 로드되기 전에 document에 접근하여 View 요소를 조작하려하니 발생한 문제그러나 이 상태에서 새로고침을 하게 된다면, 서버 렌더링이 동작하게 되어 에러가 발생하게 될 것이고, 이는 서버 렌더링이..

✔️ 현재 URL 가져오기 현재 URL을 가져올 때에는 asPath가 좋다 import { useRouter } from "next/router"; const copyURL = () => { const {asPath} = useRouter(); } ✔️ 문제 확인 그런데 현재 URL을 클립보드에 복사하고 알릴 때에는 아래 코드가 최고다. 아래 블로그를 그대로 사용하였으며 나중에 다시 쓸 때 잊지않기 위해 기록용으로 내 블로그에 포스팅해둔다. // 현재 URL을 클립보드에 복사하고 알림 export const copyURL = () => { let currentUrl = window.document.location.href; let t = document.createElement("textarea"); d..

✔️ 필요성 Next에서 갑자기 아래와 같은 compile 에러가 떴다. 뭐지..? ✔️ 문제 해결 @emotion/is-prop-valid를 설치한 다음에 껐다가 다시 yarn dev하니까 해결됐다! yarn add @emotion/is-prop-valid

✔️ 필요성 컴포넌트 이동을 했을 때 스크롤을 가장 상단에 위치하도록 고정하고 싶을 때가 있다 ✔️ 문제 확인 useEffect를 활용해서 Scroll을 맨 위로 올려주자~ //항상 스크롤 맨 위 고정 useEffect(() => { window.scrollTo(0, 0); });

✔️ 에러 Next.js에서 gsap의 ScrollTrigger를 사용하려고 하는데 세상 처음보는 에러가 떴다! 이래서 Next.js가 힘들다... import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); ✔️ 문제 해결 ScrollTrigger를 조금 다르게 import 하면 된다. 이유는 모름 import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; // import { ScrollTrigger } from "gsap/ScrollTrigger"; impor..

✔️ 필요성 Next.js에서 Emotion을 쓸 때 css를 쓰고 싶은 데 css 속성이 없다고 나온다 아래와 같이 사용중! import styled from "@emotion/styled"; import React from "react"; import { css } from "@emotion/css"; ✔️ tsconfig.json 수정 tsconfig.json 파일을 열로 아래와 같이 types 를 추가해주면 된다! { "compilerOptions": { "types": ["@emotion/react/types/css-prop"], ... } }

✔️ React 기존에 react를 쓸 때에는 react-router-dom의 Link를 사용하고 Link에 직접적으로 className을 줄 수 있었다 import { Link } from "react-router-dom"; ✔️ Next Next에서는 우선 next/link에서 제공하는 Link를 사용해야 하고 to 대신에 href를 사용해야 한다. 또 직접적으로 className을 줄 수 없어 Link 밑에 하나 tag를 더 넣고 a 태그에 className으로 스타일링을 했다. import Link from "next/link";