React #1.Intro

joonsikyang·2020년 2월 12일
0

React Session

목록 보기
2/4
post-thumbnail

✔️ Index

  1. Why React?
  2. React의 이해
  3. 작업 환경 설정
  4. CRA 초기 세팅

1. Why React?

  • 자바스크립트의 확장성. 자바스크립트의 "탈웹"
  • 애플리케이션의 규모, 복잡성 증가
    - vs. jQuery : 메소드 모음. 쉽게 DOM에 접근해서 조작이 가능하게 함.
  • 더욱 효율적인 UI 구성, 편리한 UX 제공, 생산성 향상, 분업화
  • "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기”
  • 생태계 활성화 + React Native >>> React 사용 증가
  • cf) MVC Architecture (Model-View-Controller) (cf. Vue, Angular)

2. React의 이해

  • React >> 자바스크립트 "라이브러리"
  • cf) 라이브러리 vs. 프레임워크
  • Virtual DOM
  • Component

3. 작업 환경 설정

Node.js

$ node -v

  • 자바스크립트의 "탈웹"을 주도. 브라우저 밖의 환경에서도 자바스크립트를 사용 가능하게 해줌.
  • 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들( 바벨, 웹팩 )이 Node.js를 사용하기 때문에 설치해야함.

npm + yarn

$ npm -v

  • npm(node package manager)
  • 다양한 패키지를 설치하고 버전을 관리할 수 있음

CRA(Create-React-App)

Why CRA?

  • 리액트로 만들고 나면 컴파일러 필요.
  • 리액트 애플리케이션에 필요한 다양한 기능이 가능하도록 하는 것들(웹팩, 바벨..)이 초기 세팅 되어 있는 것
    - 서버와 통신 필요, 백엔드 API, 이미지 가지고 오기 >> 로컬 서버를 띄워야 가능
    - 수정하면 자동으로 리로드 되는 기능도 마찬가지
  • 즉, 리액트 애플리케이션 초기 세팅 도구(tool)
  • (단점: 초기 설정 내부 수정이 어려움)

4.CRA 초기 세팅

  • CRA 설치
    npx create-react-app westagram-react

  • CRA 기본 구성

  • package.json

    • 라이브러리/패키지 세팅 리스트 정보(종류, 버전) 들어있는 파일
    • 모든 프로젝트마다 package.json 하나씩 존재
    • dependencies
      • 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
      • 실제 코드는 node.modules 폴더에 존재
    • 실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재
    • 공유할 때 내가 작성한 코드 + package.json(설치한 패키지 정보) 넘긴다.
    • 다른 사람이 그것을 받아서 npm install 만 입력하면 package.json에 정보가 있는 관련 모듈 전부 다운 받아짐
    • github에 올릴 때, node.modules는 올리면 안 되는데,
    • 그렇다면 >>> .gitignore 파일에 github에 올리고 싶지 않은 것을 작성
    • 라이브러리 새로 설치 시
      • 누군가 만들어 놓은 소스코드를 다운받는 것
      • npm으로 설치 (ex. npm install slider)
      • 설치 시 node modules에 자동으로 설치됨.
      • 하지만 dependencies에 추가 자동으로 되는 건 아님.
      • 그래서, npm install slider —save >>> 현재는 설치 시 무조건 추가됨
      • —save 까지 작성해야 dependencies에 추가됨
  • public - index.html

  • src - index.js

    • React의 시작 (Entry Point)
    • 이름 함부로 수정하면 안 됨
  • React, ReactDOM


💥 Assignment

  • App.js 수정해서 인스타그램 내용 나올 수 있도록 할 것
  • westagram 기존에 작성한 코드 HTML, CSS 일단 옮겨서 JSX 형태로 바꾸기
  • React Router 공부해서 적용해보기 (예리님 블로그 참고)
  • state, props 학습
profile
실력, 심력, 체력, 영력의 균형있는 성장을 추구합니다.

0개의 댓글