React입문 1주차(초기셋팅)

React.js

‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 AngularJS, VueJS보다 선호도가 좋다.

 

SPA(Single Page Application) 아키텍쳐

Single Page Application, 한 개의 페이지로 이루어진 애플리케이션이라는 의미로 MPA(Multi Page Application)과는 상반된 개념이다.

기존 MPA의 문제점(super easy version)으로 리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄-청나게 많기 때문에 사용감에 불편함이 있을 수 있는데 이를 보완하는 방안으로써 SPA를 사용할 수 있다.(부분적인 요소만 살짝 바꿔주는 개념으로 이해)


특징과장점
딱 한개의 페이지(Single Page)로 구성된 웹 앱이다
서버에 1회 리소스를 요청한다.
-> 그 이후에는 필요할 때, 필요한 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정
자연스러운 UX(User Experience)를 구현할 수 있다.
비슷한 기술들로는  Angular, Vue있다.(구현의 차이는 각각 존재해요)

단점
SEO(Search Engine Organization)을 위해서 html페이지 전체가 필요한데, SPA의 html은 단 하나로 검색엔진 즉, 로봇이 찾을 수가 없다.(페이지가 많은 MPA는 가능한 부)

SPA 프레임워크의 종류
ReactJS
VueJS
AngularJS

 

node 설치 확인하기

node -v

 

npm 이란?

NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소이다. 우리는 npm에서 여러 패키지를 다운받아 활용할 수 있다.

 

터미널에서 yarn 설치하기

npm install -g yarn

# -g : global

yarn 설치 확인하기 (=== 버전 확인하기)

yarn -v

npm install [설치할 패키지 이름]

yarn add [설치할 패키지 이름]

# 예시: yarn add react-router-dom

---

<npm과 yarn 공통적 특징>

둘다 자바스크립트 런타임 환경인 노트(Node.js)의 패키지 관리자

애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓는. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자

<차이점>
NPM
node.js를 설치할 때 자동으로 생성(npm을 가지고 yarn을 설치한 것)
Node Package Manager의 약자로 NPM platform 자체이다.

YARN
2016년에 페이스북에서 개발한 패키지 관리자
npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋다.

요약
속도 : Yarn👍
보안 : Yarn👍

---

런타임이란
프로그래밍 언어가 구동(running)되는 환경(environment)

1. 브라우저(ex : Chrome, Microsoft Edge, Firefox, Internet Explorer)
2. node환경

즉, javascript 파일을 실행할 수 있는 방법이 2가지가 있다는 이야기

---

CRA(Create React App)

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법 

 

React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많은데 WebPack, babel, eslint 등 이러한 것들을 신경쓰지 않아도 됨 → 보일러플레이트

 

💫CRA로 프로젝트 생성하기

리엑트로 프로젝트를 생성하고 싶은 폴더에 해줘야

ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.

cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.

yarn create react-app week-1 # week-1프로젝트 생성!

yarn create react-app . # 현 위치에 프로젝트 생성!

이런식으로 구조가 갖춰져 있어야함 파일 경로 잘 확인할 것

 

cd week-1 # week-1 폴더로 이동
yarn start # 프로젝트 시작

👌준비완료! 이제는 src/App.js 파일을 수정하고 저장하면 새로고침이 없어도 UI가 자동 업데이트 된다.

 

public > index.html
→ src > index.js
→ src > App.js

결국, 중요한 것은 [우리의 플레이그라운드는 ‘App.js’라는 것]

절대경로 설정하기

상대경로 : . / -> 

절대경로 : 
root 경로에 jsconfig.json 파일을 만들고,
해당 코드를 작성하면 src폴더 밑에 있는 것들은 절대경로로 보겠다는 의미

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}

 

경로 설정시,

cd # 맨 처음의 경로로 돌아감

cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어감

yarn create react-app 폴더이름 #프로젝트를 시작할 폴더와 프로젝트 생성이 동시에 진행됨

yarn create react-app # 폴더 생성과, 경로가 올바르게 지정되었다면 바로 프로젝트를 생성