이머시브 코스 5주차 모음
0322.월
- 서버 : 클라이언트에게 정보나 서비스를 제공하는 컴퓨터 시스템
http 서버 : http protocol을 통해 통신해서 API를 제공하는 ~~ - API 문서 작성하기
1. 사용법(method, router, etc ...)
2. 기대되는 return data 형식 및 예제
Node debug
--inspect: 크롬 개발자도구에서 확인 가능
ex) node —inspect server/basic-server.js
CommonJS
- 모든 모듈은 자신만의 독립적인 실행영역이 있어야 한다
- 모듈 정의는 전역객체인 exports 객체를 이용한다
- 모듈 사용은 require 함수를 이용한다
module.exports vs exports
- exports는 module.exports 사용을 도와주는 helper
- exports는 module.exports를 참조할뿐, module.exports에 뭔가 있다면 exports는 무시
0323.화
MERN stack(MongoDB, Express, React, Node) : JavaScript 생태계에서 인기있는 프레임워크
Express
npm install express-generator -g: express 생성기- 라우팅 : URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것
app.METHOD(PATH, HANDLER) - express.static : 이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공
app.use(express.static('public'));
Middleware
-
요청 오브젝트(req), 응답 오브젝트(res), 그리고 어플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수
-
미들웨어가 주로 쓰이는 상황
1. 모든 요청에 대해 url이나 메소드를 알고자 할 때
2. POST 요청 등에서 쓰이는 body(payload)를 쉽게 얻어내고자 할 때const bodyParser = require('body-parser') const jsonParser = bodyParser.json() // 생략 app.post('/api/users', jsonParser, function (req, res) { // req.body에는 JSON의 형태로 payload가 담겨져 있습니다. })
- 모든 요청/응답에 CORS헤더를 붙일 때
- 요청 헤더에 사용자 인증 정보가 담겨있는지 확인하고 싶을 때
const cors = require('cors') // 생략 app.use(cors()) // 모든 요청에 대해 CORS 허용 ------- const cors = require('cors') // 생략 // 특정 요청에 대해 CORS 허용 app.get('/products/:id', cors(), function (req, res, next) { res.json({msg: 'This is CORS-enabled for a Single Route'}) })
0324.수
React
- 리액트에서는 컴포넌트 단위로 개발을 함
component : 하나의 의미를 가진 독립적인 단위 모듈
Create React App
- React 프로젝트를 시작하기에 적합한 npm 패키지
npx create-react-app <프로젝트이름>
Component와 Props
- 함수 컴포넌트
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}- 클래스 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}- props : 외부로부터 전달받은 값(읽기 전용)
- 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함
State
- 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
0325.목
Lifecycle(생명주기)
- 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것(componentDidMount)
- 업데이트(componentDidUpdate)
1. props가 바뀔 때
2. 새로운 상태를 가질 때
3. 부모 컴포넌트가 리렌더링될 때 - 언마운트 : 컴포넌트가 화면에서 사라지는 것(componentWillUnmount)
0326.금
React에서의 데이터 흐름
- 상향식(bottom-up)으로 앱을 만들면 테스트가 쉽고, 확장성이 좋음
- React는 단방향 데이터 흐름(One-way data flow)을 따름
- 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 대는 두 자식의 공통의 부모 컴포넌트에 상태를 위치해야 함
State 끌어올리기 (Lifting State Up)
- 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것
🔚
이번주부터 리액트 진도가 시작됐는데 깃허브에 정리한다고 노션과 유알클래스를 소홀히 한것같다..
다음주에 두번째 HA를 보는데 그전에 서버 쪽을 다시 봐야될 것 같다,,
my life is free