TIL

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

구글로그인 구현 후 vercel에 deploy했는데 middleware에는 SSR인 getsession을 쓸 수 없다는 에러가 나왔다. 이를 해결하려고 웹 에플리케이션의 인증 방식에 대해 공부했다. [ 인증이란? ]인증과 인가에 대해 구분할 필요가 있다.  Authentication - 인증- 유저식별, 신원검증 , 로그인하는 것이라고 생각하면 된다.  Authorization - 인가- 인증 후, 유저가 어디까지 접근하는 것을 허락할 것인가- 관리자 권한을 가진 유저만 관리자 페이지에 엑세스할 수 있다.  [쿠키와 세션]쿠키서버 -> 브라우저로 전송해 클라이언트에 저장할 작은 파일브라우저(클라이언트)는 받은 쿠키를 요청시 같이 전송함예를 들어 사용자가 로그인하면 서버는 아이디, 비번을 쿠키에 담아 서버..

SEO - 검색 결과 상단에 뜨게 하기 위한 것구글과 같은 검색엔진은 봇을 통해 사이트들을 크롤링하고 저장(인덱싱)하는데, 이때 봇들한테 이 사이트에 대한 정보를 잘 보여줘서 높은 순위에 차지하도록해야 한다.  슬프게도 정해진 공식은 없다. 이렇게 이렇게 하면 무조건 검색결과 첫번째로 뜬다. 이런게 있으면 너도나도 하기떄문에 공식이 될 수 없을것이다..그냥 최대한 할 수 있는 요소들을 세팅하는 것으로 한다.  실제로 내가 사이트를 만들고 해보니 구글 검색 상단에 뜨게하는게 엄청 어렵다 그래도 기본적으로 세팅해야하는 것들이 있다.  nextjs app router 를 쓰고 있어서 이를 예시로 설명하겠다. layout.tsx에서 구성한다. [ 사이트 등록하기 ]일단 가장 먼저 할 일은 구글 서치콘솔에 내 사..

로컬에서는 안나는데 vercel에 빌드할때 나는 에러Error: `"` can be escaped with `"`, `“`, `"`, `”   .eslintrc.json 에 아래 코드를 삽입하면 된다. "rules": { "react/no-unescaped-entities": 0 },"rules": {    "react/no-unescaped-entities": 0  }, 전체 eslinttrc.json {  "rules": {    "react/no-unescaped-entities": 0  },  "extends": "next/core-web-vitals"}

데이터를 관리하려면 state에 대해 알아야한다. state는 useState() const [likes,setLikes] =useState(0)0에서 시작한다. 그리고 리스트를 리턴한다. ( [likes,setLikes])likes : state변수setLikes : function to update it function Likes() {const [likes, setLikes] = useState(0)const handleClick = () => {setClicks(likes+1)}return(Likes: {likes})};  Controlled 컴포넌트의 경우,form에서 사용하려면 다음과 같이 쓴다. const [value,setValue] =useState('') function Controll..