웹개발 블로그

에러 메시지Module not found: Error: Can't resolve 'web-vitals' in 'D:\경로'원인경로의 해당 모듈을 찾을 수 없다는 오류였다.해결책npm i web-vitals --save-devhttps://stackoverflow.com/questions/65396568/react-js-npm-start-shows-failed-to-compile-web-vitals React JS npm start shows failed to compile web-vitalsI'm getting the error: failed to compile -/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals'. Since new..

#함수 - 함수를 호출하면서 전달하는 값 : 인수 - 매개체 역할을 하는 변수 : 매개변수 ㄴ '함수의 매개변수'라고 부른다. 함수 안에서 return을 사용하게되면 ㄴ '반환값' 이라 부른다. ㄴ 함수의 return문 아래에는 작성해도 작동하지 않는다. 함수안에 내부함수를 작성할 수 있다. ㄴ '중첩함수'라 부른다. function a(){ function aa(){} //중첩함수 aa();//호출}선언이 이루어진 함수를 호출하면 오류를 내지만  ⭐자바스크립트의 특징 중 호이스팅(끌어올리다) 특징 때문에 오류를 내지 않는다. ㄴ함수를 호출 문 보다 아래 두어도 문제가 일어나지 않는다. ㄴㄴ 프로그램에 유연성을 준다는 특징이 있다 자바스크립트에서는 함수도 문자열이나 숫자 같은 값으로 취급된다. ㄴ..

JSX( JAVASCRIPT EXTENSIONS )- 확장된 자바스크립트의 문법을 말한다. 자바스크립트와 html을 혼용해서 사용가능 하다.function AComponent() { //여기는 자바스크립트 const apple = "사과"; //여기는 자바스크립트 return( //여기부터 안녕 아침에는 {apple}가 최고야 //자바스크립트 변수 사용 {변수} //여기까지 HTML );} 1. 중괄호를 사용한다고 다 표시는것은 아니다.{숫자}{문자}{배열}은 가능하나💥true, undefined, null은 중괄호로 감싸도 화면에 표시되지 않는다. 추가로💥 객체 자체를 렌더링 시키면 오류가 난다.const obj = {a : 1};{obj}  그렇다면?..

1.vscode 에디터 실행터미널 실행 2. 원하는 위치로 이동명령어 : cd 경로 3.명령어 : npm create vite@latest(왠만하면 enter이고 Project name(마음대로 입력해주면 됨)와Selete a framework 에서 React 선택 JavaScript와 typeScript 선택 뜨는데 글쓴이는 JavaScript 선택 했습니다.) 4. 다시 3번에서 생성한 패키지로 이동명령어 : cd 경로/패키지명 5. 4번 이후에 할 작업은 package.json에 적힌 devDependencies와 dependencies를 다운 받는다.명령어 : npm i 또는 npm install(package-lock.json과 node_modules 폴더가 생성됨) 6. 실행명령어 : npm ..

✅모듈(Module) 시스템이란?  ㄴ 모듈 시스템" 모듈을 다루는 시스템  ㄴ 모듈 : 기능별로 나뉘어진 각각의 자바스크립트 파일들을 '모듈'이라 부른다.  ✅ Common 모듈 시스템1. Common 모듈 시스템 등록(기본 모듈 시스템)//위치: scr/math.js  function add(a,b){ return a+b;}function sub(a,b){ return a-b;}//module은 내장객체module.exports={ add,//add: add, (key와 value가 같으면 하나만 적어주자.) sub //sub: sub}2. Common 모듈 시스템 사용//위치: scr/index.js const moduleData = require("./math");//객체가 ..

https://hyeonddobbi.tistory.com/444 [Node.js] package-lock.json란?https://www.npmjs.com/package/randomcolor randomcolorA tiny script for generating attractive random colors. Latest version: 0.6.2, last published: 4 years ago. Start using randomcolor in your project by running `npm i randomcolor`. There are 401 other prohyeonddobbi.tistory.com✅node_modules 폴더?우리가 설치한 라이브러리가 실제로 저장되는 장소. ✅node_modu..

🔽 이전 게시글https://hyeonddobbi.tistory.com/459 [JS] 라이브러리란?프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓은것.npm 백화점 https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million dhyeonddobbi.tistory.com   ✅ package-lock.jsonex) npm i randomcolor 터미널에서 입력하게되면 package-lock.json과 node_modules가 생성되는걸 볼 수 있는데 package-lock은 ㄴ 버전이나 정보를 우리 ..

https://hyeonddobbi.tistory.com/442 [Node.js]왜 Node.js를 배울까?✅갑자기 왜 Node.js를 배울까? ㄴ react 기술은 nodejs기반으로 동작 ㄴ 그외 nextjs, vuejs도 그럼 ✅node.js는 웹 브라우저가 아닌 환경에서도 우리 자바스크립트 코드를 실행시켜주는 자hyeonddobbi.tistory.com 프로젝트ㄴ 특정 목적을 갖는 프로그램 단위(ex :  쇼핑몰 프로젝트)✅Node.js에서 프로젝트란?ㄴ 패키지라 부른다.node.js에서 사용하는 프로그램의 단위 node.js로 무언가를 만들때 이 패키지라는 것을 이해하고 사용할줄 알아야함.ㄴ 모든 자바스크립트, 리액트로 만든 모든 것들, 사용하게된 라이브러리들도 패키지 단위로 만들어져 있다.✅N..

🔽이전 게시글https://hyeonddobbi.tistory.com/443 [Node.js] 설정 및 사용(간단하게)https://hyeonddobbi.tistory.com/442 [Node.js]왜 Node.js를 배울까?✅갑자기 왜 Node.js를 배울까? ㄴ react 기술은 nodejs기반으로 동작 ㄴ 그외 nextjs, vuejs도 그럼 ✅node.js는 웹 브라우저가 아닌 환경에hyeonddobbi.tistory.com ✅갑자기 왜 Node.js를 배울까? react 기술은 nodejs기반으로 동작  그외 nextjs, vuejs도 그럼✅node.js는 웹 브라우저가 아닌 환경에서도 우리 자바스크립트 코드를 실행시켜주는 자바스크립트의 런타임 즉, 자바스크립트의 실행환경 ㄴ ex) nodej..

hook이 나오지 않는다면?Components 탭 클릭 후 위 '톱니바퀴' 클릭 Always parse hook names from source (may be slow) 체크