wazac

특정강의를 그냥 따라하게되면 mongooseerror: model.findone() no longer accepts a callback 이런 에러를 마주할때가 있다. 찾아보니 mongoose findOne 함수에서 더이상 콜백함수 방식을 지원하지 않는다는 메세지가 나온다. 이를 async/await 으로 꺼내주기만 하면 된다.  // 기존 에러가 나던 방식User.findOne({ userId: userId.toLocaleLowerCase(), }, (err, user) => { if(err) return done(err); if(!user) { return done(null, false, {message:..

링크공유와 같은 기능을 구현하기 위해 버튼 클릭시 링크를 복사하는 기능을 은근히 많이 사용하게 되는데요. 이를 구현할때 예전에는 execCommand 함수를 많이 쓰다가 deprecated 되고나서 (리액트 환경) navigator.clipboard.writeText 함수를 많이 쓰게됩니다.  그런데 분명 local 에서 잘 동작되다가 개발 서버에 배포만 하면 복사가 되지 않습니다.  보통 개발서버는 https 가 아닌 http로 동작하기 때문에, 보안 정책에 걸리기 때문인 것 같더라구요.  참조: https://stackoverflow.com/questions/51805395/navigator-clipboard-is-undefined그래서 이를 해결하기 위해 https 환경일때만 안정적인 navigat..

참고: https://dev.to/jahid6597/why-useeffect-is-running-twice-in-react-18c6 React18 버전이후 StrictMode일때 useEffect 가 두번씩 호출된다고 한다. 한 번만 호출하고 싶다면, next.config.js 에서 strictMode를 끌 수 있다.  // next.config.jsconst nextConfig = { reactStrictMode: false,}

웹 개발자로써 회사에서 일하는 것도 즐겁지만(정말?!) 개인적으로 돈, 스펙, 서비스를 하나도 생각하지 않고 오로지 내가 만들고 싶은 것들을 재미로 만들고 싶은 욕심이 있었습니다. 그래서 시작한 "조토끼아케이드 프로젝트". 🐰 제목처럼 재미와 즐거움만 존재하는 아케이드 컨셉입니다. 우선 1차로 만든 서비스는 게임2개와 랜덤을 소재로한 서비스 1개 입니다. React로 개발을 할지, 그냥 javascript로 할지 고민이 많았는데, 아무리 생각해도 내가 생각하는 서비스들은 너무 단순한 것들이여서 react는 오버스펙이라는 결론을 내렸습니다. 혹여라도 추후 서비스가 커진다면, 리액트로 변경하면 되니깐요. 인단, 가볍게 시작해 보는걸로 했습니다. 1. 강건너기 게임 어렸을적 풀어봤을 그 유명한 강건너기 게임입..

웹사이트나 애플리케이션의 스크롤바는 중요한 사용자 인터페이스(UI) 요소 중 하나입니다. 대부분의 기본 스크롤은 많이 사용하지만, 요즘은 스크롤의 디자인도 많이 고려되서 나오고 있습니다. 브라우저에서 기본으로 제공되는 스크롤은 어떻게 커스터마이징하면될까요~? ::scroll 이라는 선택자를 사용하면됩니다. 의외로 간단 하답니다. .scroll { &::-webkit-scrollbar { width: 7px; height: 7px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: #3c3c3c; border-radius: 45px; } &::-webkit-scrollbar-thu..

0.69 버전 이후로 생기는 에러라고 하는데, 0.68.2 로 설치해주니 해당 에러는 없어졌다. npx react-native@0.68.2 init LottoApp --version 0.68.2

mac 에서 react-native 환경 세팅 과정에서 rbenv 를 설치해야하는데, rbenv 까지 설치 이후 bundler를 설치하는 과정에서 다음과 같은 에러를 만났다. ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory. 검색 끝에 찾은 방법은 설치이후 .zshrc 에 환경변수를 추가해줘야 한다는 걸 깨달았다. ㅎ vim ~/.zshrc // .zshrc 파일 열기 // 해당 파일에서 아래 코드 추가 (추가: i, 저장+닫기는 : wq) [[ -d ~/.rbenv ]] && \ export PATH=${HOME}..

보통 파일 업로드를 구현할때 Event 로 파일을 받은 후 formData에 담아서 multipart 로 보낸다. const files = e.target.files; const formData = new FormData(); for (let file of files) formData.append('file', file); // 혹은 formData.append('file', file[0]); 간혹 파일 이외에 추가 정보를 보낼때가 있는데, 그때에도 formData를 담아서 보내면 된다. ... const fileInfo = "user_type"; formData.append('type', fileInfo); 그런데 만약 Object 타입을 보내야할 때는 어떨까? 기나긴 삽질+도움 끝에 찾은 방법은 다음..

Node.js는 다들 알다시파 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있는 JavaScript 런타임 환경이죠? 대부분의 프론트엔드 개발자들은 NPM을 설치하여 node의 명령어를 사용합니다. 그렇다면 NVM은 무엇일까요? NVM은 Node Version Manager의 약자로, 컴퓨터에서 여러 버전의 Node.js를 관리할 수 있는 도구입니다. NVM을 사용하면 컴퓨터의 다른 Node.js 버전 간에 쉽게 전환하고, 특정 버전을 설치 및 제거하며, 글로벌 및 프로젝트별 Node.js 버전을 관리할 수 있습니다. 서로 다른 버전의 Node.js를 서로 다른 디렉토리에 설치하고, 시스템의 PATH 환경 변수를 수정하여 서로 전환할 수 있도록 하는 방식으로 작동합니다. 이 기능은 다른 버..

1. 문제 발생 yarn 으로 스크립트를 실행 하려고 하는데 다음과 같은 에러가 나타났다. Window 내에서 정책 설정이 제한되어있다면, yarn같은 외부 스크립트가 믿을 만한 스크립트인지 알 수 없기 때문에 실행을 안하는 것이다. 특히, .ps1xml, .psm1을 비롯한 스크립트 파일의 실행을 제한한다. 일반적으로 기본값이 클라이언트용은 Restricted, 서버용은 RemoteSigned로 되어있다고 한다. 2. 해결 방안 windows 에서 스크립트 실행 정책을 변경해준다. 만약 현재 상태가 Restricted로 제한이 되어있다면, yarn 에서 제공 되는 일부 스크립트가 실행이 안되는 듯 하다. 즉, Restricted 를 RemotedSigned 로 변경 해준다면 yarn 도 실행할 수 있다..