aeiou Repository

critical dependency the request of a dependency is an expression 에러 처음 하고자 했던건 json에 img path를 저장해두고 화면에서 바로바로 import해서 사용하고 싶었다. 그냥 이렇게 사용하니 에러는 안나지만 이미지를 불러오지 못했고ㅠ (webpack img설정은 모두 해줬고 dataset을 tsx로 바꿔 import를 미리 해주고 불러오는 것까지는 가능!) 다음으로 Project.tex 내에서 forEach로 import해주려고하니 이때부터 ritical dependency the request of a dependency is an expression 에러 발생 ㅠㅠ 여기서 부터 검색어를 잘못잡았던것같다. 해당에러를 해결하려고 하니 gith..

create-react-app 으로 프로젝트 생성 // create-react-app & cra-template-typescript 설치 npx install -g create-react-app cra-template-typescript // 프로젝트 생성 npx create-react-app "프로젝트명" --template typescript create-react-app 에서 --template 옵션만 typescript로 설정해도 기본적인 라이브러리가 모두 포함된 프로젝트가 생성됩니다. src 내의 파일을 보면 tsx로 생성되어있습니다. ESLint 설정 ESLint 란? ESLint는 자바스크립트를 ES 표준 규격에 맞는지 자동으로 분석해주는 도구입니다. 문법상 오류만 표시되도록 지정할 수도 있..

[넘블] 다른 색깔 찾기 게임 제작 챌린지 결과물 http://numble-color-game.kangjiin.com/ GitHub https://github.com/kang-jiin/numble-color-game 주요코드 타이머 useEffect(() => { if (time { if (time > 0) { setTime(time - 1); } }, 1000); return () => clearTimeout(timer); }, [time]); 정답과 오답 색 차이 const randomColors = useCallback(() => { let baseR = Math.floor(Math.random() * 256); let baseG = Math.floor(Math.random() * 256); let..

create-react-app 으로 만든 typescript 프로젝트에 webpack 적용하기 필요한 패키지 설치 npm i -D file-loader ts-loader npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react npm i -D typescript @babel/preset-typescript ts-loader fork-ts-checker-webpack-plugin npm i -D rimraf webpack 관련 패키지 webpack: Webpack(웹팩) 라이브러리 webpack-cli: Webpac..

넘블 React 상태관리 라이브러리를 사용하지 않고 다른 색깔 게임 제작 리액트 개발 챌린지가 광고에 뜨길래 한번 들어가봤다. 넘블에서 진행하는 챌린지로 10일동안 작은 프로그램 하나를 개발한다. 예시 사이트 : https://numble-react.vercel.app/ 기간 : 2월 4일 ~ 13일 참가비 : 만원(결과물 제출 시 환불) 10일이라는 짧은 기간이길래 가볍게 하기 좋을 것같아 신청했다. 단순해보이긴 하는데 일하면서 다 할 수 있을지 좀 걱정은 된다.. 일단 해보고 후기까지 작성해봐야지! 참여 링크: https://www.numble.it/45cee9d3-49ad-4f67-9d2a-14607c2eeba7 [React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 시간은 금..

React에서 환경변수를 이용해 배포환경과 개발환경을 간단하게 분리하는 방법을 알아보겠습니다. NODE_ENV 환경변수 일반적으로 Node.js에서는 NODE_ENV를 production(배포) / development(개발) 로 구분하여 사용합니다. create-react-app은 실행 명령어에 따라 자동으로 NODE_ENV값이 정해집니다. 실행 명령어 NODE_ENV npm start development npm run build prodection npm test test 때문에 개발자가 따로 설정하더라도 무시되며, 기존에 정해진 값이 들어갑니다. REACT_APP_OOO 환경변수 REACT_APP_ 으로 시작하는 새로운 환경변수를 설정할 수 있습니다. NODE_ENV와 REACT_APP_으로 시작..

React TypeError react-scripts의 버전이 맞지 않아 발생하는 문제 "react-scripts": "^3.3.1" ("^3.x.x") 를 "react-scripts": "^3.4.0" 로 변경 1. package.json 파일에서 "react-scripts": "^3.4.0" 로 버전 변경 2. cmd에서 npm update 3. cmd에서 npm start 정상 동작! 참고 https://stackoverflow.com/questions/60234640/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re/60242323#60242323 TypeError [ERR_INVALID_ARG_TYPE]: The..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.