[React] 학습내용 STEP.1

React 입문 및 활용 STEP. 01

 

자바스크립트의 역사

HTML&CSS 로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어줍니다. 보조적 기능을 수행하기 위한 용도로 사용되었습니다.

 

 

NodeJS: 브라우저 외부에서 JS를 실행 할 수 있는 환경

package.json: 프로젝트의 설명서 (버젼, 사용중인 패키지 등을 알 수 있다.)

- dependencies: 서비스에서 필요한 패키지들

- dev dependencies: 개발단계에서 필요한 패키지들

 

Git: 소스코드 버젼관리를 해준다. 협업과정에서의 피로도를 줄여준다.

ES Lint: 코드의 규칙을 정한다. 프로젝트 코드의 균일화 (.eslintrc 라는 설정파일을 추가해주어야한다)

Prettier: 코드 포맷 규칙을 정한다. ES Lint 와 함께 사용하면 규칙에 맞게 이쁘게 코드를 포맷팅 할 수 있다. (.prettierc 라는 설정파일을 추가해주어야한다.)

SPA: 하나의 html 과 js 파일만 존재. js 파일이 무거워질수록 페이지가 느려질 수 있다. 필요한 js 파일만 쪼개서 가져오는 코드스플리팅 같은 방법을 이용하여 단점을 해결 할 수 있다.

Create React App: 어느정도 설정이되어있는 프로젝트를 제공해준다. 일반적으로 보일러플레이트라는 용어로 부른다.

State: 리액트는 제이쿼리와 다르게 직접적인 돔에 접근을 거의 하지 않는다. 대신 상태값이라는 값을 두고 돔을 제어한다.

 

Function vs Class

- Class: State, Life Cycle (컴포넌트의 상태를 캐치 할 수 있는 함수 지원) 을 가질 수 있다.

- Function: State, Life Cycle 을 가질 수 없다.

- but. hook 의 등장으로 Function Component 도 다 할 수 있다.

 

참고링크

eslint, prettier 설정: https://github.com/appear/React-Example-Project

github: https://simplejs.gitbook.io/olaf/undefined/github-ssh-key/commit-push

appear/React-Example-Project