Today I Learn

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

리액트에서 반복문을 사용하려고 할 때 아래와 같이 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..

Schema? mongoDB는 테이블이 없기 때문에 실수로 오타를 내거나 데이터타입을 잘 못 입력해도 에러를 발생시키지 않는다. 이러한 문제를 막기 위해 몽구스는 스키마를 도입했다. 몽구스는 사용자가 작성한 스키마를 기준으로 데이터를 DB에 넣기 전에 먼저 검사하여 하나하나 지정해준다. 스키마에 어긋나는 데이터가 있으면 에러를 발생시킨다. 즉 테이블과 어느 정도 비슷한 역할을 한다 예제) const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ name: { type: String, maxlength: 50 }, email: { type: String, trim: true, unique: 1 }, password: { type:..

https://cloud.mongodb.com/ MongoDB Cloud MongoDB Cloud는 최신 애플리케이션을 위한 통합 데이터 플랫폼으로, 글로벌 클라우드 데이터베이스, 검색, 데이터레이크, 모바일 및 애플리케이션 서비스를 포함하고 있습니다. www.mongodb.com 몽고디비 접속! 싱가폴로 설정해주고 Cluster Name 맘대로 바꿔주고 Create Cluster 고고 3분정도 기다리면 클러스터가 만들어진다. Choose aconnection method 클릭 후 Connect your application 클릭해서 넘어가기 가린부분 복사하기! vscode로 돌아가 mongoose 설치해준다 $ npm install mongoose --save // index.js const expre..