귀농 전까지 쓰는 개발 일지

니꼬썜 강의보고 재밌어보여서 후딱 해보기 https://github.com/HanHoing/react-hooks GitHub - HanHoing/react-hooks Contribute to HanHoing/react-hooks development by creating an account on GitHub. github.com https://www.notion.so/hansimcom/React-Hooks-10-cc67b5d8e87143a786bb9f9aaf9cec5d?pvs=4 [React]실전형 리액트 Hooks 10 #0 INTRODUCTION www.notion.so

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. 원인 React 18에서 변경된 API 사용에 관한 건. ReactDOM.render 대신 createRoot 함수를 사용해야 함, 새로운 API로 전환하지 않으면 앱은 React 17처럼 동작함 해결 1. ReactDOM.render를 createRoot로 변경 기존 코드 import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render..

https://getemoji.com/ 😋 Get Emoji — All Emojis to ✂️ Copy and 📋 Paste 👌 ✂️ Copy and 📋 Paste Emoji 👍 No apps required Emojis are supported on iOS, Android, macOS, Windows, Linux and ChromeOS. Copy and paste emojis for Twitter, Facebook, Slack, Instagram, Snapchat, Slack, GitHub, Instagram, WhatsApp and more. 😃 getemoji.com # 복붙해서 사용

1. Component - UI를 재사용 가능한 개별적 조각들로 나눔 - 엘리먼트(일반 객체)는 React 앱의 가장 작은 단위로 컴포넌트의 구성요소 2. props (읽기전용) - 부모 컴포넌트에서 자식컴포넌트로 데이터 전달 시 사용 (단방향 데이터 전송시 사용) 3. state - 컴포넌트 내부에서 선언하여 내부 값을 변경 가능 (데이터 유동적 다룰 때 사용) -> this.state로 state 객체의 초기 값 설정 (보통 생성자 내에서) -> 데이터 변경 가능 -> 변경된 상태를 컴포넌트에게 알려주기 위해 setState(리렌더링됨)함수 사용 = 새로운 값 주기 --------------------------------------------활용------------------------------..

사용할 html 문서 header부분 변환 - Header class (Component)적용 같은 방식으로 nav -> Header class, article -> Article class 로 변환하기!!

설치&실행 1. Node.js (NPM) 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. create-react-app 설치 //cmd창서 실행 npm install -g create-react-app 3. 프로젝트 생성 cd / //프로젝트를 만들 파일로 이동 mkdir 프로젝트이름 //해당 파일에 프로젝트 생성 cd 프로젝트이름 // 생성한 프로젝트파일로 이동 create-react-app . //오류 발생시 npx create-react-app . 으로 실행 (버젼차이) code . // VisualStudio Code 실행 4.프로..

- public/index.html - src/index.js ReactDOM.render(, document.getElementById('root')); // index.html의 id가 root인 요소에 생성 => - src/App.js function 형식을 class 형식의 코드로 변경 - src/index.css 프로젝트 정체 적용 CSS - src/App.css App 모듈 내에서만 적용되는 CSS

- public/index.html - src/index.js ReactDOM.render(, document.getElementById('root')); // index.html의 id가 root인 요소에 생성 => - src/App.js function 형식을 class 형식의 코드로 변경 - src/index.css 프로젝트 정체 적용 CSS - src/App.css App 모듈 내에서만 적용되는 CSS