Dev study and Repost

PERN - 08 vercel 배포 설정 - json 환경설정 환경변수​vercel에 배포를 위한 설정​각 프로젝트내 vercel.json 파일 생성 ​ 각프로젝트에 맞게 소스작성개인정보와 불필요 파일이 깃되지 않게 설정 후 비공개 레포지토리 생성​​---배포를 위해 versel 에 로그인https://vercel.com/ Vercel: Build and deploy the best web experiences with the AI Cloud – VercelVercel gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com 새로운 프로젝트를 생성하기위해 ..

PERN - 07 clipdrop 이미지 AI 연동 / 자동 이미지 사진 제거, 이미지 생성, 이미지 편집​사진, 이미지 작업을 하는 관련자들은 요즘 인공지능, 자동화 도구를 주로 사용하고 있습니다.이 기능을 서비스하는 웹서비스가 있고, 이를 연동한 서비스를 생성할수도 있는데요.​이번 시간에는 이미지 편집을 자동, 간편하게 할수 있는 Clipdrop!클립드롭!clipdrop api를 사용하여 웹서비스에 적용하는 방법을 기록으로 남겨봅니다.​---​​기장먼저 클립드롭 공식웹사이트에 접속합니다.https://clipdrop.co/apis Clipdrop APIs · All Clipdrop Apis documentation and experimentsCleanup Too many photos contain u..

PERN - 06 구글 제미나이 연동 / google ai gemini api - 인공지능 openAI 연동​지난 포스팅에 이어서 서버와 각 기능 연결, 연동 작업을 시작.​미들웨어로 인증에 사용할 소스 작성 auth.jsneon db 연결을 위한 config/db.js 작성마무리 후, 인공지능 서비스 제공을 하고자합니다.​구글 인공지능 api 인 제미나이 연동을 하려고 하지요.​그방법을 기록으로 남겨봅니다.​---스크린샷, 사진과 글 순서로 진행합니다.가장 먼저 구글 ai 스튜디오에 접속합니다.https://aistudio.google.com/prompts/new_chat Sign in - Google AccountsCouldn’t sign you in The browser you’re using do..

PERN - 05 neon 네온 연동 a/ 클라우드 네이티브 서버리스 데이터베이스 플랫폼 PostgreSQL​지난번 서버를 생성하였고 이를 데이터베이스와 연동하려고합니다.PostgreSQL 기반의 클라우드 네이티브 서버리스 데이터베이스 플랫폼인 네온https://neon.com/ Neon Serverless Postgres — Ship fasterThe database you love, on a serverless platform designed to help you build reliable and scalable applications faster.neon.com네온 neon 연동을 기록으로 남겨봅니다.​PostgreSQL: 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)으로, 안정성과 확장성..

PERN - 서버 설정 04 server​PERN 서버 설정을 위한 방법으로, 순차적 과정을 기록으로 남깁니다.스크린샷/사진 그리고 글 설명 순으로 진행합니다.​---서버 폴더 생성서버.js 생성server 폴더 경로로 터미널 실행npmnode.js 프로젝트 초기화를 위해 명령어 실행$ npm init -ypackage.json 파일 생성 확인패키지 설치 명령어 실행$ npm install express dotenv cors axios cloudinary multer​*용도 와 요약 정보express: Node.js 웹 서버 프레임워크로, 라우팅, 미들웨어 처리, API 구축 등에 사용됩니다. 백엔드 서버를 빠르고 효율적으로 구성할 수 있게 도와줍니다.​dotenv: .env 파일에 정의된 환경 변수를 ..

PERN - 마크다운 설정 03 markdown / react npm markdown​웹서비스 제공중 태그 및 내용 작성을 했으나 마크다운 형식의 글을 표현해야하는 경우가 있습니다.즉 react 앱에서 마크다운을 직접 보여할 경우, 이 기능을 구현해야하죠.--사용자가 작성한 텍스트를 마크다운으로 랜더링 하거나, 문서형 콘텐츠를 보여줘야할때, 이럴때 간단히 패키지를 이용해서 쉽게 구현이 가능합니다,​---react-markdown 패키지를 사용하면 되는데요.https://www.npmjs.com/package/react-markdown react-markdownReact component to render markdown. Latest version: 10.1.0, last published: 6 mont..

PERN - 구독 결제 설정 02 clerk billing​웹서비스를 구현하다보면, 구독 서비스, 결제 서비스 등의 구현이 필요한 경우가 있습니다.이런경우 결제, 구독 관련 외부 서비스들이 많은데요.clerk 에서 제공하는 지불 서비스를 이용하여 프로젝트, 웹서비스에 기능 추가를 할 수 있습니다.​clerk의 지불서비스 설정을 위한 방법을 기록으로 남겨봅니다.​---가장 먼저 웹 프로젝트에 clerk 연동을 합니다.로그인 기능을 이미 이용하고 있고, 이전 포스팅 글중에 있으므로 생략합니다.​https://clerk.com/ Clerk | Authentication and User ManagementThe easiest way to add authentication and user management to..

PERN - 설정 시작 setting first 01 - lucide-react​---*FIRST​/root$ npm create vite@latest$ yclientreactJavascript---​$ cd client$ npm install$ npm install react-router-dom$ npm install lucide-react​*lucide-react는 React용 아이콘 라이브러리한마디로 설명하자면:"Lucide 아이콘을 React 컴포넌트로 사용할 수 있게 해주는 패키지"Lucide는 Feather Icons의 포크(fork)로, 오픈소스로 유지보수되고 있는 깔끔하고 일관된 스타일의 벡터 아이콘 모음!​*lucide-react 주요 특징React 컴포넌트 형태로 아이콘 사용SVG 기반..

MERN - 클라이언트/서버 프로젝트 메일 서비스 연동 설정 9 - vercel 배포 server, client​앞서 이전에 서버 배포를 위해 만들어 놓았던, vercel의 프로젝트!서버 소스코드는 레포지토리 업데이트를 통해 실시간 갱신 및 업데이트가 됩니다.하지만 개발용으로 현재 서버, 백엔드부분만 배포가 된 상태!​서버는 실제로 사용해도 되는 부분이지만,프론트엔드. 클라이언트 부분은 아직 배포가 되지 않은 상태이네요.​이번 글에는 연동된 클라이언트, 프론트엔드 부분 배포를 기록으로 남겨봅니다.​*서버측 재설정​기존 운영중인 백엔드 vercel의 프로젝트에 접근합니다.오른쪽 상단의 Setting 항목을 선택합니다. 이어서 좌측의 메뉴바를 확인하여 "Enviroment Vaiables" 환경변수 항목을..

MERN - 클라이언트/서버 프로젝트 메일 서비스 연동 설정 8 - nodemailer​클라이언트와 서버를 연동하면서, 웹서비스를 만들고 있습니다.서비스내 이메일 전송 기능을 넣어보려고하는데요.​node.js 기반의 오픈소스 패키지 "Nodemailer"를 이용해보고자 합니다.npm으로 쉽게 설치가 가능하며 자체적으로 이메일을 전송하는 서비스는 아니며, gmail, smtp,mailtrap, sendGrid같은 외부 이메일 전송 서비스와 연동하여 사용하는 패키지입니다.​즉, NodeMailer는 node.js에서 smtp 등을 통해 이메일을 쉽게 보낼 수 있도록 도와주는 패키지입니다.​한번 적용을 해볼까요?​---가장 먼저 Nodemailer, 노드메일러 공식홈페이지에 접속합니다.https://nodem..