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

import { NextApiRequest, NextApiResponse } from "next"; import abroad from "../../../../data/aptLifestyle/abroad.json"; import { Type } from "../../../../types"; export default async function handler( req: NextApiRequest, res: NextApiResponse ) { const { query: { code } } = req; const foundData = (abroad as Type[]).filter( (item) => String(item.code) === (code as string) ); // if (foundData.leng..

https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWR SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. swr.vercel.app useSWR을 사용해서 API를 여러번 콜해서 데이터를 받아오고 싶은데, 이 때 useSWR 자체를 여러번 map해서 돌리면 다음과 에러가 난다. "Rendered fewer hooks than expected. This may be caused ..

Swiper.js는 화면을 부드럽게 Slide 하는데 널리 쓰이는 라이브러리이다. Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper에서 마우스휠 + Vertical 조합을 활용하면 FullPage 효과를 낼 수 있다. 예전에 FullPage.js를 쓴 적도 있는데 이것보다 훨씬 쉽고 간단하게 만들 수 있는 것 같다. 개인적으로 FullPage를 사용하는 것을 선호하지 않는다. 다양한 해상도 화면에서 세로 길이가 다른데, 이 모든 해..

본 예제는 Next.js 12 버전에서 돌아간다. Next.js 13 버전에서는 안된다 (Victory Chart 내부에서 반드시 client component를 사용해야하는 무엇인가가 있음) pages/api/chartPng.tsx를 만들어서 아래와 같이 적어준다. svgString을 바로 넣어서 돌아가야 하는데 svgString이 태그로 쌓여있어서 문제가 생긴다. sharp을 쓸 때는 반드시 태그로 시작하고 끝나야하는 것 같다. console.log에 찍어서 부분만 가지고 와서 일단 그림을 그렸다. 그말인즉슨 조금 더 다듬을 필요가 있다. import { NextApiHandler } from 'next'; import { VictoryChart, VictoryBar } from 'victory'; ..

화면에 나타났을 때 어떤 애니메이션을 줄 것인가? css &.on에 등록해두고 나중에 classNames 라이브러리를 이용해서 호출한다 const YearHistroy = styled.div` display: flex; flex-direction: column; &.on { animation-name: opacity; animation-duration: 1000ms; @keyframes opacity { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0px); } } } `; 화면에 나타났을 때 style을 추가하는 script 부분 ( + 강제 Re-Render) 리액트의 DOM은 과거 DO..

import { NextResponse } from "next/server"; import { createCanvas } from 'canvas'; import Chart, { ChartConfiguration } from 'chart.js/auto'; export async function GET() { const data = { pokemon: { name: '꼬부기' } } return NextResponse.json({ data }); } export async function POST(request: Request, response: Response) { const data = await request.json(); console.log('req', data); const canvas = cre..

Next 13에서 API Route를 사용해보려고 한다. 아직 정확한 의미는 잘 알지 못하지만, Next에서 아주 간단하게 API를 만들 수 있는 것으로 이해하고 있다. 먼저, Next 13은 그사이에 File Structure가 변했다. 이제 app이라는 src와 비슷한 역할을 하는 directory 밑에서 모든 것을 구성한다. pages라는 폴더가 사라진 것도 처음에는 헷갈렸다. 여하튼 API를 만들기 위해서 다음과 같은 디렉토리 구조를 만들었다. 그리고 app/api/route.tsx를 만들어주고 다음과 같이 작성했다. import { NextResponse } from "next/server"; export async function GET() { const data = { pokemon: { n..

✔️ 필요성 Next.js에서 어떤 버튼을 눌렀을 때 외부 URL에 새 창(new tab)으로 이동하고 싶다. ✔️ 문제 확인 처음에는 next/router의 useRouter를 사용했는데 새 창으로 이동이 안 된다. import { useRouter } from "next/router"; const href = '이동하고자 하는 URL' const router = useRouter(); const onPress = () => { router.push(href); }; 공식 문서를 보니 external URL에는 router.push 보다 window.location이 적절하다고 한다. https://nextjs.org/docs/api-reference/next/router next/router | Ne..

https://dev-jelly.netlify.app/posts/Apply%20Https%20on%20next.js%20when%20development Next.js로 개발 중 HTTPS 적용하기 - DevJelly Next.js로 개발 중 HTTPS 적용하기 가끔 개발을 하다보면 브라우저 제한으로 인해 로컬에서 개발할 때도 HTTPS가 필요할 때가 있다. 전에는 ngrok를 이용했지만 무료 사용으로는 원하는 것들을 다 하기 dev-jelly.netlify.app 위의 블로그를 따라한 것으로 나중에 다시보더라도 제가 좀 더 이해하기 좋은 버전으로 설명을 덧붙였습니다~~~ ✔️ 필요성 로컬로 개발할 때 http가 아니라 https://localhost를 띄우고 싶다! ✔️ openssl 설치 brew i..

nano /usr/local/etc/nginx/nginx.conf https://fgh0296.tistory.com/48 next.js 서버의 reverse proxy 설정하기 nginx 버전은 다음과 같다. 사용 버전 : 1.18.0 버전 확인 방법 : nginx -v 1. vi /etc/nginx/nginx.conf nginx.conf 파일에 들어간다. http { #... server_names_hash_bucket_size 64; #주석해제 #... } 위와 같.. fgh0296.tistory.com https://velog.io/@davelee/mac%EC%97%90-nginx-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 mac에 nginx 설치하기 우선 brew가 설치되어..