Today I Learn

내가 원했던 것 select box로 나타냈던 날짜포맷에서 1월은 31일까지, 2월은 28일까지 등 해당 월에 맞는 일 수 를 나타내고 싶었다 날짜 가져오기 const [form, setForm] = useState({ year: nowYear, month: "01", day: "01", }); 날짜 계산하는 코드 const now = new Date(); let years = []; for (let y = now.getFullYear(); y >= 1930; y -= 1) { years.push(y); } let month = []; for (let m = 1; m ( {item} ))}

React Spinners 설치 $ npm install react-spinners --save Spinners 모양 고르기 React Spinners www.davidhu.io 위 사이트에 접속하여 원하는 모양의 스피너를 고른다. 나는 FadeLoader를 선택함 사용예시 - Loading.jsx import React from "react"; import FadeLoader from "react-spinners/FadeLoader"; function Loading() { return ( ); } export default Loading; - Result.jsx const Result = () => { const [loading, setLoading] = useState(null); useEffect(..

const openModal = () => { setModalOpen(true); document.body.style.overflow = "hidden"; }; const closeModal = () => { setModalOpen(false); document.body.style.overflow = "unset"; }; 모달창을 여는 이벤트에 hidden값 혹은 unset값 주기 모달 창 오픈할 때 hidden으로 스크롤 막아주고, 모달창을 닫은 후엔 unset을 준다

오랜만에 input을 다뤄봤는데 은근히 헷갈렸다 form({phone: e.target.value.replace(/[^0-9]/g, "")})} /> 1000 단위마다 콤마 찍기, 신용카드 넘버 포맷, 전화번호 하이픈 등 참고 [React.js] input box에 1000단위마다 자동으로 comma 넣기 react-number-format npm pakage를 이용하여 쉽게 구현할 수 있다. npm install react-number format 예제구현 - 1000 단위마다 콤마 찍기 import React from 'react'; import NumberFormat from 'react-number-.. wonblog.tistory.com

개인프로젝트로 유튜브 클론코딩을 하고있는데 만들고 배포를 했더니 이미지가 엑박이 뜨는 상황이 발생했다 어렴풋이 절대경로를 사용해야 하는데..~ 라는 걸 알고있었지만 제대로 알지 못해 발생한 일이기 때문에 이번 기회에 정리해보려고 한다. https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev 공식문서를 찾아봤는데 답이 바로있었다.. 멍충 다음과 같이 자바스크립트 내에서는 process.env.PUBLIC_URL 을 사용하면..

2021.09.07 - [Today I Learn/React] - [React.js] input box에 1000단위마다 자동으로 comma 넣기 [React.js] input box에 1000단위마다 자동으로 comma 넣기 react-number-format npm pakage를 이용하여 쉽게 구현할 수 있다. npm install react-number format 예제구현 - 1000 단위마다 콤마 찍기 import React from 'react'; import NumberFormat from 'react-number-.. wonblog.tistory.com Input으로 입력 받았던 것에 1000단위로 콤마를 찍기 위해 NumberFormat 라이브러리를 사용했다. comma는 제대로 나오지만..

useEffect useEffect는 기본적으로 몇 가지 조건에 의해 작동하게 된다. 1. 페이지가 처음 렌더링 되고 난 후 2. useEffect에 배열로 지정한 useState값이 변경될 때 즉 useEffect는 랜더링, 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트 해주는 함수이다. useEffect는 콜백함수를 부르게 되며, 랜더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러개의 함수를 동작시킬 수 있다. useEffect를 사용하는 방법 useEffect(() => {}); 가장 기본적인 형태이지만 잘 사용하지 않는 형태이다. Dependency가 없기 때문에 랜더링 할 때 한번, 그리고 어떤 작은 변화가 있을때마다 시시때때로 useEffect가 발생되므로 불필..

React에서 카카오 지도 api를 사용하려고 하는데 구글링을 해 보고 적용해봤지만 지도가 구현되지 않았다. 알고보니 React에서 네이버나 다음맵을 쓰려면 공식예제에 있는 방법을 사용하면 안되고 약간의 꼼수를 써야한다고 한다. 1. 네이버, 다음맵 스크립트 파일을 주입하기 위해 Script Load를 대신해주는 패키지를 설치한다 import Script from "react-load-script"; 2. Script Load 라이브러리로 스크립트가 로딩 시킴 3. 자바스크립트 파일 로딩이 완료되면 초기화 const container = document.getElementById("myMap"); const options = { center: new kakao.maps.LatLng(37.621975240..