개발로 부자되기 27

해결법 Next.js error cannot find module 'next/headers'

nextauth error가 발생할 수 있는데, 나 같은 경우엔 next.js version과 next-auth version이 안맞아서 난 에러였다. next version을 v12를 쓰고 있었는데 이 v12와 맞는 버젼에 next-auth를 써야 빌드된다. "next": "12.1.6", 아래 글처럼 "next-auth": "4.15.1" 로 고정한후 node_modules를 지우고 다시 빌드하니 문제없이 동작했다! https://stackoverflow.com/questions/74339649/next-js-error-cannot-find-module-next-headers Next.js error cannot find module 'next/headers' Faced this issue when ..

next.js에서 버튼 누를 시, url 이동하기 리디랙션(redirect)

리액트에서 버튼 누를시 다른페이지로 이동하는것을 보여주겠다. next/link 패키지를 사용하여 리디렉션 기능을 생성할 수 있습니다. 다음은 "/home"에서 "/p2p"로 리디렉션하는 예제 코드입니다: 이 예제에서는 Next.js에서 Link와 useRouter 컴포넌트를 가져옵니다. useRouter 훅을 사용하여 라우터 객체에 액세스하여 프로그래밍 방식으로 탐색할 수 있습니다. handleLinkToP2P 함수는 버튼 클릭시 호출되고, 이때 router를 통해 리디랙션을 할 수 있습니다. push로 하면 뒤로가기고 원래있던 home으로 올 수 있습니다. import React from "react"; import Link from "next/link"; import { useRouter } from..

카페 찾기에 대하여..

나는 약간 카페를 작업실로 생각하며 간다. 집에서 책보고 개발하는것보다, 카페가서 하는걸 더 좋아한다. 또 여자친구를 만나도 데이트를 카페에서 많이 한다. 각자 개발하거나 같이 유튜브도 본다. 근데 카페가 워낙 많아서 선택하기가 어렵다. 선택지가 너무 많아 선택하기 어렵다. 개발자로써.. 아 카페 추천 사이트를 만들고 싶다. 라는 생각을 할 수 밖에 없다. 종종 여자친구는 이렇게 요청한다. 이 요구사항을 모두 충족하는 카페를 네이버에서 찾는건 넘나 어려운 일이다. 이런 수요가 많을까? 아무튼 필요한 기능으로는 내가 원하는 정보로 정렬할 필요가 있다. 요정도를 찾고 싶은건데, 네이버 지도에서 찾으려면 하나씩 눌러보면서 리뷰까지 보면서 찾고 있으니 너무 힘들다. 1. 주차는 되는지 2. 넓은 카페인지 3. ..

워드프레스 사이트 아이콘 (파비콘) 설정

워드프레스 홈페이지를 만들었다면, 아이콘을 변경하고 싶을꺼에요. 아래 이미지는 기본 파비콘인데, 이걸 원하는 이미지로 바꾸는 방법에 대해 적어봅니다. 쉽습니다. 자신의 워드프레스에 https://자기 워드프레스/wp-admin/customize.php로 들어가면 됩니다. https://blog.yanabu.com/wp-admin/customize.php 로그인 ‹ 야나부 워드프레스 — 워드프레스 blog.yanabu.com 사이트 아이덴티티를 누르고 사이트 아이콘 이미지 넣기를 하면 됩니다. 사이즈는 512x512 png로 넣으면 됩니다. 저는 450x450정도로 넣었는데 예쁘게 잘나옵니다.

5분만에 AWS LightSail 활용한 워드프레스 만들기 #2 고정IP 설정후 접속 안됨 해결

고정IP를 연결해두고, 도메인을 설정해보자. https://lightsail.aws.amazon.com/ls/webapp/ap-northeast-2/instances/ https://lightsail.aws.amazon.com/ls/webapp/ap-northeast-2/instances lightsail.aws.amazon.com 나 같은 경우엔 도메인은 cloudflare로 관리하기 때문에 약간 다를 수 있다. 고정IP생성후에 cloudflare에 추가하는것으로 DNS 설정을 끝냈다. 고정IP를 변경했더니 접속이 안됐다. 찾아보니 아래명령으로 ip변경을 할 수 있었다. sudo /opt/bitnami/configure_app_domain --domain https://lightsail.aws.amaz..

5분만에 AWS LightSail 활용한 워드프레스 만들기 #1 서버 만들기

워드프레스를 활용해서 자동 글 생성을 해보려고 한다. 워드프레스 셋팅하면서 글을 적어본다. https://lightsail.aws.amazon.com/ls/webapp/create/instance?region=ap-northeast-2 https://lightsail.aws.amazon.com/ls/webapp/create/instance?region=ap-northeast-2 lightsail.aws.amazon.com 요금제를 설정해야하는데 나는 한번 5달러로 설정해본다. 램은 1GB는 돼야하는거 아닌가 싶어서 말이다. 그 아래에 인스턴스 생성을 누른다. 이름은 마음대로 정해도된다. 태그는 따로 추가하지않아도 된다. 아래 이미지처럼 여기까지 만들었다면, 실행중이라고 뜨고 ip가 뜬다. 이 ip를 통해..

차트 레이싱 만들기

아래 링크에서 엑셀데이터를 활용해서 차트랭킹을 만들 수 있다. https://app.flourish.studio/projects Flourish | Data Visualisation & Storytelling Beautiful, easy data visualization and storytelling app.flourish.studio 리스트 중에 bar chart race라는 템플릿이 있는데 이걸 선택해서 데이터를 수정하면 된다. 아래는 샘플데이터이다. 엑셀에다가 아래와 같이 정보를 넣으면 된다. A와 B열에는 코인 이름, 아이콘을 넣으면 되고, 시간순으로 원하는 데이터를 하나씩 넣으면 된다. 데이터를 수집하는게 중요하다. 코인이름 이미지 날짜1 날짜2 날짜3 BTC url 가격1 가격2 가격3 ETH..

coingecko api 코인 가격 가져오기

코인 가격 가져오기 나 같은 경우엔 마켓캡 가져오는게 필요한데 코인게코 api를 활용해서 하나 만들었다. 문서는 아래 문서를 참고하면 좋다. https://www.coingecko.com/en/api/documentation Crypto API Documentation | CoinGecko Power your application with our free & independently sourced crypto data such as live prices, trading volume, exchange volumes, trading pairs, & more. www.coingecko.com 이 데이터를 보면 마켓캡 뿐만 아니라 가격도 나오니 참고해서 만들면 좋다. 다만 코인게코에서 crypto_name으로 ..

nodejs XLSX 라이브러리, 엑셀 라이브러리 사용방법

xlsx 라이브러리는 Excel 파일을 읽고 쓰고 조작할 수 있는 Node.js 모듈이다. js-xlsx 라이브러리 위에 구축되어 있으며, 간단하고 사용하기 쉬운 API를 제공한다. xlsx를 사용하면 다음과 같은 Excel 파일 관련 작업을 수행할 수 있습니다. XLSX, XLSB, XLS, CSV, TXT 등 다양한 형식의 Excel 파일을 읽고 쓰기 Excel 파일에서 셀, 행, 열 및 워크시트와 같은 데이터를 파싱하고 처리하기 Excel 파일에서 데이터를 수정하고 조작하기, 셀, 행, 열 및 워크시트를 추가, 삭제 및 업데이트하기 새로운 Excel 파일 생성 또는 기존 파일에 새로운 데이터 또는 서식 추가하기 Excel 파일에서 공식 및 함수를 사용하기, 공식을 계산하고 평가하기 xlsx 라이브러..