import React, { useState, useEffect, useRef } from 'react'import './App.css'import Dropdown from './Dropdown'const dropdownMenu = { 'Home': ['home-1', 'home-2'], 'About': ['about-1', 'about-2', 'about-3'], 'Contact': ['contact-1']}function App(){ const [page, setPage] = useState('') // 현재 선택한 메뉴 저장 const [layout, setLayout] = useState({}) // 현재 드롭다운 위치 저장 const [target, setTarg..

컴포넌트가 리렌더링된다고 해서 state 값이 초기화되는 것이 아니다. 아래와 같은 상황을 생각해보자!import React, { useState, useEffect } from 'react'import './App.css'function App(){ const [weather, setWeather] = useState(null) const [reset, setReset] = useState(true) const handleClick = () => setReset(false) useEffect(() => { console.log("날씨") if(reset){ setWeather("맑음") } // return ()..

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

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) 이라는 명령어..

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 개발 팀에서 만든 프론트엔드 배포 자동화할 수 있게 빌드,배포..

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

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

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 파일에 작성..

{ "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" 을 설정해야 한다. 또한, ..

File -> Preferences -> Settings 로 이동한다.Workspace 탭에서 Extensions 메뉴를 열고, Emmet 을 선택한다.Preferences 에서 Edit in settings.json 링크를 클릭한다.{ "emmet.preferences": { }, "emmet.includeLanguages": { "javascript": "javascriptreact" }}settings.json 파일에 위와 같이 작성하고, 비주얼 스튜디오 편집기를 끄고 재시작한다.