달과 함께하는 IT

(글쓴이는 아직 공부중인 학생입니다.) Next.JS 강의를 진행하던 도중 Twilo와 해외 메일링 서비스를 사용하여 인증 키를 연동 로그인하는 강의를 진행중 전화번호 -> 돈안내면 자기밖에 안됨 이메일 -> 자꾸 서류내라고 하고 허가를 안내줌 상태라서 더 좋은 서비스가 없나 찾던 중 네이버 클라우드 플렛폼을 찾았다. 사용할 서비스는 1. Cloud Outbound Mailer 2. Simple & Easy Notification Service 2가지 서비스를 사용해서 api 인증을 구현하였다. 메일 서비스의 경우 매달 1000건 SMS서비스의 경우 매달 50건까지 무료로 사용가능하며 Twilo보다 한국 sms는 훨신 싼편임으로 이쪽이 더 유용할 것 같다. 두 문서 모두 API 연동 가이드가 잘 되어있지..

이번 노마드코더 챌린지중 차후에 Next를 사용하게 되면 비슷한 환경을 구현하기 위해 설치 중 사용했던 명령어 방법등을 정리한다. 시작하기에 앞서 설치하는 프로그램은 설치 후 npx next dev // next.js 실행 npx prisma init // 프리즈마 환경변수 파일 생성 등 npx "설치스택" 명령어 를 사용하게 된다. (이부분은 나도 잘 몰라서 차후에 찾아볼 예정 평소에 npm run dev로 썻는데 npx next dev도 같은 명령어로 작동된다.) 1. Next.js + Typescript + Tailwindcss 기본적으로 사용되는 next의 경우 Next + 타입스크립트 혹은 Next + 테일윈드 이런식으로 묶여저 있는 베이스 템플릿 설치가 가능하다. 두가지 방법 다 사용해 본 결..

https://codesandbox.io/s/sleepy-haze-ii4hco?file=/pages/index.tsx sleepy-haze-ii4hco - CodeSandbox sleepy-haze-ii4hco by zerosial using next, react, react-dom codesandbox.io 사용 스택 Next.js Typescript TailwindCss

기존에 배웠던 지식을 활용하여 내가 만들고 싶은 사이트를 하나 처음부터 제작하기로 했다. 이전부터 고민하던 이미 한번 써본 Create react app이냐 아예 SSR까지 고려가능한 Next.js를 처음 사용해보느냐 고민하다가 마침 노마드코더 챌린지가 시작되어 같이 Next.js를 배워보며 제작할 예정이다. 애니메이션을 좋아해서 서코같이 애니관련 물품을 사고 파는 사이트를 구현할 예정이다. 1. 프로젝트 디자인 및 Html 마크업 이번 제로베이스 Html / Css 과제 5편과 Js과제 5편을 하면서 정말 큰 도움을 얻었다. 2주간 모든 과제를 완료하고 리펙토링 중이며 완료되면 느꼇던 점은 블로그에 적을 예정이다. 먼저 Figma 시안과 더불어 과제 요구서를 보고 과제를 만드는데 정말 많은것을 느낄 수..