기억하기 위한 기록

ityped 사용하여 타이핑효과 주기 npm install ityped https://www.npmjs.com/package/ityped ityped Dead simple animated typing, with no dependencies. www.npmjs.com

1. home 에 있던 이미지를 Feaured 컴포넌트의 div안으로 이동시키고, home에서 지운다. 2. info 생성 3. info 의 위치를 absolute로 변경하여 메인이미지 위로 얹는다. https://developer.mozilla.org/ko/docs/Web/CSS/position position - absolute 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 부모 요소에 대해 상대적으로 배치합니다. 단 부모중 위치 지정 요소가 없다면, 초기 컨테이닝 블록을 기준으로 삼습니다. 최종위치는 top, right, bottom, left 값이 지정합니다. z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다..

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 ..

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