[Saida Lab] Next.js에서 google reCAPTCHA 적용하기

웹 사이트를 이용하다 보면 '로봇이 아닙니다' 하는 문구와 함께 신호등을 선택한다거나 문자를 입력하는 절차를 종종 거치게 된다. 이러한 부분은 웹사이트를 공격하는 봇으로 부터 내 웹사이트를 보호하고자 하는 절차인데 비밀번호를 유출하거, 스팸을 작성하는 등의 공격을 당할 수 있기 때문에 유저의 정보가 관리되는 서비스라고 한다면 이러한 안전장치는 반드시 필요할 것 같다. 그래서 이번에 우리 서비스에서는 google에서 제공하는 reCAPTCHA를 적용하기로 했다. Init Setting 아래 참고자료 링크를 통해 접근하게 되면 새 프로젝트를 만들어야 하는데 이 프로젝트를 만들 두 개의 key를 발급 받을 수 있다. 기존 v2는 우리가 봤던 것 처럼 유저가 직접 봇인지 아닌지를 판단하도록 문제를 내는데 v3에..

• format_list_bulleted Develop/librarys
• · 2024. 3. 19.
• textsms

[Saida Lab] Amplitude 적용하기

이번에는 Amplitude 다. 이번 프로젝트 하면서 느끼는 거지만 내가 아직 경험하지 못한 분야가 너무나도 많구나 하는 것을 느끼면서 우물안 개구리에서 이제 막 우물 밖을 쳐다보고 있는 중인 개구리인 느낌이다. 아무튼 이번에도 해당 기능을 어떻게 적용했는지 한번 정리해 보려고 한다. * 참고 사항 혹시라도 내 글을 읽고 도움이 될까? 해서 들어온 분들을 위해 내 프로젝트 상황에 대해서 전반적인 정리를 해두겠다. 프레임워크 : Next.js (ver 14.1.0) 라이브러리 버전 : 2.5.2 추가로 App router 환경에서 구현했다. Init Setting npm install @amplitude/analytics-browser 거두절미하고 일단 설치부터 진행한다..... 사실 처음 적용하는 입장에..

• format_list_bulleted Develop/librarys
• · 2024. 3. 18.
• textsms

[Saida Lab] Framer-motion 적용하기

전에 개발을 할 때는 간단한 애니메이션 (팝업 효과라던지, 뭐 디졸브 라던지...) 들은 대부분 직접 만들어서 구현하곤 했었는데, 최근에 개발하면서 기획자분께서 뿅? 뿅? 하고 튀어나오는 애니메이션을 원하셔서 라이브러리의 힘이 절실했다. 일단 해보겠읍니다! 하고 지른 뒤 ChatGPT나 stackoverflow 형들에게 도움을 요청하면 되겠지 했는데 공식문서만 봐도 간단하게 적용할 수 있는 라이브러리라서 어떻게 적용했는지만 기록해 보려고 한다. Install npm install framer-motion 해당 라이브러리는 사용하고자 하는 프로젝트에서 위와 같이 설치를 진행하면 된다. * 참고 Stack * 프레임워크 : Next.js (ver 14.1.0) 스타일 라이브러리 : sass (1.70.0) ..

• format_list_bulleted Develop/librarys
• · 2024. 3. 14.
• textsms