https://stackoverflow.com/questions/9506041/events-mouseup-not-firing-after-mousemove Events-- 'mouseup' not firing after mousemoveI am trying to drag an image with Javascript (no libraries). I am able to listen to mousedown and mousemove events. For some reason, I am not able to capture the mouseup event after mousemove. (I canstackoverflow.com Found the issue, if it is going to be of help to a..

데스크탑의 개발자 도구에서 가상 모바일 기기로 테스트하면 레이아웃이 깨지지 않는데, 실제 모바일에서 테스트하면 잘되지 않는 경우가 있다. 이러한 이유는 크롬 브라우저 기준으로 상단바(주소창)이 스크롤하면서 자꾸 움직이기 때문이다. 상단바가 움직이면 레이아웃이 맞다가도 틀어지는 경우가 있다. *{ margin: 0; padding: 0; box-sizing: border-box;}html, body{ scroll-behavior: smooth; width: 100%; height: 100%; position: fixed; /* for mobile to fix screen and prevent address bar moving */ inset: 0; overf..

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