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시간을 빼서..

* 리액트에서 서버요청할때 베이스 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 ()..

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

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

function 으로 생성한 함수에는 항상 this 와 prototype 속성이 존재한다. const Shadow = function(){ console.log(this) } console.log(Shadow()) this 는 윈도우 객체이다. console.log(new Shadow()) this 는 생성자함수이다. var Human = function(type){ this.type = type || 'human' } Human.isHuman = function(human){ return human instanceof Human } Human.prototype.breathe = function(){ alert('h-a-a-a-m') } 자바스크립트에서는 객체 복사로 상속한다. 복사하는 원본객체를 프로토..