IT 개발자가 되기위한 여정

컴퓨터 공부를 시작함에 앞서 계획 및 개발에 대한 내용을 풀어나갈 생각입니다.

프로젝트/오키드 마켓 (장기 , 1인) 7

Naver Cloud Platform [3] - SMS 송신하기

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..

Naver Cloud Platform [2] - 이메일 송신하기

먼저 이메일 서비스를 사용한다면 해당 서비스를 신청해야 한다. 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..

Naver Cloud Platform [1] - API Header (Signature 생성)

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..

Naver Cloud Platform [0] - 서론

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

Next.js 기본 개발 환경을 위한 설치법

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

Html과 CSS 그리고 마크업

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

Next.js 프로젝트 (애니 마켓) 제작 시작

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