목록분류 전체보기 (69)

기억하기 위한 기록

Netflix / Home, Navbar

Home 1. rfce로 react파일 자동생성 2. scss 사용 :root 에 대해 따로 공부하기. app.scss :root{--main-color:black; } home.css : background-color : var(--main-color); Navbar 1. material-ui/icons 사용하기 위해 npm install로 설치해준다. npm install @material-ui/icons @material-ui/core 2. material ui의 아이콘 명을 가져다가 컴포넌트처럼 사용할 수 있음. (import해오면) search & notifications 사용 3. span 수직 중앙정렬 하기 위해 display : flex align-items : center 4. left ..
Front-end/react 2021. 10. 12. 21:21
[생활코딩] React component style - class(클래스형) vs function(함수형)

▼ 리액트는 클래스형(class)과 함수형(function)으로 컴포넌트를 만들 수 있다. 클래스형 컴포넌트 리액트의 기능을 최대로 끌어 올릴 수 있다. 클래스 문법을 알아야한다. 대부분의 리액트 자료들이 클래스 방법으로 되어 있다. 함수형 컴포넌트 함수의 문법만 알면 사용할 수 있다. 컴포넌트 내부의 state를 만들거나 , life cycle API를 사용할수 없었으나 최신 리액트에서 hook이 도입 되어서 내부적으로도 상태를 다룰 수 있게 되었다. ☑ 클래스방식 컴포넌트의 심부름꾼 단계에서 클래스 방식과 대등한 단계로 격상된 이유는 hook 덕분이다. 강의내용 npx create-react-app 으로 리액트 프로젝트 생성 * create-react-app이 없다면 npx install -g cre..
Front-end/react 2021. 10. 10. 20:21
scss / Cannot find module 'sass' 컴파일에러

npm install sass
Front-end/react 2021. 10. 9. 18:49
[react] Link태그 사용시 Error: Invariant failed: You should not use <Link> outside a <Router>

는 안에서 사용해야 한다. Link 태그를 사용하기 위해 프로젝트 디렉토리에 npm install react-router-dom 을 설치한뒤 import {Link} from 'react-router-dom' 해주고, index.js 에서 컴포넌트를 로 감싸주어야 한다. 이렇게 하고 나니 오류가 사라지고 Link태그를 사용할 수 있다.
오류 및 에러 2021. 9. 1. 16:02
이전 Prev 1 ··· 4 5 6 7 8 9 10 ··· 18 Next 다음