React 로 '오늘 하루 안보기' 팝업을 만들었다. 시간을 세션이나, 로컬스토로지에 저장할 수 있는데, 로컬스토로지에 저장하였다. 우선 localStorage.setItem("PopUpNotShow", 시간); 으로 시간을 저장 한다. 그 다음 사용자가 접속 하였을 때, localStorage 에 저장된 PopUpNotShow을 가져온다. localStorage.getItem("PopUpNotShow"); { const PopUpNotShow: string | null = localStorage.getItem("PopUpNotShow"); //localStorage에 PopUpNotShow 값을 가져온다. const currentTime = Math.floor(new Date().getTime()); ..

css 로 background 로 이미지를 보여주는데, 웹페이지에서는 정상적으로 보이고 페이지 가로를 줄여도 이미지 사이즈만 줄었을 뿐 제대로된 방향으로 나왔다. 웹을 배포 한 후 모바일(폰)으로 테스트했을 때 이미지방향이 변경되었다. 실제로 이미지를 열어보았을 때도 이미지 방향은 제대로 나왔다. 내 예상으로 EXIF 이미지 회전값의 문제인 것 같았다. 우선 이미지를 포토샵에서 확인해보니, 모바일에서 보였던 것과 같이 회전되어서 보여졌다. 모바일에서 보인 이미지가 진짜 회전값이었다. 포토샵으로 방향을 변경한 후 저장하고 다시 배포하여 모바일로 테스트하니 이미지가 제대로된 방향으로 나왔다. 이미지가 웹, pc 와 모바일에서 다른방향으로 보일 경우 exif 값을 확인해보거나, 포토샵으로 이미지를 열어보면 확..

상위 컴포넌트에서 useState 함수를 넘길 때 아래 처럼 기존에 해왔던 것처럼 void로 넘겼는데, react 에서 더 적절한 타입을 제공하고 있었다 interface ITestProps{ setTest: () => void } SetStateAction 과 Dispatch 이다. import React, { SetStateAction, Dispatch } from 'react' interface Props { setTest: Dispatch } 위에 코드처럼 타입을 작성하게 되면 어떤 타입의 값을 넣어야하는지 훨씬 쉽게 알 수 있다. https://newbedev.com/passing-usestate-as-props-in-typescript Passing useState as props in typ..

redux-thunk 대신 redux-saga 를 사용하는 이유 thunk 는 dispatch 를 여러번 불러오는 기능만 가지고 있다. npm i redux-saga npm i next-redux-saga redux-saga 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용합니다. 여기서 특정 작업이란, 특장 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 디스패치 하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있습니다. redux-saga는 redux-thunk로 못하는 다양한 작업들을 처리 할 수 있습니다. 예를 들자면.. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있습니다. 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게..

getElementById let element = document.getElementById(id); // id passwd 인 element 를 가지고 올 때 let passwd = document.getElementById("passwd"); querySelecter let element = document.querySelecter(selectors); // id passwd 인 element 를 가지고 올 때 let passwd = document.querySelecter("#passwd");

Global Object ex) innerWidth ← Window 안의 innerWidth 를 가져온다. DOM - Document Object Model BOM - Browsers Object Model JavaScript Window Size window.screen 모니터 사이즈 - 브라우저 사이즈가 변경되어도 사이즈를 유지한다. window.outer 브라우저에 있는 url 상단,탭까지의 사이즈 window.inner 웹페이지(스크롤바 포함) documentElement.clientWidth 웹페이지(스크롤바 제외) page x,y (문서의 시작점) client x,y (브라우저 시작점) Window Coordinates scroll_to.addEventListener('click', event..

find() 함수가 특정 조건에 부합하는 배열의 첫번째 값만을 리턴한다고 한다면, filter() 함수는 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴합니다. find() const arr = [ {name: 'apple', price : 1000}, {name: 'banana', price : 2000}, {name: 'apple', price: 3000} ]; arr.find((item)=>item.name === 'apple'); // {name: "apple", price: 3000} filter() const arr = [ {name: 'apple', price : 1000}, {name: 'banana', price : 2000}, {name: 'apple', price: 3000}..

ubuntu linux 에 파일을 올리고 npm install 을 실행 하였으나 network timeout error 가 발생하였습니다. `network timeout at : [https://registery](https://registery).npmjs.org/semver/-/semver-6.3.0.tgz` npm 이 잘못 설치된 것 같아서 node -v //노드 버전 확인 노드 버전을 확인해보니 v10.19.0 으로 굉장히 낮았습니다. 그래서 삭제 후 노드 버전을 최신버전으로 설치 하였으나 계속해서 v10.19.0 으로만 설치가 되었습니다. 원하는 버전을 설치하기위해 curl 을 우선 설치하였습니다. apt-get install curl - curl 설치 $ curl -sL []() | sudo ..