nextjs3 Form에서 두개 이상의 버튼을 다루기 (feat. server action ) Form 안에 두개 이상의 버튼이 있을 경우 어떤 버튼을 클릭했는지에 따라 행하는 액션이 다를 수 있다.이 때 button의 name와 value 속성을 이용하면 form의 action에서 버튼의 주체를 파악할 수 있다.form action에서 넘겨주는 파라미터는 FormData로써 폼 안에 버튼을 클릭하면 해당하는 버튼의 name과 value 정보가 포함되어져 있다.(이 때 form 안에 input 필드가 있다면 input들의 name과 value들도 출력 됨.)import { signIn } from '@/auth';function SignIn() { const handleAction = async (data: FormData) => { 'use server'; cons.. 2024. 6. 14. 인가 서버에서 token 받아오기 (OAuth) feat. NextJs next-auth를 사용하면 provider를 통해 oauth 구현이 쉽겠지만 oauth에 대해 알고 있는 로직을 직접 구현해보고 싶어졌음https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오 로그인 문서에 따르면 oauth의 로직은 아래 이미지와 같다메인 페이지(Home)에 있는 카카오 로그인 버튼을 누르면 아래의 함수가 실행된다.const HomePage = () => { const handleKakaoLogin = () => { .. 2024. 6. 10. [aws] ec2 인스턴스에 next.js 배포하기 (feat. pm2 nginx ) in Ubuntu 기본적으로 제공하는 next 프로젝트에 대해 배포해보기. 1. npx create-next-app 2. npm run build 3. next.js를 배포하면 build 폴더를 따로 제공하지 않고 .next 폴더 안에 생성 됨. => 숨겨져 있어서 ls 통해서 봐도 안보임. cd .next 하면 입장 가능 4. nginx 를 통해 포트에 대해 우회할것이므로 해당 next 프로젝트의 pacakge 파일안에서 npm start 시 포트 지정해줄 필요 x 5. nginx, pm2는 이미 설치되어있다고 가정 6. 도메인 접속 시(퍼블릭 ip) next 빌드로 우회 하기 위해 root경로에서 /etc/nginx/sites-available 폴더 안에 default 파일 생성 해서 아래와 같이 입력 server {.. 2023. 12. 8. 이전 1 다음
