달과 함께하는 IT

금주 진행 완료 제로베이스 프론트엔드 스쿨 3차 코테 (7.6/10점) (수요일 3시간) 노마드코더 Next.JS 챌린지 진행중 (API 연동하여 로그인 폼 만들기) 노마드코더 Next.JS 본격적인 과정 진행 (강의 수강과 더불어 과제 해결) 엘리스 SW트랙 자바스크립트 코딩테스트 문제 풀이중 차주 진행예정 8월 노마드코더 Next.js 챌린지 (8/28일 종료) https://nomadcoders.co/carrot-challenge 캐럿마켓 챌린지 – 노마드 코더 Nomad Coders 수강생이라면 누구나 무료로 참여 가능. 졸업시 30% 할인쿠폰 까지! nomadcoders.co 9월 프로그래머스 실무와 가까워지는 Node.js 백엔드 개발 (feat. TypeScript) 8월 25일(목) ~ 9..

프로그래머스와 다르게 엘리스 플렛폼의 경우 기존 백준과 비슷하게 입 출력을 직접 조절하던지 명령어로 관리해야 되는 것이 있다. 줄바꿈 , 출력 , ' " ` 등 백틱 콤마정리등 몇가지 따로 기억해둬야 될 것들이 있어서 시험 전 한번 훌터보기 위해 정리한다. 1. 출력 시 줄바꿈 // 출력을 원하는 결과값 400 bus like // 입력시 "400\nbus\nlike" 먼저 줄바꿈의 경우 \n ->백스페이스 아래에 있는 || (OR)키 버튼을 그냥 누르면 된다. 1 - 1. \n이 포함된 값을 정제하기 // 출력을 원하는 결과값 const input = [ 'elice', 'rabbit', 'cheshire', 'dood', 'hatter' ] // 입력 값 elice rabbit cheshire doo..

https://codesandbox.io/s/nextjs-prisma-sqlite-forked-wsbegh NextJS Prisma SQLite (forked) - CodeSandbox NextJS Prisma SQLite (forked) by zerosial using @prisma/client, @types/node, @types/react, @types/react-dom, iron-session, next, prisma, react, react-dom codesandbox.io 주요 기능 https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/ React에서 서버 데이터를 최신으로 관리하기(React Query, SWR) 카카오엔터테인먼..

SMS의 경우 메일보단 조금 더 많은 요청사항이 있다. https://www.ncloud.com/product/applicationService/sens NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 먼저 달에 50건까지 무료이며 이용 신청하기를 통해 신청을 해준다. 이 중 ID만 사용한다 ( ncp:sms:kr:숫자:프로젝트명) 또한 자신의 휴대폰 혹은 법인 번호를 등록해야 한다. https://console.ncloud.com/sens/sms-calling-number imp..

먼저 이메일 서비스를 사용한다면 해당 서비스를 신청해야 한다. https://guide.ncloud-docs.com/docs/email-email-1-2 Outbound Mailer 사용 가이드 - Cloud Outbound Mailer guide.ncloud-docs.com Cloud Outbound Mailer 서비스를 신청하면 된다. 달에 1000건까지 무료로 사용 가능하다. Makesignature는 전편에서 만든 함수를 사용하면 된다. import MakeSignature from "@components/makeSignature"; const axios = require("axios"); export default function sendEmail(email, payload) { let resu..

https://api.ncloud-docs.com/docs/common-ncpapi Ncloud API api.ncloud-docs.com 기본적인 API 설정이 나와있지만 내가 사용하기 위해 코드를 살짝 변경하였다. 사용중인 환경은 Next.js , Axios이다. 사용전 crypto를 설치하여야 한다. $ npm install crypto-js import crypto from "crypto-js"; export default function MakeSignature(url, method) { const date = Date.now().toString(); const space = " "; const newLine = "\n"; const secretKey = process.env.NAVER_ACCE..

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

금주 진행 완료 제로베이스 프론트엔드 스쿨 3차 코테 (7.4/10점) (수요일 3시간) 노마드코더 Next.JS 챌린지 진행중 (토이프로젝트 2 + 퀴즈 2) 노마드코더 Next.JS -> Prisma와 Plantscale을 통한 API 통신 학습 노마드코더 Next.JS 본격적인 과정 진행 (강의 수강과 더불어 과제 해결) 엘리스 SW트랙 자바스크립트 코딩테스트 문제 풀이중 차주 진행예정 8월 노마드코더 Next.js 챌린지 (8/28일 종료) https://nomadcoders.co/carrot-challenge 캐럿마켓 챌린지 – 노마드 코더 Nomad Coders 수강생이라면 누구나 무료로 참여 가능. 졸업시 30% 할인쿠폰 까지! nomadcoders.co 9월 프로그래머스 실무와 가까워지는 ..

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 + 테일윈드 이런식으로 묶여저 있는 베이스 템플릿 설치가 가능하다. 두가지 방법 다 사용해 본 결..