Dev study and Repost

Node.js 서버 프로젝트 설정 가이드 (Express + MongoDB + JWT + Multer) 완전 기초! ​​client 프로젝트에 연동할 server 프로젝트​​해당 server 프로젝트 폴더에 server.js 파일 생성​server 폴더 터미널에서아래 명령어 실행$ npm init -y​각종 패키지 설치$ npm i express mongoose cors dotenv jsonwebtoken multer​express - Node.js 웹 서버 프레임워크 (라우팅/미들웨어 쉽게 관리).mongoose - MongoDB ODM (JS 객체처럼 DB 다루기).cors - 다른 도메인에서 오는 요청 허용 설정.dotenv - .env 파일에서 환경 변수 관리.jsonwebtoken - JWT 토..

Quill 에디터 쉽게 적용하기 - react vite 프로젝트 웹서비스, 웹개발, 자바스크립트, 리치 텍스트 편집기​웹서비스 개발중 텍스트 편집기가 필요한 경우가 있습니다.이를 빠르게 구현 할수 있는 npm 패키지인 quill 리치 텍스트 편집기 적용, 사용법을 간단히 블로그 글로 남겨봅니다. https://www.npmjs.com/package/quillhttps://www.npmjs.com/package/quillQuill 간단 설명 Quill 은 오픈 소스 리치 텍스트 에디터(rich text editㅐr) 입니다.웹에서 글 작성시 사용하는 툴, 지금의 네이터에디터 같은 역할을 하지요.웹에서 글 작성시 볼드, 이텔릭, 링크, 이미지 삽입 같은 서식을 손쉽게 적용할 수 있습니다.​사용법이 간단하고,..

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