TIL

MongoDB Atlas 접속 - network access 들어가서ip주소를 내껄로 바꾸어주면된다. 내 ip주소 확인은 구글에 ip주소 확인 이라고 치면 많이 나온다https://findip.kr/ edit해서 내 ip주소를 변경해주면 끝

Mongodb atlas 에서 nextjs 에서 수행할 mongodb url을 찾는 법 왼쪽 사이드바에서 database access 접속 database access 에서 현재 있는 어드민 유저 edit 을 하거나 add new batabase user 로 새로운 유저 생성하기 하단에서 패스워드 생성  패스워드는 이후 password자리에 대체해주고 사용하면된다. mongodb+srv://{username}:@~~~mongodb.net

auto close tag검색하면 나오는 것 다운 html 작성할때 자동으로 closing tag 도 입력해줘서 편합니다

https://github.com/mikf/gallery-dl GitHub - mikf/gallery-dl: Command-line program to download image galleries and collections from several image hosting sitesCommand-line program to download image galleries and collections from several image hosting sites - mikf/gallery-dlgithub.com url을 입력해서 사진을 다운받는 받는 좋은 라이브러리가 있어서 소개동숲 산리오 디자인이랑 길 도트 각각 보드를 만들어 저장하고, 한번에 다운받으려고 했다 https://kr.pinterest.com/su..

https://tagmanager.google.com/구글 태그매니저로 구글 애널리틱스 적용하려면, 자바스크립트 코드를 추가해야하는데, 고대로 복붙하면 적용되지 않는다. 다음을 참고하면 된다. https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries Optimizing: Third Party Libraries | Next.jsOptimize the performance of third-party libraries in your application with the `@next/third-parties` package.nextjs.org 설치npm install @next/third-parties@latest..

Vercel로 배포하고나서는 폴더를 만든다던가, 파일을 저장한다던가, 읽고 쓴다던가 하는 fs 활동에 제약이 있다.실제로 막상 배포를 해보면 오류가 많이 생긴다.  로컬에서는 되지만, vercel에 배포하면 서버리스 환경이기 때문이다. 그래서 구조적으로 이미지 나 파일을 저장하는 서버를 하나 더 둔다. (아마존의 S3 같은)그치만 나는 이렇게 하기 싫었다. 번거롭고 이미지 서버는 더 서비스가 커지면 도입하고 싶었기 떄문이다(물론 해보는 경험도 좋을것이고 나중에 서비스를 더 만들다보면 언젠가 하게되리라는 생각이 있다. ) 다음을 참고해서 시도해보았다. https://vercel.com/guides/how-can-i-use-files-in-serverless-functionshttps://vercel.com..

후딱 만들어본 로또번호생성기뭔가 경제적 자유를 달성할 수 있는 투자, 로또, 부업, 세금 같은 것들을 도와주는 계산기 플랫폼 같이 확장시켜보고자 한다. 뭐 이것저것 하다보면 깨닫는게 있지 않을까?랜덤으로 6개 숫자를 뽑는다고 하더라도 1,2,3,4,5,6을 뽑을리는 없고예전에 침착맨이 로또 번호 연구하는 것에서 영감을 받았다. 취할 것만 취하고 버릴건 버리려고일단 1번대 20번대 30번대는 무조건 하나 이상 포함한다10, 40번대는 1개 이하로 뽑는다 나머지는 중복되지 않는 숫자 중에서 랜덤으로 뽑아 최종 6개를 만든다, 1번대 20번대 30번대는 무조건 하나 이상 포함한다const num1 = Math.floor(Math.random() * 9) + 1; // 1부터 9까지의 숫자const num20 ..

nextjs에서 구글 로그인 구현하기 1. 구글 클라우드 플랫폼 로그인https://console.cloud.google.com/ Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com   2. New Project 만들기이름 입력 후 create   3. API 메뉴로 접속 - OAuth consent screen으로 접속  4. 진행하면서 해당 칸을 채운다. 구글로그인할때 보이는 화면 구성   5. Credentials - Create Credentials - Oauth Client ID   6. 마찬가지로 계속 진행  7. 저장하면 나오는 Client id 복사해서 .env.local에 저장한다.   .env.localGOOGLE_CLIENT_ID ..

구글로그인 구현하거나, 랜딩페이지를 꾸밀때 아이콘이 필요한 경우가 종종있다. 제일 간단하게 하는 방법은 react-icons를 사용하는 것이다.  https://react-icons.github.io/react-icons React Icons react-icons.github.io  원하는 아이콘을 검색하고 복사 후 붙여넣기 하면 된다.    간단하게 적용이 가능하다. import { BiCoinStack } from "react-icons/bi"; 실제 적용한 예시 div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration..

NEXTAUTH_SECRET 얻는 법은 아주 쉽다터미널에서 $ openssl rand -base64 32 수행하면 나오는 값을 복사해 .env.local에 넣으면 된다.  vercel에 deplpy할 때 환경변수 등록해주는 것을 잊지말자! 출처 https://next-auth.js.org/configuration/options#nextauth_secret