웹 호스팅하기 (4) - vercel + react + esbuild 배포하기 (2) https://stackoverflow.com/questions/77413274/esbuild-bundle-html-css-js-into-a-single-file `, } ] }) ] }) .then(() => console.log('⚡Bundle build complete ⚡')) .catch(e => { console.log('❌Failed to bundle ❌') console.log(e) process.exit(1.. 서비스 배포 2024.05.28
웹호스팅하기 (3) - vercel + react + esbuild 배포하기 https://esbuild.github.io/getting-started/#install-esbuild esbuild - Getting Startednpm/pnpm: If you are installing with npm or pnpm, you can try not copying the node_modules directory when you copy the files over, and running npm ci or npm install on the destination platform after the copy. Or you could consider using Yarn instead whichesbuild.github.io * esbuild 란?CRA(create-react-app) 이라는 명령어.. 서비스 배포 2024.05.24
웹호스팅하기 (2) - vercel + react 배포하기 https://vercel.com/guides/deploying-react-with-vercel How to Create & Deploy a React App to VercelLearn how to create a React app and deploy it live with Vercel in only a few steps.vercel.comhttps://velog.io/@codns1223/Etc-Vercel%EB%A1%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 [Etc] Vercel로 React 프로젝트 배포하기Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 자동화할 수 있게 빌드,배포.. 서비스 배포 2024.05.23
웹호스팅하기 (1) - vercel + express.js + mongodb 배포하기 https://vercel.com/guides/using-express-with-vercel How to Deploy an Express.js Application to VercelLearn how to deploy an Express.js application to Vercel using Serverless Functions.vercel.com * 프로젝트 초기설정하기 const express = require("express");const app = express();app.get("/", (req, res) => res.send("Express on Vercel"));app.listen(3000, () => console.log("Server ready on port 3000."));module... 서비스 배포 2024.05.22
조건쿼리 (conditional query) https://mongoosejs.com/docs/tutorials/query_casting.html Mongoose v8.4.0: Mongoose Tutorials: Query CastingQuery Casting The first parameter to Model.find(), Query#find(), Model.findOne(), etc. is called filter. In older content this parameter is sometimes called query or conditions. For example: const query = Character.find({ name: 'Jean-Luc Picard' }); query.mongoosejs.com * 프론트엔드 조건쿼리 con.. 백엔드/express.js 2024.05.20
API 요청 함수 async function connectData(url, method, data = null, token = null){ const dataJson = await fetch(url,{ headers:{ 'Content-Type':'application/json', 'Authorization': `${token? 'Bearer' + token : ''}`, }, method: method, body: data? data : null }) const result = await dataJson.json() return result }API 데이터 요청하는 유틸리티 함수입니다. utils 폴더 생성하고, api.js 파일에 작성.. 프론트엔드/프론트엔드 이슈 2024.05.20
ESModule 로 express 작성하기 { "name": "webrtc", "version": "1.0.0", "description": "", "main": "server.mjs", // 확장자 변경 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "nodemon ./src/server.mjs" // 명령어 작성 }, "author": "", "license": "ISC", "dependencies": { "express.js": "^1.0.0", "pug": "^3.0.2" }, "type": "module" // 추가}ESModule 을 사용하기 위해서는 "type": "module" 을 설정해야 한다. 또한, .. 백엔드/express.js 2024.05.17
비주얼 스튜디오 코드 (vsc)에서 리액트 사용시 Emmet 적용하기 File -> Preferences -> Settings 로 이동한다.Workspace 탭에서 Extensions 메뉴를 열고, Emmet 을 선택한다.Preferences 에서 Edit in settings.json 링크를 클릭한다.{ "emmet.preferences": { }, "emmet.includeLanguages": { "javascript": "javascriptreact" }}settings.json 파일에 위와 같이 작성하고, 비주얼 스튜디오 편집기를 끄고 재시작한다. 프론트엔드/React 2024.05.17
이미지 업로드 - multer https://medium.com/@hassaanistic/image-handeling-using-multer-in-react-d7fea28e8dc6 multer 를 이용하여 이미지를 업로드하는 방법은 두가지가 있다. 첫번째는 이미지를 서버로 전송하면 특정폴더에 저장하고, 폴더에 저장된 이미지 데이터를 DB에 저장하고, 브라우저로 이미지 데이터를 보낸다. 두번째는 이미지를 서버로 전송하면 특정폴더에 저장하고, 폴더에 저장된 이미지 경로를 브라우저로 전송하고, 브라우저에서 해당경로의 파일 데이터를 읽는 방식이다. 즉, 브라우저로 이미지 데이터를 보내느냐, 이미지 경로를 보내느냐의 차이다. 또는 서버쪽에서 이미지 데이터를 조회하느냐 프론트쪽에서 이미지 데이터를 조회하느냐의 차이다. 아래 코드는 두번째 방법.. 백엔드/express.js 2024.05.16
여러 뎁스의 reference 에 대하여 populate 하기 https://mongoosejs.com/docs/populate.html= 3.2. Mongoose has a more powerful alternative called populate(), which lets you reference documents in other collections. Population is the process of automatically replacing th" data-og-host="mongoosejs.com" data-og-source-url="https://mongoosejs.com/docs/populate.html" data-og-url="https://mongoosejs.com/docs/populate.html" data-og-image="https://scra.. 데이터베이스 2024.05.16