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) 입니다.웹에서 글 작성시 사용하는 툴, 지금의 네이터에디터 같은 역할을 하지요.웹에서 글 작성시 볼드, 이텔릭, 링크, 이미지 삽입 같은 서식을 손쉽게 적용할 수 있습니다.​사용법이 간단하고,..

와이어프레이밍과 프로토타이핑 쉽게 이해하기 Wireframing and Prototyping​사용자 경험(UX) 설계는 디지털 제품을 더 편리하고 매력적으로 만드는 과정이에요. 여기서 중요한 개념들을 간단히 설명할게요.​와이어프레이밍과 프로토타이핑 쉽게 이해하기먼저, 사용자 경험 글쓰기는 앱이나 웹사이트에서 보이는 글을 만들어 사용자에게 더 나은 경험을 주는 일이에요. 사용자가 쉽게 이해하고 따라갈 수 있도록 도와줍니다.​정보 구조는 정보를 논리적으로 정리하고 이름을 붙여 사용자가 쉽게 찾을 수 있게 만드는 작업이에요. 이를 확인하기 위해 설계자는 카드 분류라는 방법을 써서 정보가 잘 정리되었는지 점검합니다.​사이트맵은 디지털 제품의 전체 구조를 그림으로 보여주는 도구예요. 마치 건물의 설계도라고 생각하..

Moment.js 설치와 간단 활용법 npm install moment 날짜와 시간 다루기​날짜와 시간을 다루는 npm 패키지입니다.자바스크립트(javascrpit) 기본 Date 객제로 표현이 가능하지만,포맷팅이나 계산 반복시 코드가 복잡해지는 경우가 많다.​이런 것을 쉽게 해결하고 날짜, 시간을 다루는데 유용한 패키지인 moment 패키지 정보를 간단하게 글로 남겨본다.​https://www.npmjs.com/package/moment 참 오래된 패키지이다. 깃헙 소스를 보니 최신 업데이트가... 2024년2월..실제 활용 소스 기준으론 2023년12월 이후 업데이트가 없다.​공식홈페이지 링크: https://momentjs.com/ Moment.js | HomeFormat Dates moment()..

vscode 줄바꿈(Word Wrap) 설정 방법 간단 안내 - 코드가 한줄로 길게 보일때 에디터 옵션, 편집, 단축키, 스크린샷 안내​vscode 또는 다양한 IDE를 사용하여 소스코드를 입력 하다보면,특히 여러창을 띄우고 작업하다보면, 작업중인 화면의 너비가 좁아서 긴 길이의 소스코드가 짤려서 보이지 않는다.36번 소스코드를 보면 실제 입력 된 길이는 더 길다. 뒤쪽의 내용이 가려져 보이지 않는다.이 경우, 소스가 누락 또는 보지 못하게 된다.​어떠한 화면 너비에서도 소스코드 라인/줄 전체를 볼수 있도록, 설정이 가능한데,내가 선호하는 설정 방법을 기록으로 남겨본다.word wrap 설정 변경 - 단계 순서대로 진행 설정, 옵션/편집 창을 확인한다. 또는 cmd + "," 단축키로 설정 옵션/편집 ..

자바스크립트 비동기 처리 쉽게 이해하기: 콜백 지옥 탈출, Promise와 async/await 정리​평상시 익숙하지만, 갑자기 헷갈리는 경우가 있는 동기/비동기 코딩..짧게 핵심있게, 요약 정리해보았다.동기 vs 비동기동기(Sync) : 한 작업이 끝나야 다름 작업 처리, 직렬 처리비동기(Async): 기다리지 않고 다음 작업 진행, 병렬 처리​비동기 처리 방식*콜백 callback초창기 비동기 방식function oldTask(cb) { setTimeout(() => cb("완료!"), 1000);}oldTask(result => console.log(result)); 단점, 콜백 중첩으로 콜백 지옥 발생​*프로미스 Promise비동기 결과를 다루는 객체const fetchData = () => n..

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)으로, 안정성과 확장성..