CH01
01. 크롤링 개념
What is Crawler ?
조직적, 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램 From 위키백과
seeds
위키피디아, 네이버, 다음을 시드로 정할 수도 있다.
웹 크롤러 vs 웹 스크레퍼
웹 스크레핑: 웹사이트에서 원하는 정보를 자동으로 추출 & 수집하는 프로그램
02. robots.txt와 사이트 크롤링 정책
03. Axios Cheerio 사용해보기
04. 렌더링 지연 알아보기
05. Puppeteer 살펴보기
06. Puppeteer를 사용해 크롤링하기
CH02
01. 검색 결과로 나타난 게시글 데이터 획득하기
02. 무한 스크롤을 구현하기
03. API를 통한 무한 스크롤 구현하기
04. 획득한 데이터를 JSON 파일로 저장하기
CH03
01. 현대적 프론트엔드 개발 방법
React.js
프론트엔드 라이브러리
현대적 프론트엔드 개발 방법
페이스북, 디스코드, 인스타그램, 트위터
트위터는 리액트를 사용한다.
특정 부분만 바뀌며 애플리케이션처럼 동작한다.
디스코드도 리액트로 제작되었다.
최근에는 웹 사이트라는 말 대신 웹 애플리케이션이라고 부른다.
동작이 마치 애플리케이션 처럼 동작한다.
Progressive Web App (PWA) 라는 게 있다.
앱 처럼 설치해서 웹 사이트를 이용한다.
웹 애플리케이션의 이전에는 MVC (Model - View - Controller) 로 만들었다.
- Model: 사용되는 데이터와 데이터를 처리하는 모델
- View: 화면에 보여지는 부분
- Controller: 사용자의 행동 (이벤트) 를 처리하는 컨트롤러
모든 패턴에는 문제점과 단점이 있다.
MVC 는 모델과 뷰의 의존성에는 문제점이 있다.
대형화된 서비스가 될수록 개발자가 고통스럽게 된다.
02. 리액트란 무엇인가
페이스북
Virtual DOM
모든 HTML 을 수정하지 말고 일부만 수정하기
이전 HTML 과 바뀌고 난 후의 HTML 을 계산한다.
공통되는 부분은 바뀔 필요가 없고 바뀌어야 하는 부분만 바뀐다.
이게 가상 돔이다.
Components: 직관적인 UI 구성요소를 기준으로 제작 및 코드 재사용
State Manage: 컴포넌트 단위 데이터 관리 및 앱 전체 수준에서 공통 데이터를 상태로 관리
나중에 배울 Redux 로 글로벌 수준의 데이터 관리를 하게 된다.
Virtual DOM: 부드럽고 빠른 페이지 전환과 연속적인 사용자 경험
SSR (Server side rendering)
03. CDN으로 리액트 사용하기
리액트 홈페이지: https://ko.reactjs.org/
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
CDN 링크: https://ko.reactjs.org/docs/cdn-links.html
아래 버전을 사용하자.
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>#react-root 라고 입력하면 id 가 react-root 인 div 가 생긴다.
리액트를 사용할 때는 꼭 두 개가 필요하다.
옛날에는 클래스로 컴포넌트를 만들었다.
이 코드는 안 쓰지만 맨 처음 배울 때 알아야 한다.
document 는 브라우저에서 전역으로 쓸 수 있는 객체이다.
쿼리 셀렉터는 # 을 넣고 쓴다.
- index.html
<html>
<body>
<div id="react-root">
<button></button>
</div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>- index.js
// import React from "react"
// import ReactDOM from "react-dom"
// 함수형 컴포넌트
function helloWorldButton () {
return React.createElement(
"button",
{onClick: () => {
}},
"Hello world!"
)
}
const rootContainer = document.getElementById('react-root')
ReactDOM.render(React.createElement(helloWorldButton), rootContainer)이제 index.html 파일을 만들어보자.
함수에서는 훅을 쓴다.
ES6 문법에는 비구조화 할당이라는 게 있다.
function returnOneThreeArray() {
return [1, 3]
}
const [a, b] = returnOneThreeArray()
const [a, b] = [1, 3]클릭할 때 hello world 가 bye world 로 바뀌게 해보자.
- index.js
// import React from "react"
// import ReactDOM from "react-dom"
// 함수형 컴포넌트
function helloWorldButton () {
// 비 구조화 할당
const [isClick, setClickState] = React.useState(false)
const text = isClick ? "Bye world!" : "Hello world!"
return React.createElement(
"button",
{onClick: () => setClickState(!isClick)},
text
)
}
const rootContainer = document.getElementById('react-root')
ReactDOM.render(React.createElement(helloWorldButton), rootContainer)return 의 onClick 의 c 는 꼭 대문자로 쓰도록 하자 !
04. 바벨과 JSX
JSX
리액트에 JSX 로 검색하자.
JSX 소개: https://ko.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper
Babel & JSX
리액트를 사용하기 위해 반드시 알아야 할 개념
자바스크립트 컴파일러이다.
ES6 를 ES5 로 바꿔주는 게 바벨이다.
자바스크립트의 신형 문법을 옛날 문법으로 바꿔준다.
코드펜: https://codepen.io/
설정을 눌러 CDN 을 추가해주자.
바벨을 이용하면 return 을 다음과 같이 할 수 있다.
// import React from "react"
// import ReactDOM from "react-dom"
// 함수형 컴포넌트
function helloWorldButton () {
// 비 구조화 할당
const [isClick, setClickState] = React.useState(false)
const text = isClick ? "Bye world!" : "Hello world!"
return (
<button>
<div>
<span>Hello world</span>
</div>
</button>
)
}
const rootContainer = document.getElementById('react-root')
ReactDOM.render(React.createElement(helloWorldButton), rootContainer)누르면 버튼이 바뀌게 해보자.
// import React from "react"
// import ReactDOM from "react-dom"
// 함수형 컴포넌트
function helloWorldButton () {
// 비 구조화 할당
const [isClick, setClickState] = React.useState(false)
const text = isClick ? "Bye world!" : "Hello world!"
return (
<button onClick={() => setClickState(!isClick)}>
{text}
</button>
)
}
const rootContainer = document.getElementById('react-root')
ReactDOM.render(React.createElement(helloWorldButton), rootContainer)05. 웹팩(모듈 번들러)
Webpack.js
a static module bundler for modern JavaScript applications
바벨, 웹팩은 웹 개발의 기본이다.
웹팩 홈페이지: https://webpack.js.org/
바벨, 웹팩 같은거 하나하나 설정하면 리액트 개발은 언제하죠 ?
create-react-app 문서: https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app
반복적인 작업을 빠르게 해주는 작업을 보일러 플레이트라고 한다.
npx create-react-app my-app
cd my-app
npm start하루이틀이면 바벨, 웹팩 설정하는 것을 공부할 수 있다.
리액트 개발자가 바벨, JSX, 웹팩을 모른다면 면접관이 뽑고 싶을까?
06. create-react-app 사용하기
npx create-react-app project1컴퓨터 사양에 따라 2~3분이 걸린다.
yarn 도 모듈을 관리할 수 있다.
- yarn start
- yarn build
- yarn test
- yarn eject
react 는 디폴트가 yarn 이다.
yarn start노드환경에서 웹서버가 작동하는 것이다.
App.js
index.js 가 엔트리 포인트이다.
<React.StrictMode> 엄격모드이다.
public 디렉토리에는 정적 asset 들이 들어간다.
public/index.html 에 #root 의 div 태그가 있다.
이것을 바꾼다면 index.js 에서도 root 를 바꿔준다.
favicon
ico 로 끝난다. (icon)
public/index.html 에서 호출하고 있다.
manifest.json 는 웹사이트 기본 정보를 넣어놓은 것이다.
favicon generator 에서 파비콘을 만들 수 있다.
robots.txt 는 크롤링에서 사용된다.
index.css 를 App.js 에서 import 로 호출하고 있다.
index.js 와 App.js 등이 중요하다.
src/App.js 를 변경하면 알아서 리로드가 된다.
07. create-react-app 빌드하기
08. 빌드 환경 설정 변경하기
09. 컴포넌트 만들고 가져오기
10. 컴포넌트의 상태(states)
11. 컴포넌트의 속성(props)
12. 컴포넌트 스타일링 1
13. 컴포넌트 스타일링 2
14. 함수형 컴포넌트와 클래스형 컴포넌트
15. 조건부 렌더링
16. input 상태 관리와 useRef
17. 배열을 사용해 할 일 목록 만들기
18. useEffect와 마운트,언마운트
19. 리액트 라우터로 페이지 구분하기
20. 글로벌 상태관리와 리덕스
21. 리덕스 프로젝트 준비하기
22. 리덕스 액션, 스토어, 리듀서 만들기
23. Provider로 스토어 연동하기
24. 리덕스와 컴포넌트 연결하기 (1)
25. 리덕스와 컴포넌트 연결하기 (2)
CH04
'Stacks > 프론트엔드' 카테고리의 다른 글
| 리액트 독학 (0) | 2022.10.04 |
|---|---|
| HTML&CSS boost course (0) | 2022.03.10 |
| 자바스크립트 boost course (0) | 2022.03.10 |
