wazac

참고: https://dev.to/jahid6597/why-useeffect-is-running-twice-in-react-18c6 React18 버전이후 StrictMode일때 useEffect 가 두번씩 호출된다고 한다. 한 번만 호출하고 싶다면, next.config.js 에서 strictMode를 끌 수 있다. // next.config.js const 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 도 실행할 수 있다..

기본 사용법 router에서 navigate로 이동시 state에 객체 형태로 값을 넘겨서 주고 받을 수 있다. 또한 parameter 방식과는 달리 따로 router url 뒤에 값을 설정해주지 않아도 되고, url에 넘기는 값이 노출 되지 않아서 좋았다. // 보낼때 navigate(URL, {state: {id: "user1"}}) // 받을때 import {useLocation} from "react-router"; const location = useLocation(); const id = location.state ? location.state.id : null; //

버전은 amchart5 로 진행 했다. 많이 쓰는 라이브러리인 만큼 미리 정리를 해두어서 추후에는 같은걸 검색하면서 시간낭비를 하지 않도록 하나씩 나올때마다 정리를 해두어야 겠다. 1. axis의 x, y 컬럼사이즈 조정 데이터는 4개인데, 화면사이즈가 작다보니 amchart에서 자동으로 2개만 label 을 표시하는 현상이 있었다. 그래서 x의 사이즈를 줄이거나 해주는 옵션이 있을꺼 같아서 열심히 width나 min, max 를 열심히 찾아보았는데, 정답은 render를 할때 최소 grid distance 값을 조정해주면 되었다~ 😥 x뿐만아니라 y의 값을 조정하고 싶으면 마찬가지로 y의 데이터를 만들때 같은 옵션값을 넣어주면 된다~ let xAxis = chart.xAxes.push( am5xy.Ca..