Today I Learn

게시글 작성 24시간마다 날짜 형식 다르게 주기 게시판을 만들던 중 작성일을 넣어주어야 하는데 오늘 올린 게시글은 HH:mm 형식으로, 하루가 지난 게시글은 YYYY-MM-DD 형식으로 만들어져야 했다. 그런데 받은 코드를 살펴보니 24시간 기준으로 하루가 지난 게시글로 판단되어 전날 17:34에 올린 게시글이 오늘 오전에 봤을 때, 오늘 올린 게시글처럼 보이는 현상이 있었다 수정 전 코드 get createdAtFmt() { const timeValue = new Date(this.createdTs); const betweenTime = Math.floor( (new Date().getTime() - timeValue.getTime()) / 1000 / 60 ); const betweenTimeHour..

git 에서 remote branch 삭제하는 방법 방법1 $ git push origin --delete 방법2 $ git branch -d $ git push origin

내가 원했던 것 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

리액트를 이용하여 모달컴포넌트를 개발하던 중 에러 발생 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 해석: 경고! 언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지 않지만 메모리 누수가 발생된다. 해결방법으로 useEffect의 cleanup function을 이용해라 에러코드 import { useEffec..

개인프로젝트로 유튜브 클론코딩을 하고있는데 만들고 배포를 했더니 이미지가 엑박이 뜨는 상황이 발생했다 어렴풋이 절대경로를 사용해야 하는데..~ 라는 걸 알고있었지만 제대로 알지 못해 발생한 일이기 때문에 이번 기회에 정리해보려고 한다. 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 을 사용하면..

콜백지옥의 문제점 가독성이 떨어짐, 비즈니스 로직을 이해하기 어려움 에러가 발생하거나 디버깅이 필요할 때, 유지보수하기 어려움 콜백지옥 예시 // Callback Hell example class UserStorage { loginUser(id, password, onSuccess, onError) { setTimeout(() => { if( (id === 'abc' && password === '12345') ) { onSuccess(id); } else { onError(new Error('정보를 찾을 수 없습니다')); } }, 2000); } getRoles(user, onSuccess, onError) { setTimeout(() => { if(user === 'abc') { onSuccess(..

promise '약속'이라는 단어로 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object 정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행된다면 처리된 결과값을 전달하고, 기능을 수행하다가 문제가 발생한다면 에러를 전달해 줌 1. State(상태) : 프로세스가 무거운 기능을 수행하고 있는 중인지, 기능 수행이 완료되어 성공했는지 실패했는지 상태에 대한 이해 pending -> fulfilled or rejected 2. Producer vs Consumer : 우리가 원하는 데이터를 제공하는 사항과 제공된 데이터를 사용하는 것의 차이 새로운 프로미스가 만들어 질 때 executor 라는 함수가 바로 실행이 됨!! ex) 사용자가 요청하기 전에 바로 네트워크가 실행..