[ React 소개 ]
A JavaScript library for building user interfaces
리액트 공식 문서에는 이렇게 소개가 되어있음
React를 통해서 UI를 Building할 수 있음
UI를 Building: 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트 엔드 영역이죠)을 구축한다는 의미와 같음
React.js는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용함
▶ 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에는 약함!!
SPA는 서버에 1회 index.html만 요청하는데 내용이 없음
즉 SEO(Search Engine Organization)을 위해서는 HTML 페이지 전체가 필요한데 SPA 페이지의 HTML 파일들은 모두
<html>
<head>
<title>리액트 프로젝트</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
이렇게 생겼기 때문에 검색엔진 즉 로봇이 찾을 수가 없음
그래서 요즘 next.js가 많이 쓰임
▶ 왜 React인가?
SPA 프레임워크의 종류
- ReactJS
- 페이스북이 만들고 유지보수
- 선발주자인 만큼 막강한 커뮤니티와 자료를 보유하고 있음
- VueJS
- easy to learn, simple!
- 꾸준히 성장하는 중임
- 후발주자라 어쩔 수 없는 market share..!!
- AngularJS
- 안정적인 프레임워크!
- hard to learn, heavy. 그래서 나온지 꽤 됐음에도 점유율은 낮음
그 중, 왜 React인가?
- NPM trends: react > vue > angular
- RN(React Native)와의 상생, 심지어는 VR에서까지 활용할 수 있음
- 막강한 커뮤니티
- 많은 채용공고……… 🤫
▶ 컴포넌트란?
리액트가 채택한 개발방법
[컴포넌트 = 벽돌] 이라고 이해하면 쉬움. 벽돌을 쌓아 집을 지음
헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트 만들어서 벽돌을 쌓아 올리듯이 개발을 하는것
| 헤더(Header) |
| 바디(body) |
| 푸터(footer) |
어떤 웹 사이트가 변경이 일어났다고 한다면
- SPA 기반 : 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임 X(이걸 렌더링이라고 함)
- MPA 기반 : 하나의 변경사항을 반영하기 위해 전체 페이지 Re-load
[ React에서 자주 사용되는 필수 ES6 문법 ]
▶ 상수와 변수
- const : 재할당 안됨. 내부 속성값은 수정 가능
- let : 재할당 가능함
둘 다 block level scope를 가짐
▶ Object 선언, 단축 속성, 객체 복사
가장 중요한 것은 object는 key-value pair이라는 것
객체를 선언하는 방법
// 선언방법
const person = {
name: '르탄',
age: 21,
company: 'sparta coding club',
doSomething: () => {},
}
생략해서 표현하는 방법
const name = '르탄';
const age = 21;
/** 단축속성 : key - value가 일치하면 생략 */
// 변경 전
const person = {
name: name,
age: age,
company: 'sparta coding club',
doSomething: function(){},
}
// 변경 후
const person = {
name,
age,
company: 'sparta coding club',
doSomething: function(){},
}
★복사 주의! (얕은 복사)
const obj1 = { value1: 10 };
const obj2 = obj1; // 얕은 복사
const obj3 = JSON.parse(JSON.stringify(obj1))
//새로운 객체를 만들어냄(Json으로 했다가 다시 객체로 돌림)
obj1.value1 += 1;
console.log(`obj1:`, obj1);
console.log(`obj2:`, obj2);
console.log(`obj3:`, obj3);
결론적으로, const obj2 = obj1; 식의 복사방법(얕은복사)은 주의해야함
의도치 않은 변경이 일어날 수 있음
▶ Template Literals
// 일반 텍스트
`string text`
// 멀티라인
`string text line 1
string text line 2`
// 플레이스 홀더를 이용한 표현식
`string text ${expression} string text`
▶ 배열/객체 비구조화 (Array/Object Destructuring)
구조분해 할당이라고도 함. 구조를 뜯어버려서 할당한다는 뜻
없는 값을 얻어낼려고 하면 undefined가 나옴
객체의 비구조화(구조분해 할당)
// console.log의 결과를 한번 예측해보세요!
// person 객체 안에 있는 값들이 구조가 해제되어 각각 변수에 할당됩니다.
const person = {
name: '르탄',
age: '21'
}
const { name, age } = person;
console.log(`${name}님, ${age}살이시네요!`);
// 함수의 입력값 또한 각각 구조가 해제되어 각각 변수에 할당됨
// 특히 이 패턴을 많이 쓰기때문에 꼭 기억하기!!
const person = {
name: '르탄',
age: '21'
}
function hello({name, age}) {
console.log(`${name}님, ${age}살이시네요!`);
}
hello(person);
배열의 비구조화(구조분해 할당)
const testArr = [1, 2, 3, 4, 5];
const [val1, val2, val3, val4, val5] = testArr;
console.log(val1);
// 추가 예제
let [name] = ["Tom", 10, "Seoul"];
// let [, age] = ["Tom", 10, "Seoul"];
// let [name, age, region] = ["Tom", 10, "Seoul"];
// let [name, age, region, height] = ["Tom", 10, "Seoul"];
// let [name, age, region, height = 150] = ["Tom", 10, "Seoul"];
▶ 전개 연산자 (Spread Operator) = ...
let [name, ...rest] = ["Tom", 10, "Seoul"];
// name에는 Tom이 되고 rest [10, "Seoul"]로 나머지가 들어있는 배열이 됨
let names = ["Steve", "John"];
let students = ["Tom", ...names, ...names];
// ["Tom", "Steve", "John", "Steve", "John"]
let tom = {
name: "Tom",
age: 10,
region: "Seoul",
};
let steve = {
...tom,
name: "Steve",
};
▶ Arrow Functions
const mysum1 = (x, y) => x + y;
const mysum2 = (x, y) => {x, y};
const mysum3 = (x, y) => ({x: x, y: y}); const mysum4 = (x, y) => {
return {x: x, y: y};
}
const mysum5 = function(x, y) {
return {x: x, y: y};
};
function mysum6(x, y) {
return {x: x, y: y};
}
[ 개발환경 세팅 ]
▶ npm과 yarn
공통적 특징
- 자바스크립트 런타임 환경인 노트(Node.js)의 패키지 관리자
- 애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓음. 그것을 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자
차별적 특징
- NPM
- node.js를 설치할 때 자동으로 생성
- Node Package Manager의 약자
- NPM platform 자체
- YARN
- 2016년에 페이스북에서 개발한 패키지 관리자
- npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋음
- 요약
- 속도 : Yarn wins
- 보안 : Yarn wins(하지만 최근 npm의 보안 업데이트도 크게 향상됐어요)
여기서 dev 패키지 설치를 유의해서 봐야하는데 yarn과 다르게 npm은 --save를 하고 있음
--save를 하는 이유는 모든 프로젝트에는 package.json이라는 파일이 있음
package.json에는 이 프로젝트에 담겨있는 dependencies라는 것이 있음
dependencies는 이 프로젝트가 의존하고 있는 패키기들임
이 의존하고 있는 패키지들을 넣기 위해서는 반드시 --save 명령어를 넣어주어야 함
지속적으로 관리되고 있고 넓은 커뮤니티가 있기 때문에 결론적으로는 둘중 어느것을 사용해도 괜찮음
▶ javascript 런타임 환경의 종류
런타임이란?
프로그래밍 언어가 구동(running)되는 환경(environment)
자바스크립트의 대표적 런타임 환경은 2가지로 볼 수 있음
- 브라우저(ex : Chrome, Microsoft Edge, Firefox,
Internet Explorer) - node환경
즉, javascript 파일을 실행할 수 있는 방법이 2가지가 있다는 것
// 아래 파일을 node 환경에서 실행하면 오류가 발생
// test.js
function printAlert() {
alert('이 함수는 브라우저 환경에서만 실행됩니다.');
}
printAlert();
여기서는 브라우저 환경을 이용
리액트를 이용하여 웹 애플리케이션을 개발하는 우리 과정에서는, 노드 환경이 아닌 브라우저 환경을 이용해 개발을 할것임. 그 중에서도, 웹 개발에 많은 도움을 주는 크롬 브라우저를 이용
[ CRA(Create React App) ]
▶ CRA란 무엇일까?
Create React App : Set up a modern web app by running one command
하나의 명령어를 구동하면서 모던한 웹을 만드는 방법
[출저: 공식문서]
SUPER EASY!
한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법
- React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많음. WebPack, babel, eslint 등.
- 이러한 것들을 신경쓰지 않아도 알아서 촥촥 알아서 해줌 → 보일러플레이트
- 보일러플레이트: 칼럼과 같이 계속 사용되는 텍스트 인쇄판은 부드러운 납 대신 강철로 찍기 시작함. 똑같이 쓰는것을 새로 만들지 말고 계속 찍어낸는 것을 말함
▶ CRA란 무엇일까?
윈도우는 git bash(git을 설치했을때 같이 설치되는 터미널 프로그램) 또는 power shell(윈도우 터미널 프로그램)에
ls #현재 내가 위치하고 있는 곳이 어디인지 확인
cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어감
yarn create react-app week-1 #프로젝트 생성!
▶ CRA로 생성한 프로젝트 실행하기
yarn start # 프로젝트 시작
start 명령어로 프로젝트를 실행할 수 있음
폴더에 보면 public → src → App.js가 있는데 여기가 우리의 플레이 그라운드라고 생각하면 됨
▶ 상대경로 import → 절대경로 지정하기
- jsconfig.json 파일을 만들어줌(반드시 root 경로에 만들어야 함)
- jsconfig.json 파일에 내용 작성
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
src 폴더 밑에 있는 것들은 다 절대경로로 써달라는 의미
'항해99' 카테고리의 다른 글
| 리액트 입문주차 3 (0) | 2023.06.23 |
|---|---|
| 리액트 입문주차 2 (0) | 2023.06.23 |
| JavaScript 문법 종합반 4주차 (0) | 2023.06.20 |
| 띵동코딩 CSS기초_Level1_2 (0) | 2023.06.01 |
| 띵동코딩 CSS기초_Level1_1 (0) | 2023.06.01 |
댓글