https://stackoverflow.com/questions/3514784/how-to-detect-a-mobile-device-using-jquery How to detect a mobile device using jQueryIs there a way to detect whether or not a user is using a mobile device in jQuery? Something similar to the CSS @media attribute? I would like to run a different script if the browser is on a handh...stackoverflow.com var isMobile = false; //initiate as false// device ..

import React, { useRef, useState, forwardRef } from 'react'import './App.css'const Modal = forwardRef(({ open, setOpen, handleDown, handleMove, handleUp, left, top }, ref) => { return 모달 setOpen(false)}>x })function App(){ const [open, setOpen] = useState(false) const [clicked, setClicked] = useState(false) const [posX, setPosX] = useState(0) const [left, setLeft] =..

* 프론트엔드에서 시간을 저장할때 주의할점* 서버에서는 로컬시간으로 변경해도 적용이 안되고, UTC시간으로만 저장된다.* 프론트엔드에서는 서버의 코드를 브라우저에 가져와서 실행하기 때문에, 프론트엔드에서 브라우저가 로컬 PC의 로컬시간을 조회해서 변경할 수 있다. * moment(date 문자열).format() 을 하면 로컬시간으로 변경할 수 있고, 이를 서버로 전송하면 몽고 DB 에는 UTC 시간으로 저장된다. 왜냐하면 DATE 객체이기 때문에 몽고 DB는 date 객체를 UTC로 저장한다. * 그냥 date 문자열은 17:00 이지만, format()을 사용하면 17:00+09:00 과 같이 로컬시간을 인식할 수 있는 힌트가 붙는다. 이를 서버로 전송하면 DB에 저장할때 17:00에서 9시간을 빼서..

import React from 'react'import './App.css'import logo from './logo.svg'import logo2 from './logo-2.png'import { REACT_APP_BASE_URL } from 'env'import * as AppStyle from './App.module.css'import Button from './Button'const App = () => { console.log(REACT_APP_BASE_URL) console.log(AppStyle) return ( Hello, react & esbuild ! ..

* 리액트에서 서버요청할때 베이스 URL 생략하는 방법1) package.json 에서 "proxy" 설정에 서버주소 등록하는 방법2) axios.create 을 사용하여 아래와 같이 서버주소 등록하는 방법 const instance = axios.create({ baseURL: url, // other options you want});

https://velog.io/@xmun74/React%EC%97%90%EC%84%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8%ED%95%98%EA%B8%B0 React에서 테스트하기리액트에서는 Testing Library, Jest를 통해 테스트 가능두 개의 역할이 각각 다르므로 함께 사용해야 함Vue, Svelte에서도 사용 가능create-react-app으로 설치하면 자동으로 해당 라이브러리가 같이 설치된velog.iohttps://velog.io/@weesemoa/React-App-Test2 React App Test(2) : 코드 작성과 실행두근두근.. 첫 번째 테스트를 실행해보자React App 작업이 완료되었다면, create-react-app으로 프로젝트 생성시 함께 만들어진 ..

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