개발공부일지

목차 1. component 2. class component 3. function component 4. 함수형 컴포넌트 활용해보기 1. component - 컴포넌트 단위는 UI단위 - 재료를 만들어서 레이아웃 단위로 컴포넌트를 구상해서 - 하나의 컴포넌트에 조립하면 페이지가 구성되는것! - 만약 버튼을 컴포넌트로 구상을 해서 만든다고 했을때 - 확인, 취소 버튼이 필요하다면 내용물을 바꿀수있어야하니까 - props값이 내용을 다르게 보여줄수있게 해주고 - state는 모든 버튼의 최초의 상태값! (해당 컴포넌트만 가지고있는 본인의 상태값) 2. class component - 클래스형 컴포넌트는 빌드된 내용이 무겁고 this 바인딩 문제가 있다 - Mycom을 만들어 Mypage에서 import해서..

목차 1. babel 사용법, 환경 설정, 실행 2. babel 변환 3. webpack 속성 4. webpack 설정 & 실행 5. react 실행, 에러 1. babel 사용법, 환경 설정, 실행 - babel은 자바스크립트 코드를 변환해준다. - commonjs와 ES6문법 전환을 해주어 최신 문법으로 작성하면서 작업을 할수있다는 장점이 있다! - npm 설치하기 npm install @babel/core @babel/cli @babel/preset-env - .babelrc 파일만들고 환경 구성해주기 { "presets": [ [ "@babel/preset-env", { "targets": { "node": "16", "chrome": "58", "ie": "11" } } ] ] } - 자바스크립..

목차 1. 리액트 탄생배경 2. 리액트 특징 ① 데이터의 흐름 ② 컴포넌트 구조 ③ 가상 DOM ④ props와 state ⑤ JSX문법 3. Class형 component 구조 알아보기 4. CDN 사용해보기 5. 리액트 사용하며 주의할점! 1. 리액트 탄생배경 - 페이스북(메타)에서 만든 라이브러리 - 넷플릭스, 에어비앤비에서 리액트 사용 - 프론트엔드 3대장 : Angular, vue, react - 지금은 Angular 거의사용안하고, 카카오에서 vue사용 - 데이터 흐름이 양방향인 Angular, vue - 리액트는 단방향의 데이터흐름이다! - 리액트사용전에는 jquery사용함 (DOM 다루는 방식이 쉬워서 가져다 사용함 → 가독성 떨어짐, 유지보수 힘들고..) - 초기 인기 SPA 사례 : g..