Lambda Function (Arrow Function)
es6에 추가된 문법입니다!!
const printHello = () => {
console.log("Hello world");
}와 같이 작성할 수 있습니다.
Lambda Function의 특징
- 함수가 짧아져서 가독성이 좋아진다.
- this가 바인딩 되지 않는다.
- arguments를 바인딩 하지 않는다.
- 생성자로서 사용될 수 없다.
- prototype 속성이 없다.
- yield 사용 불가능하다.
Request와 Response
서버는 사용자의 Request를 받아서 Response를 주는 도구이다.
처음에 http 모듈만 가지고 하나하나 다 설정해서 진행했는데 이렇게 하면 큰 규모인 프로그램은 만들기 어렵다.
그래서 Express Framework를 사용한다.
router를 사용하여 url의 query나 param에 따라서 다른 코드가 실행되게 할 수 있다.
HTTP Method
OPTIONS 웹서버에서 지원되는 메소드의 종류를 확인할 경우 사용.
GET 요청받은 URI의 정보를 검색하여 응답
POST 요청된 자원을 생성한다.
PUT 요청된 자원을 전체 수정한다.
PATCH 요청된 자원의 일부를 수정한다.
DELETE 요청된 자원을 삭제할 것을 요청.
React
리액트는 페이스북에서 제공하는 프론트엔드 라이브러리(거의 프레임워크)이다.
리액트를 사용하지 않아도 웹페이지를 만들 수 있지만 js로만으로 동적인 데이터를 그리기에는 상당히 어렵다. 요즘의 웹은 단순한 정적 페이지가 아니라 사용자와 많은 상호작용을 해야하기 때문에 코드는 점점 복잡해질 수 밖에 없다. 이런 UI를 동적으로 나타내고 많은 상태를 관리하기 쉽게 하고, 코드를 좀 더 관리하기 쉽게 만들어준다.그리고 기본적으로 SPA이기 때문에 브라우저를 새로고침 하지 않고 데이터를 변경할 수 있다.(화면의 깜빡임이 사라짐, 사용자 경험 향상)
그리고 컴포넌트와 state, props를 통해 재사용할 수 있는 코드를 짜기 쉽다.
그리고 Virtual DOM을 사용하면서 가상돔과 참돔을 비교하여 변경 사항이 있을 경우 전체를 새롭게 그리는 것이 아닌 변경된 부분만 참돔에 반영하는 식으로 작업을 한다. 앱이 효율적이고 빠르게 된다.
npm install -g create-react-app
으로 리액트 기본 설정을 해주는 CRA라고 불리는 녀석을 설치할 수 있다.
물론 CRA말고도 Webpack을 통해 하나하나 설정해줄 수도 있다.
저렇게 -g를 통해 글로벌로 설치를 하면 create-react-app을 명령어로 쓸 수 있다.
create-react-app [프로젝트명]
을 통해 리액트 프로젝트를 만들 수 있다. 혹은 -g를 통해 설치를 하지 않고 사용하기 위해서는
npx create-react-app [프로젝트명]
을 사용하면 된다. npx로 설치할 것을 권장한다. 컴퓨터의 용량을 차지하지도 않고 항상 최신버전으로 프로젝트를 만들 수 있기 때문이다.
functional Component
import React from 'react;
const App = () => {
return (
<div>헬로우 월드!</div>
)
}
export default App;Component명은 대문자로 시작해야한다! 그리고 return으로 jsx를 리턴해준다.
export default를 통해 다른 컴포넌트에서도 사용할 수 있게 내보내준다.
sass는 좀더 기능이 많은 css라고 보면 되는데
npm install node-sass sass-loader
를 설치함으로써 사용할 수 있다.
