프로그래머스스쿨 실무와 가까워지는 Node.js 백엔드 개발(feat.TypeScript) 스터디 에서 수강하며 정리한 글 입니다. 문제가 있을 시, 삭제 하겠습니다.
3주차
실습 전
MVC, MVP, MVVM 패턴
php, jsp 혹은 2010년 node.js로 웹을 다루던 때는 웹 어플리케이션이 데이터베이스와 직접 바라보고 있었다. 지금처럼 WEB API를 분리하여 뷰만 담당하는 서버가 별도로 있지 않았는데,
예를 들어 브라우저에서 /index.html 요청이 보내면 서버는 필요에 따라 DB에서 데이터도 조회하여 가공한 뒤 html과 css, js를 적절히 만들어서 응답했다.
https://github.com/jiwon709/project/blob/master/%E3%82%A2%E3%82%AF%E3%82%A2/src/main/webapp/WEB-INF/views/upload/drug_img.jsp
( 예전에 spring 프로젝트 할 때 작성했던 jsp 화면 .. 인데 나중에 기회되면 리팩토링 해봐야겠다. 안할 것 같긴 하다 )
지금은 서버에서 클라이언트와 관련된 코드는 사라졌다.
<div id='root' /> 가 들어간 index.html 하나에 다 처리.
그 조차도 nginx가 대신하기도 하고 BFF(Backend for Frontend) 서버를 별도로 만들어서 처리하기도 한다.
https://github.com/jiwon709/hello_react/blob/master/public/index.html
( React에서 index.html안의 div id로 렌더링 시킨다. )
뷰가 사라진 오늘날은 서버로 들어온 요청에 따라 데이터를 변경하는 일을 주로 하는데,
이때 데이터를 정의하고 다루면 모델(Model)
모델에게 변경을 요청하고 변경사항을 알리는게 컨트롤러(Controller)
관계에서 나오지도 않는 서비스(Service)는 비지니스 로직을 담는다.
컨트롤러에 비지니스 로직을 모두 넣어도 무방하나, 로직이 복잡해진다.
실습
실습에서 기존에 사용하던 PUT, GET 메서드를 컨트롤러에 옮기고 HTTP 메서드에 따라 컨트롤러 내 함수를 하나씩 연결했다.
실습 중에 등장하는 JSCUpdateEvent나 JSCFindEvent는 JSON schema(데이터 구조)로 데이터가 어떤 JSON 형식으로 이루어졌는지 볼 수 있고, 응답을 담은 JSON을 메모리에 저장하여 애플리케이션이 종료되지 않는 한 데이터 연결을 한 번만 하고 그 안에서 해결할 수 있기 때문에 데이터 연결 비용을 줄일 수 있는 하나의 방법(?)으로 쓰였다.
트랜잭션
1개 이상의 문서에 대해 읽기, 쓰기 작업의 직합
https://firebase.google.com/docs/firestore/manage-data/transactions#node.js
// Initialize document
const cityRef = db.collection('cities').doc('SF');
await cityRef.set({
name: 'San Francisco',
state: 'CA',
country: 'USA',
capital: false,
population: 860000
});
try {
await db.runTransaction(async (t) => {
const doc = await t.get(cityRef);
// Add one person to the city population.
// Note: this could be done without a transaction
// by updating the population using FieldValue.increment()
const newPopulation = doc.data().population + 1;
t.update(cityRef, {population: newPopulation});
});
console.log('Transaction success!');
} catch (e) {
console.log('Transaction failure:', e);
}index.jsrunTransaction 안에 감싸진 코드를 보면,
문서를 가져온 뒤 기존 데이터에 +1 해서 update처리를 하고 있다.
읽기와 쓰기가 함께 이루어진 것.
Axios
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.
브라우저에서 서버와 통신을 하려면 AJAX를 이용하는데, 이때 가장 중요한건 XMLHTTPRequest.
하지만 이를 직접 사용해서 통신하는 경우는 드물다.
Axios는 브라우저와 Node.js 모두에서 사용 가능.
2곳 모두에서 API요청을 해야만 하는 상황이라면 하나의 코드로 양쪽 모두 사용 가능하여 편리하다. async/await 활용도 가능하다.
