예상보다 빨리 회사에 지원할 일이 생겼다. 음..? 난 준비한 게 없는데? 포트폴리오가 있으면 좋다는데 그럼 만들어야죠 뭐 하하하 거두절미하고 그래서 어떻게 만들었는데 하는 분들을 위해. 완성이 목표였기 때문에 아직 손볼 곳이 많습니다... :) 그저 이런 사람도 있구나 참고 정도하시길.. 부끄러우니까 열심히 수정하겠습니다 하핫 깃허브 링크 포트폴리오 링크 Next.js는 리액트와 달리 서버에서 HTML, CSS, 자바스크립트를 만들고 검색 엔진에서 HTML을 바로 가져오기 때문에 검색 엔진 최적화에 도움이 된다고 한다. 또한 정적인 콘텐츠를 가져와서 블로그, 홈페이지, 포트폴리오처럼 내용이 거의 변하지 않는 서비스 제작시 많이들 사용한다. 따라서 나도 (드디어) next.js를 사용해보기로 했다! Fi..

Nodemailer 설정 // sendmail.js require("dotenv").config(); const nodemailer = require("nodemailer"); async function main() { try { const transporter = nodemailer.createTransport({ service: 'Naver', host: "smtp.naver.com", port: 587, auth: { user: "cocavoca@naver.com", pass: process.env.EMAIL_PASSWORD, }, }); const info = await transporter.sendMail({ from: "cocavoca@naver.com" // 위의 auth.pass와 같은 주..

DBeaver로 DB 설계 (준)완성 순서가 뒤죽박죽이기는 하지만 역시 데이터베이스를 탄탄하게 설계해야 뒤에 개발도 편할 것 같아 주말 동안 DB를 설계했다. 그래봤자 테이블 3개인데 하루면 되겠지? 했던 나.... 반성합니다. 😇 유저가 이메일로 가입하는 경우, 카카오 계정으로 가입하는 경우 두 가지로 나뉘어서 검색을 해보니 이메일은 인증시 확인용 토큰, 카카오는 리프레쉬 토큰이 필요하다는 거다. 그래서 그 토큰들을 어디에 저장할지(특히 이메일 토큰) 많이 알아보기도 했고, 일회성인 이메일 토큰을 저장할 필요가 있을까 싶어 일단은 안 만들었는데 사실 개발하면서 더 알아봐야 할 것 같다. 생성 날짜는 datetime/timestamp 중 timestamp를 사용해서 데이터가 삽입되면 자동으로 생성 시간이..

카카오 로그인 방식 1. 인가 코드 받기 1. 서비스 서버가 카카오 인증 서버로 인가 코드 받기 요청 2. 카카오 인증 서버가 사용자에게 카카오계정 로그인을 통한 인증 요청 - 클라이언트에 유효한 카카오계정 세션이 있거나, 카카오톡 인앱 브라우저에서 요청한 경우 4단계로 넘어감 3. 사용자가 카카오 계정으로 로그인 4. 카카오 인증 서버가 사용자에게 동의 화면 출력하여 인가를 위한 사용자 동의 요청 - 동의 화면은 서비스 애플리케이션의 동의 항목 설정에 따라 구성 5. 사용자가 필수 동의 항목, 이 외 원하는 동의 항목에 동의한 뒤 [동의하고 계속하기] 버튼 누름 6. 카카오 인증 서버는 서비스 서버의 Redirect URI로 인가 코드 전달 2. 토큰 받기 1. 서비스 서버가 Redirect URI로 ..

본격! 리액트 + 타입스크립트 + 노드로 만드는 회원가입 폼이다. 폼은 개념만 배우고 제대로 만들어 보는 건 처음이라서 여러 가지 문서를 참고했다. 1. form - GET / POST 회원가입 form method로 GET, POST 중 어느 것을 사용하는지 알아보기 위해 mdn 문서를 찾아봤다. GET GET 메서드는 브라우저가 서버에 주어진 리소스를 보내달라고 요청하는 데 사용한다. 즉 데이터를 조회할 때 많이 쓴다. 브라우저는 빈 본문을 전송하고, 본문이 비어 있으므로 GET 메서드를 사용하여 양식을 전송하면 서버로 전송된 데이터가 URL에 추가된다. export default function Login(): JSX.Element { return ( 아이디 중복확인 비밀번호 닉네임 중복확인 가입하..