Dev study and Repost

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

MERN - 클라이언트/서버 프로젝트 클라이언트와 서버 연동 설정 7 - 프론트엔드와 백엔드 연결B​로컬환경에서 클라이언드와 서버를 테스트 구동하고있다.즉 프론트엔드와 백엔드 둘다 로컬에서 테스트용으로 구동을 하고 있다.​갑자기 서버 구동시 오류를 발견하였다.[nodemon] 3.1.10[nodemon] to restart at any time, enter `rs`[nodemon] watching path(s): *.*[nodemon] watching extensions: js,mjs,cjs,json[nodemon] starting `node server.js`✅ Cloudinary configuration completed(node:17887) [DEP0040] DeprecationWarning: Th..

MERN - 클라이언트/서버 프로젝트 클라이언트와 서버 연동 설정 6 - 프론트엔드와 백엔드 연결​클라이언트와 서버 연동이 필요합니다.즉 프론트엔드와 백엔드 연동, 연결이지요.​가장먼저 클라이언트의 환경설정 파일내 키값 추가가 필요합니다.​위 스크린샷에 키를 생성하고 넣어줍니다.이어서 서버/클라이언트 폴더 내 터미널에 필요한 패키지를 설치합니다.$ npm install axios react-hot-toast​axiosHTTP 클라이언트 라이브러리로 브라우저나 node.js 환경에서 API요청을 쉽게 보낼 수 있도록 도와줍니다.​react-hot-toastReact용 알림 Toast 라이브러리 입니다.사용자에게 성공/요류/정도 메시지를 작고 깔끔하고 예쁜 알림 형태로 빠르게 보여줍니다.​이어서 프론트엔드,..

MERN - 클라이언트/서버 프로젝트 cloudinary 설정 5​--cloudinary.com 은 이미지와 동영상 관리를 위한 클라우드 기반 서비스입니다.주요 서비스는 아래와 같습니다.​이미지, 동영상 업로드, 저장, 관리자동 최적화 및 변환(크기 조절, 포맷 변경, 자르기, 필터 적용 등콘텐츠 전송 네트워크(CDN)를 통한 빠른 전송이미지 및 동영상 분석 및 태깅 (얼굴인식, 객체인식)API와 SDK 지원미디어 자동 최적화로 페이지 로딩 속도향상 및 사용자 경험 개선​이 서비스를 이용할수 있습니다https://cloudinary.com/ Image and Video Upload, Storage, Optimization and CDNStreamline media management and improve..

MERN - 클라이언트/서버 프로젝트- vercel 설정 4​이전에 몽고디비와 clerk 연동을 끝냈다.이어서 클라이언트와 서버의 기동 확인도 완료.실제 배포를 위해, 임시 배포 및 테스트를 진행해보려한다.평상시 깃헙페이지나 파이어베이스를 통해 배포를 헀는데 이번에 vercel 배포를 처음 해본다.​vercel 배포를 기록으로 남겨본다.---​VERCEL 은 프론트엔드 및 서버리스 웹사이트와 애플리케이션을 빠르고 쉽게 배포할 수 있는 클라우드 플랫폼으로,평상시 내가 포트폴리오로 만드는 웹, html, 자바스크립트, 리액트프로젝트를 파이어베이스 호스팅을 이용하여 웹호스팅을 하는 것과 비슷한 서비스이다.https://vercel.com/ Vercel: Build and deploy the best web e..