귀농 전까지 쓰는 개발 일지

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

자바 스크립트 배열 값을 추가하는 방법 1. index 방식 2. push - 마지막에 삽입됨 - hoing2에 배열의 길이 return 됨 => 활용 불가 => 중첩하여 쓸 경우 concat 활용 3. concat - hoing은 원래 배열로 남게 됨 - hoing2에 추가된 배열 복사 됨

(1) 변수(Variable) - let: 변수명 똑같이 중복 선언 '불가' / 중괄호 사용 시 범위가 한정적 (지역변수) let title = '제목'; console.log(title); //Console창에 출력 title = '제목수정'; console.log(title); let globalScope = 'global name'; { let name = 'javascript'; //let 변수 console.log(name); name = 'hello'; console.log(name); } console.log(name); console.log(globalScope); - var : 변수명 똑같이 중복 선언 '가능' / 중괄호 내 사용 시 범위 한정적X let globalScope = 'glo..

(1). IIFE Function - Immediately Invoked Function Expression : 함수의 정의 및 호출을 한번에 표현 (2) Closure 현상 - 지역변수가 사라지지 않고, 계속 기억되는 현상 function sequence(){ var seq = 0; return function(){ return ++seq; }; var seq = sequence(); console.log( seq() ); console.log( seq() ); console.log( seq() ); //1,2,3출력 }