메로그

Nextjs14 에서 타사 라이브러리 사용하기해당 라이브러리를 활용하여 타사 라이브러리를 쉽고 빠르게 사용할 수 있는 라이브러리 입니다.이를 이용해서 GTM, GA 를 Nextjs 에서 적용해봅시다.@next/third-parties 라이브러리 설치해당 라이브러리는 인기있는 타사 라이브러리를 로딩할 때 성능과 개발자 경험을 개선하기 위한 라이브러리로 현재 v14.2.15 에서도 아직 활발하게 개발 중인 실험적 라이브러리입니다.npm install @next/third-parties@latest next@latestpnpm, yarn 을 쓰시는 분들은 맞는 문법으로 다운받으시면 됩니다. 필자는 pnpm 썻음.GTM, GA 연동해보기구글 태그 매니저(GTM)과 구글 애널리틱스(GA) 를 연동하기 위해서는 @..

AWS Elastic Beanstalk 은 코드만 올리면 알아서 npm install, npm run start, 도메인 연결 등을 자동으로 해줍니다.버전 관리도 해주며, 신경 쓸거는 코드를 업로드하는 것만 신경써주면 됩니다.IAM 생성배포할라면 IAM 을 무조건 만들어줘야 합니다. 배포할라면 무조건 만들어줘야하니 그냥 일단 만들어봅시다.IAM 을 검색해서 역할 > 역할 생성을 눌러줍니다. 1단계 - 신뢰할 수 있는 엔티티: AWS 서비스, 사용사례는 EC22단계 - 권한 추가에서 다음 3개를 추가해줍시다. (AWSElasticBeanstalkWebTier, AWSElasticBeanstalkWorkerTier, AWSElasticBeanstalkMulticontainerDocker) 3단계 - 의미있는..

next-auth 를 이용하여 간단한 소셜로그인을 만들어보자. 우선 가장 쉽게 할 수 있는 깃허브 로그인을 해보자. 깃허브 oauth 셋팅 developer Settings 에 가서 oAuth Apps 를 하나 만들어줍니다. 위에 대로 이러쿵 저러쿵 해서 만들어주면 됨. callback URL 은 callback 주고 싶은대로 아무대나 입력하시면 됩니다. 만들게 되면 client id 가 나와있고 밑에 Generate a new client secret 이라는데가 있는데, 누르면 키가 만들어집니다. 해당 id, secrets key 를 잘 보관해둡시다. 앞으로 로그인시 사용할 아이들(id, pw 라고 생각하면 됨). Next-auth 설치 yarn add next-auth 설치되었다면, page/api/..