22.10.17.Mon - 필요한 부품을 만들거나 끌어와 사용해서 멋진걸 만들자.

오늘의 요약 = 필요한 부품을 만들거나 끌어와 사용해서 멋진걸 만들자.

1교시 : gui에 익숙해진 사람들.

dos / 리눅스 명령

서로의 명령은 다르다.
탐색기와는 비교도 안되는 강력한 성능.
gui 에 익숙한 사람에게는 낮설다.`

---

2교시 : C.S 지식의 부재

컴퓨터 기초 지식

react

Libray 와 FrameWork 이 둘을 구분해야한다.

Library이다.
쉽게 만들 수 있도록 도와주는 환경이 Framework (ex : npx create ~)이다.

싱글페이지 어플리케이션

단 하나의 웹페이지로 실행.
인덱스 HTML파일의 콘텐츠에 JS를 삽입하여 실행한다.

중요한것

• React.createElement(); / 태그를 만들고
• ReactDOM.render(); / 적용한다.
  위의 두가지가 리액트의 알파이며, 오메가다.

---

3 ~ 4교시 : react 맛보기, 부품들의 Ensemble(앙상블)

태그의 구조 , 위계 , 순서를 잘 아는 것이 중점이다.

바벨 (라이브러리)

작성한 코드를 에전 js형태로 바꿔주는 기능을 한다.

react 함수 작성시

반환값은 하나여야한다. 많은 내용을 담아야한다면, 내용을 빈태그로 감싸서
하나로 만들어야한다.

부품들의 조합

부품을 만들어 놓으면 재사용을 할 수 있다.

리액트는 하나의 박스이다.

개발

초보자는 탑-다운

큰틀부터 보는 연습

능숙자는 바텀-업

컴퓨터 성능면 좋다.

본질

어떻게 만들지, 어떻게 쪼갤지 설계하는 것이 본질

---

5교시 :

js를 배운 이유는 리액트를 쓰기 위함이였다.

잘안다 vs 잘한다

아는 것은 공부의 영역.
하는 것은 경험의 영역.

component (구성요소)

HTML의 블럭들. 부분에 맞는 구역들을 components(구성요소)라 한다.

뼈대를 만들어주는 도구다.

일머리

JS 에서 에밋이 안먹으니까, 복잡한 태그를 한번에 만들기 위해서 빈 HTML파일에 에밋으로 태그를 만든후,
복사 /붙혀넣기 하면 개꿀.

react

사용하는 이유

함수의 매개변수의 특성을 이용해 데이터 입력값을 넣기만 해줘도 폭발적인 성능을 내주기 때문에.
태그에 대한 공통적인 부분을 단축키 처럼 도구화 시킬 수 있다.

import export (수입 , 수출)

부품들을 연결하는 접착제

props의 등장

배열의 데이터의 값을 연결해주는 접착제이다.

---

6교시 : 실습

내가 만든 태그는 대문자.

##
고정되지 않고, react(반응하는)것으로 만든다.

---

7교시 : 리액트의 개괄 / JSX 문법

순서도

1. react 기반 프로젝트 만들기
   • npx create-react-app (projectname)
   • Node.js 설치되있어야한다.
2. index.html문서 열고
3. index.js문서열고
   • 사용자 정의태그(대문자로 된 태그를 필요에 의해 만들고)
   • => <App></App> or <App /> 확인
4. 3번에서 정의하거나 확인한 태그에 이름으로 JS파일을 만든다.
   JS파일의 이름은 반드시 태그의 이름과 동일해야 한다. (대소문자.)

• 함수를 정의
• 정의한 함수를 내보낸다.
  • export default 함수명;
  • export default function 함수명(){함수내용} ;
  • 함수의 마지막에는 return(JSX문법에 맞는 태그 작성)문을 넣어줘야한다.

JSX (JavaScript XML)

JSX문법의 주의사항

• 태그의 이름은 소문자.

• 닫는 태그를 작성해야한다.

  • 없는 경우 마지막에 /(슬래쉬)로 닫아준다.
  • 예 : <img />, <hr />

• 태그의 클래스 속성

  • className으로 작성
  • <h1 className='doil'>영구없다</h1>

• 태그의 이벤트 연결 속성

  • on이벤트명
  • 이벤트의 첫글자는 대문자.
  • 메소드는 집합기호에 따옴표 없이.
  • 예제 : <button onClick={호출하려는 method명}>버튼</button>

• 태그의 속성명에 JS 변수값을 할당하고자 할 때

  • ""를 제거하고 {}기호 사용

    태그 속성 JS 변수 예제

    const iName = "doil";
    <h1 className={iName}>영구없다</h1>

• xml의 변수 이름은 ""를 사용해라.

• if문이 존재하지 않는다.

  • 조건문 대신에 삼항 연산자 사용한다.

• 반복문 존재하지 않다.

  • 사용해야한다면, 배열을 만들고, 배열관련 메소드를 활용한다.
  • map,foreach 등 메소들 잘 알고, 이용할줄 알아야한다.

---

8교시 : 개발자란

왜 분리하는가?

단일 책임 원칙을 위해 => 유지보수 효과 향상

하나의 독립된 파일은 하나의 문제만 책임진다.

개발자는 부품 생산, 조립가 이다.

크고 작은 부품들을 혹은 없다면 부품을 만들어, 문제를 해결하는 방법을 구조로 만들고,
구조를 구현하기 위해 부품들을 끌어다 조합하여 만드는 사람이다.

---