Today I Learn

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) 사용자가 요청하기 전에 바로 네트워크가 실행..

리액트로 간단한 프로젝트를 만들며 공부하고 있는 요즘, create-react-app 으로 리액트를 실행할 때 매번 사용하지 않는 폴더들을 일일히 지워줘야하는 번거로움이 생겼다. 쓸데없는 리액트 로고, readme등을 삭제한 템플릿으로 만들어 쓰고싶어 찾아보니 역시 있었다. 똑똑한 사람들 지식베끼기~ 다음에 까먹지않게 기록해놔야지 $ cp -R [기존(복사할)폴더명] [새로만든 폴더명] 예를들어 로고 등을 삭제한 폴더를 템플릿으로 만들고자 할 때, 하나의 샘플을 만들어두고(template) 새로 폴더를 만들(test)어 복사하고자 할때 $ cp -R template test 라고 입력해주면 똑같이 만들어진 폴더가 복사된다!

리액트에서 반복문을 사용하려고 할 때 아래와 같이 return문 안에서 for 문은 사용할 수 없다 // for문 사용불가 function App() { const Month = ["1월", "2월", "3월", "4월", "5월", "6월"]; return ( { for ( let i = 0; i ( {month} ))} ); }

몽고DB를 연동하던 중 비밀번호가 담겨있는 키를 코드에 옮겨적어야 했다. 깃허브에 올려야하는데 내 비밀번호가 보이면 안되니깐! 2021.10.18 - [Today I Learn/Git] - [Git/GitHub] .gitignore 사용방법, 불필요한 파일 깃에 올리지 않는법 [Git/GitHub] .gitignore 사용방법, 불필요한 파일 깃에 올리지 않는법 gitignore? git 저장소에 파일을 올릴 때, 모든 파일을 올릴 수는 없다. 보안상 위험성이 있는 파일, 프로젝트와 관계 없는 파일, 용량이 너무 커서 제외해야하는 파일 등이 있기 때문에 git add 에서 wonblog.tistory.com 여기에 올리기도 했지만 조금 더 자세하게 써보려고 한다. 나중에 까먹을까봐 // index.js ..

gitignore? git 저장소에 파일을 올릴 때, 모든 파일을 올릴 수는 없다. 보안상 위험성이 있는 파일, 프로젝트와 관계 없는 파일, 용량이 너무 커서 제외해야하는 파일 등이 있기 때문에 git add 에서 제외시키고 싶은 경우가 있다. 이 때, .gitignore 디렉토리를 만들어 사용한다. 사용방법 특정파일이름 제외하기 Example.js 현재 경로에 있는 파일 제외하기(같은이름의 다른경로에 있는 파일은 제외하지 않음) /Example.js 특정 폴더안의 파일 전체 제거하기 node_modules 특정경로의 특정파일 제거하기 folder/Example.js 특정확장자 모두 제거하기 *.txt 제거에서 예외하기 !Example.js 결과 비교하기 .gitignore 폴더에 node_modules..