What?

• React Router
  • 여러가지 페이지를 만들고 싶다면 사용
  • nreact-router-dom 라이브러리 이용
  • 각각의 페이지를 보여주는게 아니고 HTML 내부 내용을 갈아치워서 다른 페이지처럼 보여줌
• BrowserRouter
  • 라우팅을 리액트가 아니라 서버에게 요청할 수도 있음 (위험)
  • 서버에서 서버 라우팅 방지하는 API를 따로 작성해둬야함
• HashRouter
  • 라우팅 안전하게 할 수 있게 도와줌
  • 사이트 주소 뒤에 #이 붙으며 #뒤에 적는 것은 서버로 전달 X
• 라우팅
  • 여러 태그들 import 필요 (Link, Switch, history..)
  • 원하는 곳에 태그를 작성
  • 서버에서 사이트 구성에 필요한 데이터 받아온 후 HTML로 보여줌
  • 안에 path와 path 방문시 보여줄 HTML 적으면 됨
  • URL 파라미터로 상세페이지 만들기
  • 데이터는 항상 위에서 아래로 흘러야함
• styled-components
  • class 선언없이 컴포넌트에 CSS를 직접 장착
• Sass 문법
  • 변수, @import, nesting, extends, @mixin/@include

How?

• 문제: node-sass 설치 시 에러 발생함
• 해결: 처음엔 node-sass 버전을 낮춰서 재설치했으나, 해결이 되지 않았고, node.js LTS 버전으로 재설치해 오류를 해결했다.😁

What?

• react-bootstrap
  • react-bootstrap 사용법
  • navbar, Jumbotron, 상품 레이아웃 작업
• import / export
  • export default, export, import
• data binding
  • 상품 데이터 데이터바인딩
• Component + 반복문
  • component 제작법, props 전송법
  • 컴포넌트 반복문, map 반복문 돌리기
• 서버에서 사이트 구성에 필요한 데이터 받아온 후 HTML로 보여줌

What?

• Map
  • JSX 코딩 중괄호 안에는 변수, 함수 이런 것만 입력 가능
  • map으로 반복문 돌려 HTML 담기
  • 사용시 콘솔창 에러 뜨는 이유
    • 반복문 돌린 요소에 key={} 적으라고 권장
• props
  • 자식 컴포넌트가 부모 컴포넌트 안에 있는 state 사용시
• state
  • UI 현재상태를 보관하는 저장소 역할
• input
  • 입력된 값 state에 저장
  • e.target => 이벤트 동작한 곳

What?

• React Component
  • Compnent 문법
    • function 키워드 이용해 함수 생성
    • return() 안에 HTML 작성
    • 원하는 곳에 <함수명></함수명> 선언
    • 이름 영어 대문자로 시작
    • 어떤걸 만들까
      • 반복적인 HTML 덩어리
      • 내용이 자주 변경될 것 같은 HTML 부분
    • 단점
      • App(){}안에서 state를 사용하고 싶을 때 바로 쓸 수 없다는 것
  • 모달창 디자인
    • 삼항연산자 사용
    • 상태정보 state로 만듬

What?

• 설치/개발환경 셋팅
  • nodejs 최신버전 설치
  • 터미널에서 명령어 입력
    • npx create-react-app 프로젝트명
• jsx
  • jsx를 이용해 HTML 페이지 제작
  • HTML에 스타일 직접 적용하고 싶으면 {}로 바꿔서 넣기
• state
  • 중요한 데이터는 state로 만들기
  • 변수 대신 쓰는 데이터 저장공간
  • 데이터 바인딩 가능
  • 버튼기능/state 변경

What?

• Destructuring
  • Array, Object, 함수 파라미터
• import / export
  • export default 문법
  • export 문법
• sync/async
  • 동기/비동기 처리
  • 자바스크립트는 항상 동기식 처리
  • 웹 브라우저 덕분에 비동기 처리 가능
  • Web API
• ES6 Promise
  • 코드/함수 디자인 패턴
  • 성공하면 then(), 실패하면 catch() 실행
• ES8 async/await
  • Promise와 then을 쉽게 만들어주는 문법
• for in 반복문
  • Object
  • enumerable한 것만 출력
  • 부모prototype에 저장된 것도 출력
• for of 반복문
  • iterable인 자료형들만 적용 가능
• Symbol
  • 비밀스런 key값 부여
• Map
  • 매핑 가능
  • key, value 형태
  • 자료의 연관성 표현 (모든 자료형 넣을 수 있음)
• Set
  • 중복자료 허용안함

How?

자바스크립트 객체지향, ES6문법 강좌를 다 수강했고, 리액트 강좌 들을 예정

What?

• extends
  • 유사한 class 생성시 사용
  • class 상속
• super
  • extends로 상속중인 부모 class의 constructor()
• get / getter
  • 데이터를 뽑아주고, 가져와준다.
• set / setter
  • 데이터를 입력해주고, 수정해준다.

What?

• Primitive data type
  • 자료 자체가 변수에 저장되는 자료들
  • 문자, 숫자
• Reference data type
  • 변수에 직접 저장 X, 화살표 (레퍼런스)를 변수에 저장
  • Array, Object
• 객체지향
  • constructor
    • object를 복사하고 싶을 때 사용
  • prototype
    • constructor 함수에만 생성됨
    • __proto__
    • 콘솔창 확인
• ES5 상속기능
  • Object.create()
• ES6 상속기능
  • Class
  • Object.getPrototypeOf()

What?

• Spread Operator (…)
  • 대괄호 제거
  • array 합치기/복사
  • object 합치기/복사
  • 활용법
    • array를 parameter형태로 넣고 싶을 때 사용
• apply
  • 실행할함수.apply(적용할 곳)
  • [array]로 한꺼번에 집어넣기 가능
• call
  • apply와 실행 결과와 사용법 같음
  • 일반 함수처럼만 넣을수 있음
• parameter
  • default parameter (기본값) 줄 수 있음
  • 다른 parameter와 연산 가능
  • 함수 입력 가능
• arguments
  • 모든 parameter들을 한꺼번에 다룰 때 사용
• Rest (…)
  • 대괄호 감싸기
  • 함수 parameter 자리에 붙음

What?

• Template literals
  • 문자 다루는 법
  • 따옴표 => backquote, backtick
  • 엔터키 입력, 문자 중간에 변수 넣기 편함
  • HTML 작성시 유용
• tagged literals
  • 문자 중간에 있는 단어 순서를 바꾸거나 변수를 제거할 때 유용
  • 함수 뒤에 문자를 붙여 사용