프론트엔드 5

JavaScript로 네이버 SENS 메시지 발송하기

네이버 SENS로 메시지를 발송하기에 앞서 준비해야할 사항이 3가지 있습니다(로그인이 필요).API키 (Access Key, Secret Key 총 2개) : 공식문서를 참고해주세요프로젝트 ID: 프로젝트 생성 바로가기발신번호 등록: 바로가기 환경변수NCLOUD_ACCESS_API_KEY=""NCLOUD_SECRET_KEY=""NCLOUD_SERVICE_ID=""NCLOUD_SENDER=""NCLOUD_RECEIVER="" 발급받은 KEY, ID를 환경변수에 추가합니다. 시그니처 생성 함수요청 정보를 API 인증키(AccessKey에 맵핑되는 SecretKey)로 암호화한 후 Base64로 인코딩하여 생성하는 서명값입니다. 암호화에는 HMAC 암호화 알고리즘(HmacSHA256)이 사용됩니다.출처: 네이..

구글폼 제출시 Apps Script로 이메일 전송하기

구글폼은 구글 스프레드 시트와 연결이 가능합니다. 이메일 전송 코드 작성 Apps Script에 처음 접속하면 myFunction 함수가 있는데, 자유롭게 함수명을 변경해서 사용할 수 있습니다. function sendEmail() { MailApp.sendMail("dasoslab@gmail.com", "신규 폼 제출", "바로가기 링크: https://example.com") ;} MailApp의 sendMail 함수를 이용하면 메일을 보낼 수 있습니다. 파라미터 순서는 다음과 같습니다.이메일 주소제목내용  코드 작성 후 우측 상단에 배포 버튼을 눌러 배포를 진행해줍니다.  유형 선택에서 웹 앱을 선택하고, 설명은 자유롭게 작성 후 배포해줍니다. 트리거 등록 사이드바에서 트리거 메뉴로 이동합니다. ..

Next.js에 구글 애널리틱스(GA) 쉽게 적용하기

구글 애널리틱스는 웹사이트에서 방문자들의 행동을 분석할 수 있는 도구입니다. 이 도구를 사용하면 여러 지표들을 확인할 수 있습니다. 예를 들어, 방문자가 검색을 통해 유입되었는지, SNS 링크를 통해 들어왔는지 확인할 수 있습니다. 또한 특정 페이지에 오래 머무는지, 빨리 떠나는지 알 수 있습니다. 이 도구를 사용하면 고객에 대한 이해를 높이고 어떤 콘텐츠나 상품에 관심이 있는지 파악할 수 있습니다. 이를 바탕으로 더 매력적인 콘텐츠나 상품을 중심으로 웹사이트 구조를 설계할 수 있습니다. 긍정적인 피드백도 좋지만 부정적인 피드백을 통해 문제를 개선할 수 있습니다. 특정 페이지에서 체류 시간이 짧다면 이는 사용자가 "이 페이지는 별로 매력적이지 않다."는 메시지를 주는 것과 같습니다. 이 페이지를 개선해 ..

Next.js Vercel Functions timeout(시간초과) 해결 방법

테스트를 위해 Vercel에 배포한 서비스에서 timeout이 발생했습니다. 연산 시간이 긴 함수를 실행했을 때 발생했고 콘솔에 나온 오류는 504 Gateway 였습니다.  Vercel Functions는 플랜에 따라 기본값과 최대값이 다릅니다. (공식문서 바로가기) 플랜최소최대Hobboy (무료)10초60초Pro15초300초Enterprise15초900초 저는 무료 플랜을 사용하고 있어서 기본값이 10초였고, 10초가 지나자 timeout이 발생했습니다. 만약 60초 이상의 복잡하고 긴 연산을 해야하는 경우 Pro 버전으로 업그레이드를 해야합니다. 이 글에서는 기본값을 최대로 수정하는 방법에 대해 설명합니다. 대시보드에서 설정 프로젝트의 설정 페이지의 Functions 메뉴로 가면 Function M..

Auth.js(Next Auth) 사용자 인증 쉽게 구현하기

Auth.js는 구글, 카카오, 네이버 등 다양한 로그인 방법을 제공해 사용자 인증 및 세션 관리를 쉽게 구현할 수 있도록 하는 라이브러리입니다. 구글, 카카오 등과 같은 소셜 로그인 서비스를 Auth.js에서는 인증 프로바이더라고 합니다. Auth.js는 NextAuth의 이름이 변경된 버전이기 때문에, 이 라이브러리를 처음 접하시는 분들은 혼동할 수 있습니다. 초기에 Next Auth라는 이름으로 Next.js 프레임워크를 대상으로 개발되었는데, 현재는 Javascript의 다른 프레임워크나 서버 환경에서도 사용될 수 있도록 확장하면서 Auth.js로 이름을 변경했습니다. Next Auth로 검색하면 v4 사이트가 나오고, Auth.js로 검색하면 v5 사이트가 나오는데 이 글은 v5를 기준으로 작성..