React (8) 썸네일형 리스트형 [react_ERROR] Can't resolve 'web-vitals create react-app으로 프로젝트를 생성하는데, 'web-vitals' 모듈이 설치되지 않았다고 에러가 떴다해당 모듈을 설치해주면 해결된다! npm add -d web-vitals React Githup-page로 배포하기 + ( 이미지가 안 뜨는 문제 해결 ) 평소 하던데로, 프로젝트를 깃허브 페이지로 배포하려는데 되질 않고 README 파일이 뜬다.React 프로젝트라서 생긴 문제라고..! React를 깃허브 페이지로 웹호스팅 하고 싶다면 몇가지 과정을 더 추가해 줘야 한다. 1. npm install gh-pages --save-dev 2. package.js에 아래 내용 추가하기3.npm run deploy 이때, “deploy” : gh-pages -d buildnpm run deploy 명령을 수행했을 때 build directory를 배포한다는 뜻이다. “predeploy” : “npm run build”predeploy는 npm run deploy 명령어를 입력했을 때 deploy가 수행되기 전에 npm run build를 한다는 뜻이다. pred.. 라우팅처리 브라우저 url이 바뀔때마다 보여줄 컴포넌트를 맵핑 시켜서 우리에게 보여주는것을 라우팅 처리 라고 한다. 리액트에서 라우팅 처리를 하려면 추가적으로 모듈을 설치해야한다. 터미널을 하나 더 연다음에 모듈을 설치해준다. npm install react-router-dom@ 그럼 package.json에 react-router-dom이 추가된 것을 볼 수 있다. 그럼 이제 라우팅 기능을 만들어보쟈ㅑㅑ 라우팅 기능을 하기 위해 About.js 파일도 하나 삭 만들어준다. 먼저 index.js에 BrowserRouter를 import 해준다. 'react-router-dom'에서 BrowserRouter를 가져오는데, 브라우저 라우터는 리액트에서 웹브라우저 라우팅을 처리할때 가장 보편적인 라우터라고 한다..! 그.. 함수형 컴포넌트 VS 클래스형 컴포넌트 / 컴포넌트 만들기 리액트 컴포넌트를 만드려면 두가지 방법이 있는데, 함수형 컴포넌트 VS 클래스형 컴포넌트 함수형 컴포넌트 자바스크립트의 funtion을 이용한 클래스형 컴포넌트 둘중에 뭘 쓰든 상관없지만 함수형 컴포넌트로 개발하는 추세라고 한다..! 함수형 컴포넌트로 만들기 컴포넌트로 만들어서 사용할 Home.js 파일을 만들고 이걸 App.js 파일에 넣어주면 된다! State란?! State란?! 자료를 잠깐 저장할땐 변수를 사용한다리액트에서 State도 자료를 저장하고 싶을 때 사용할 수 있다. post 변수처럼 자료를 잠깐 저장할땐 변수를 사용한다.react에서도 자료를 잠깐 저장할때 state를 써도된당useState를 입력하고 엔터를 치면 상단에 import {useState} from 'react'가 자동으로 입력된다! State를 만드려면!1. import {useState} useState를 가져온다.2. useState(보관할 자료를 담아준다)3. let [ a, b ]보관할 자료를 사용하고 싶다면 위처럼 코드를 짜준다. 이때 a는 state에 보관했던 자료다! a를 불러오면 '남자 코트 추천' 이 불러와진다.b는 state 변경을 도와주는 함수이다. 이때 l.. JSX란?! javascript를 확장해서 xml태그를 쓸 수 있도록 지원해준게 jsx html을 javascript 환경에서 쓸 수 있도록 만들어준게 jsx라고 생각하면 된다~ 자바스크립트 파일인 App.js파일의 return 안에 html을 사용할 수 있다. 이게 JSX! react에서 html태그 자동 완성 만들기 (수정중) vue를 사용했을때는 html 태그 자동완성이 잘됐었는데....! 리액트에서는 왜인지 안된다ㅠㅠㅠ 해결방법! F1을 누른뒤 setting > Preferences: Open Workspace Settings(json) 을 선택해준다.그럼 아래와 같은 창이 뜬다. 여기에 아래 코드를 복붙한다."emmet.includeLanguages": { "javascript": "javascriptreact"}입력하고 저장만 해주면, 자동 완성이 아주 잘된당!~!~! 자동 완성 기능은 emmet이라는 놈이 해주는 것인데, vscode에서는 html에서만 emmet기능을 지원해준다고 한다. 리액트파일에서 emmet기능이 적용되지 않는 이유는 html과 js가 혼합된 jsx 문법을 사용하기 때문이다..! 그래서 emm.. react 생성하기 1. 프로젝트 폴더를 만들고 shift+우클릭 후 여기에 powershell 창 열기 클릭!2. npx create-react-app create react 라는 라이브러리를 이용해 프로젝트 생성을 쉽게 해준다.이 라이브러리를 이용하기 위해서는 npm을 사용해야하니까 node.js 설치해줘야함성공적인 생성..! 3. vscode에 해당 폴더 불러오기! 4. 미리보기 띄우기는 터미널에서 npm startTerminal > new terminal 클릭하고 터미널에 npm start를 입력해주면 된다.node_modules프로젝트 구동에 필요한 모든 라이브러리들의 소스코드를 모아놓은 폴더 public 폴더 static 파일을 모아놓는 곳html, 이미지 파일 등 잠깐 보관하고 싶을때 쓰는 파일 src 폴더.. 이전 1 다음
