달과 함께하는 IT

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

https://codesandbox.io/s/rhf-blueprint-forked-r5jijc?file=/src/App.js RHF-Blueprint (forked) - CodeSandbox RHF-Blueprint (forked) by zerosial using react, react-dom, react-hook-form, react-scripts codesandbox.io 백지상태에서 로그인아이디 비밀번호 메일을 사용해서 로그인 창을 만드는 챌린지 주요 기능 로그인 키를 클릭 전 3가지 창에서 주어진 조건이 충족됬을 경우만 진행가능하다. 이외에도 기본적으로 이메일일경우 이메일인지 전화번호일땐 전화번호인지 등 기본체크는 라이브러리에 포함되어 있다. //간단히 알아보는 코드와 기능 // onsubmit으..

이번 노마드코더 챌린지중 차후에 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

https://play.tailwindcss.com/NsM6CsdqFl Tailwind Play An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser. play.tailwindcss.com 사용 스택 TailwindCss 이번주차 첫 캐럿마켓 챌린지는 템플릿을 가지고 Tailwindcss만 사용하여 최대한 유사하게 만드는 과제였다. 다른건 사용하지 않고 순수 html + tailwind와 svg만 가지고 만드는 과제였다.

본격적인 제작을 시작하고 이번엔 디자인부터 시작해서 색이라던지 아이콘 배치 등을 만들면서 내 취향것 맘대로 만질 생각이다. 1. UI 정하기 시작에 앞서 먼저 UI는 당근마켓 어플리케이션을 베이스로 진행하기로 했다. 진행중인 챌린지와 새로 배우는 기술스택을 처음에는 동일하게 맞추는게 맞다고 생각했다. 노마드코더 챌린지 (Next.js 캐럿마켓 만들기) https://nomadcoders.co/carrot-market/ [풀스택] 캐럿마켓 클론코딩 – 노마드 코더 Nomad Coders NextJS, React18, Tailwind, Prisma nomadcoders.co 물론 들어가는 아이콘 색조합 마켓등 세부적인건 따라가지 않을 예정이고 큰 틀을 맞춰서 진행할 예정이다. 과정중에 꼭 구현해야 하는 세부..

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

https://zerosial.github.io/Calendar_Boilerplate/ Calendar Project zerosial.github.io https://github.com/zerosial/Calendar_Boilerplate GitHub - zerosial/Calendar_Boilerplate Contribute to zerosial/Calendar_Boilerplate development by creating an account on GitHub. github.com (프로젝트 링크) 바닐라 코딩 스타터 킷 2번째 과제인 캘린더 만들기를 완료하였다. https://book.vanillacoding.co/starter-kit/step-5/final-projects/calendar 🖋 Ca..

https://zerosial.github.io/Baseball_game/ Baseball Project zerosial.github.io https://github.com/zerosial/Baseball_game (프로젝트 링크) 바닐라 코딩 스타터 킷 최종 프로젝트 중 1번째인 야구게임을 만들어봤다. https://book.vanillacoding.co/starter-kit/step-5/final-projects/baseball 🖋 Number Baseball - Starter Kit 구현해야 할 내용을 작은 단위로 잘라 우선순위를 정하고, 우선순위에 따라 하나씩 작업하세요. 필요에 따라 스스로 더 세세하게 단계를 나누어도 좋습니다. book.vanillacoding.co Todo 리스트는 전부 구현..

작업시간 : 4시간 HTML의 기본 구성을 이용해서 클론 코딩하는 과제였다 아직 내 지식으로는 거의 구성이 불가능했고 인터넷으로 찾아가며 겨우 기본조건이랑 요소만 맞춰서 만든 것 같다. Google Google 정보 스토어 중간의 이미지랑 검색창은 만들기가 너무 어려워서 그림으로 대체했다 (과정에서 버튼의 클릭은 신경쓰지 않는다라고 적혀있어서) 나중에 자바스크립트 공부를 좀 더 해보고 HTML이랑 CSS쪽을 제대로 파보고 싶었다.