SEO(Search Engine Organization)는 전통적인 HTML 구조가 아니어서 SEO(Search Engine Optimization)에 어려움을 겪음. 이로 인해 검색 엔진 로봇은 SPA 페이지를 찾기 어렵고, 페이지의 전체 콘텐츠를 이해하기 어려워진다. SPA를 사용하는 경우, SEO를 고려하고 검색 엔진이 페이지 콘텐츠를 인식할 수 있도록 추가적인 작업이 필요함.
1) ReactJS
페이스북 개발, 강력한 커뮤니티.
2) VueJS
간결하고 쉬운 학습.
꾸준한 성장, 상대적으로 낮은 점유율.
3) AngularJS
안정성과 강력함.
학습 어려워 낮은 시장 점유율.
리액트가 채택한 개발방법
컴포넌트는 벽돌이다라고 생각하기
Header 컴포넌트, Body컴포넌트, Footer컴포넌트
변경사항만 바꿔주는 것을 렌더링이라고 함
과거에는 변수를 선언할 때 모두 var 키워드를 사용했음.
그러나 현재는 const와 let이 등장하여 변수 선언 방식이 진화됨.
let (변수):
재할당이 가능
const (상수):
재할당이 불가능
내부 속성값은 수정 가능
☞ 둘 다 block level scope를 가지고 있어서 블록({}) 내에서 선언된 변수는 해당 블록 내에서만 유효함
if (1 == 1) {
var a = 3;
// const a = 3;
}
console.log(a); //여기서도 3이 출력 되기 때문
const person = {
name : 'nana',
age : 30,
toDoList : function(){} // 혹은 () =>
}
const name = 'nana';
const person = {
name,
age : 30,
toDoList : function(){} // 혹은 () =>
}
const 객체1 = { 값1: 10 };
// 얕은 복사
const 객체2 = 객체1;
객체1.값1 += 1;
console.log('객체1:', 객체1); // 결과 : 객체1: { 값1: 11 }
console.log('객체2:', 객체2); // 결과 : 객체2: { 값1: 11 }
※ 참조 : 변수나 값이 메모리 상의 어떤 위치를 가리키는 것을 의미
// 깊은 복사
const 객체3 = JSON.parse(JSON.stringify(객체1));
객체1.값1 += 1;
console.log(`객체3:`, 객체3); // 결과 : 객체3: { 값1: 10 }
const Age = "20";
console.log(`저는 ${Age}입니다.`);
const person = {
name: '나나',
age: '20'
};
const { name, age } = person; // 구조분해할당
console.log(`${name}님, ${age}살이시네요!`);
☞ 구조분해할당은 'name' 변수에는 'person' 객체의 'name' 속성 값이, 'age' 변수에는 'person' 객체의 'age' 속성 값이 할당됨
const { name, age } = person;
이런식으로 직관적으로 가능함const person = {
name: '나나',
age: '20'
}
// 함수 정의 시 객체를 매개변수로 받고, 내부에서 비구조화 할당
function hello({ name, age }) {
console.log(`${name}님, ${age}살이시네요!`);
}
// 함수 호출 시 객체를 전달
hello(person);
배열에서도 객체의 구조분해할당처럼 가능함
const number = [5, 10, 15, 17, 21];
const [one, two, three, four, five, six] = number;
console.log("one", one); // one 5
console.log("two", two); // two 10
console.log("three", three); // three 15
console.log("four", four); // four 17
console.log("five", five); // five 21
console.log("six", five); // six underfined
...을 의미함
배열이나 객체의 요소를 분해하거나 합칠 때 사용함
let [name, ...rest] = ["Nana", 20, "Seoul"];
console.log(name); // 출력: 'Nana'
console.log(rest); // 출력: [20, 'Seoul']
왜 이게 필요한가 싶었다. 사실 자바스크립트문법반 강의는 이해가 잘 안되었었는데, 다급하지않고 여유로운 마음을 좀 가지니 이해력이 많이 상승하는 것 같다.
let names = ["Steve", "John"];
let students = ["Tom", names];
console.log(students);
☞ 출력값이 ['Tom', 'Steve', 'John' ]이 아닌 [ 'Tom', [ 'Steve', 'John' ] ]이 나와서 원하는 대로 ['Tom', 'Steve', 'John' ] 만들기 위해서 필요함
[해결방안]
let names = ["Steve", "John"];
let students = ["Tom", names];
console.log(students);
☞ ...을 사용하면 해결 됨
let tom = {
name: "Tom",
age: 10,
region: "Seoul",
};
let steve = {
...tom,
name: "Steve",
};
console.log(tom);
console.log(steve);
☞ tom의 정보를 복사하고 name을 steve로 바꿨음
function 함수1(x, y) {
return x + y;
}
const 함수2 = (x) => x + 3;
const 함수3 = (x, y) => {
return x + y;
};
console.log(함수1(1, 2));
console.log(함수2(1));
console.log(함수3(1, 2));
☞ function(){} 대신 () => {}로 줄여 쓸수 있음
크롬 브라우저 설치
https://www.google.co.kr/chrome
코드편집기 VS CODE 설치
https://code.visualstudio.com
Node 설치
https://nodejs.org/en/download
npm install -g yarn
☞ -g는 global을 의미함 → 내 컴퓨터 내에서 사용하겠다는 뜻
yarn -v
☞ 1.22.19 이런식으로 현재 버전이 출력됨
yarn add 패키지이름
☞ npm의 경우 npm install 패키지이름 으로 설치함
NPM 과 Yarn의 공통점
자바스크립트 런타임 환경인 Node.js의 패키지 관리자로 온라인 데이터베이스에서 패키지를 쉽게 관리.
NPM 과 Yarn의 차이점
1) npm
Node.js 설치 시 자동 생성.
Node Package Manager의 약자.
npm 플랫폼 자체.
2) yarn
2016년 페이스북에서 개발.
npm과 호환성 우수, 속도와 안정성에서 월등히 좋음.
속도: Yarn 우세.
보안: Yarn 우세 (최근 npm의 보안 업데이트가 크게 향상됨).
프로그래밍 언어가 구동되는 환경을 말함
1) 브라우저 환경
☞ 리액트는 브라우저 환경에서 개발을 진행함
yarn create react-app 프로젝트이름
☞ 파워쉘에 입력하면 알아서 설치해준다 (짱신기)
cd 프로젝트이름
yarn start
☞ 해당 폴더로 이동해서 yarn start라고 입력하면 구동이 된다.
Src 폴더 안의 App.js 파일의 코드에 코드를 수정하면 새로고침 할 필요없이 즉시 적용이 된다.
라이브 서버 없이 되는 것이 신기했음!
public폴더의 index.html에는 root라는 id를 가진 div 박스가 하나 존재하는데 이걸 index.js에서 리액트 관련으로 렌더링 해준다. 사실상 결론은 코드를 작성할만한 곳은 App.js라고 보면 된다.
☞ 결론 : App.js에서 코드수정을 하는 것이 리액트 개발인 것!
1) jsconfig.js 파일을 root에 만들기
2) 아래 코드 입력
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
☞ 장점 : Src에 있는 모든 파일들의 경로를 절대경로로 설정하면 번거롭게 ./././이 필요없음
그렇다면, import "./App.css"; 말고 import "App.css";이 가능해진다는 소리임
컴포넌트는 함수형과 클래스형이 있는데 함수형을 주로 쓰게됨
컴포넌트는 내보내기 들여오기가 가능함
컴포넌트 내부에는 JS를 쓸 수 있는 공간이 있다.
컴포넌트의 이름의 시작은 대문자여야함. (소문자는 오류남)
Return에는 html이 아닌 JSX(JS + XML)문법을 사용함
Return에 JS를 쓰고 싶다면 {}로 사용함
1) 버튼에 함수를 사용할 수 있음
import React from "react";
function App() {
// <---- 자바스크립트 영역 ---->
return (
/* <---- HTML/JSX 영역 ---->*/
<div
style={{
height: "100vh",
display: " flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
{/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
<p>이것은 내가 만든 APP 컴포넌트입니다.</p>
<button
onClick={function () {
alert("클릭!");
}}
>
클릭!
</button>
</div>
);
}
export default App;
2) 변수화 시켜서도 가능함
import React from "react";
function App() {
// <---- 자바스크립트 영역 ---->
function onClickButtonHandler() {
alert("클릭");
}
return (
/* <---- HTML/JSX 영역 ---->*/
<div
style={{
height: "100vh",
display: " flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
{/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
<p>이것은 내가 만든 APP 컴포넌트입니다.</p>
<button onClick={onClickButtonHandler}>클릭!</button>
</div>
);
}
export default App;
☞ html과 다르게 {}를 사용함
부모 컴포넌트 : 다른 컴포넌트를 품는 컴포넌트
자식 컴포넌트 : 다른 컴포넌트 안에서 품어지는 컴포넌트
//자식 컴포넌트
function Child() {
return <div>나는 자식입니다.</div>;
}
//부모 컴포넌트
function App() {
return <Child />;
}
☞ function Child() 이렇게 분리하는 것이 '컴포넌트화'
function Child() {
return <div>나는 자녀입니다.</div>;
}
function App() {
return (
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
)
☞ 이렇게 하면 JSX 식에는 부모요소가 하나 있어야 한다고 함
function Child() {
return <div>나는 자녀입니다.</div>;
}
function App() {
return (
<div>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
</div>
);
☞ 웹상에서 부모 div가 존재함
function Child() {
return <div>나는 자녀입니다.</div>;
}
function App() {
return (
<>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
<div>나는 자녀입니다.</div>
</>
);
☞ 웹상에서 자식 div 들만 출력 됨
function Child() {
return <div>나는 자녀입니다.</div>;
}
function App() {
return (
<div>
<Child />
<Child />
<Child />
<Child />
</div>
);
function Child() {
return <div>나는 자녀입니다.</div>;
}
function Mom() {
return <Child />;
}
function GrandMom() {
return <Mom />;
}
function App() {
return <GrandMom />;
☞ 최종적으로 나는 자녀입니다가 출력됨
리액트에서는 딱 하나의 html만 존재함 (public/index.html)
그럼 리액트에서 어떻게 뷰를 그릴까요? App.js 파일에서 보이듯,
JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그림
vs code 익스텐션에서 'react snippet'이라고 검색 후 설치
사용법
rfc 혹은 rfec 입력하면 아래와 같은 기본 폼 나옴
import React from 'react'
export default function App() {
return (
<div>App</div>
)
}
1) 태그는 꼭 닫아주기
2) 최상위 태그 하나만 있어야함
3) 아래 코드처럼 삼항연산자 쓸수 있음
import React from "react";
export default function App() {
const number = 1;
return (
<div>
<p>안녕하세요</p>
{/* 이것은 주석 */}
<p>
{number > 10 ? number + "은 10보다 크다" : number + "은 10보다 작다"}
</p>
</div>
);
}
4) Class 대신 ClassName
<div className="App">
☞ 이렇게 사용해야 적용이 됨
5) 스타일은 html과 약간 다르게 사용됨
//1번째 방법
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
//2번째 방법
function App() {
const styles = {
color: 'orange',
fontSize: '20px'
};
return (
<div className="App">
<p style={styles}>orange</p>
</div>
);
}
오늘의 한줄평 : 어려웠던 심화 부분을 이해해서 좋았고, 리액트로 만드는건 신기하다!!!