[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 14

Tech Spec(기술 설명서)

기술적으로 어떻게 구현할지 정리한 내용

Tech Flow

기술적인 Flow는 5단계로 나눌 수 있음.

1. 서비스에 접근한다.
2. 유저가 액션을 하면, 서비스는 액션을 입력한다.
3. 입력받은 데이터를 서버에 저장한다,
4. 현재 데이터를 서버로부터 가져온다.
5. 서버로부터 받은 데이터를 화면에 보여준다.

3가지 레이어

위 단계에선 3가지 레이어가 상호작용 함.

웹/유저/서버 간 상호작용을 인터렉션이라고도 함.

1. 웹 -> 유저: 화면을 보여준다.(렌더링)
2. 웹 <- 유저: 액션 입력받을 수 있도록 한다.
3. 웹 -> 서버: 데이터 조회, 저장, 수정 등을 요청한다.
4. 웹 <- 서버: 요청사항에 대한 응답을 받는다.

이렇게 인터렉션을 기준으로 구분하여 코드 구조화 할 수 있음.

렌더링

렌더링은 크게 2가지 방향으로 나뉨.

 

기본 렌더링(웹 사이트에 처음 방문했을 때)

• html 파일에 문서를 작성
• 최초 파일이 로드될 때, 브라우저에 의해 html을 읽어 화면을 그림.

런타임 때 렌더링(액션을 통해 JS를 실행시켜 화면을 다시 그릴 때)

• 런타임 때 JS로 렌더링을 조작
• 액션이 있을 때 UI를 변경해야 하는 case

1) HTML을 통한 렌더링

HTML

• Hyper Text Marup Language
• 웹 페이지와 웹 사이트의 구조를 구성하는 코드
• 웹을 로드할 때 처음에 로드하는 파일

CSS

• Cascading Style Sheet
• 마크업 언어가 실제로 표시되는 방법을 기술하는 스타일 언어

DOM

• Document Object Model
• HTML 문서와 상호 작용할 수 있는 인터페이스
• Node와 Object로 문서를 표현
• 트리 구조: 부모 - 자식의 관계가 형성

렌더링 과정

1. HTML 마크업 파싱 - DOM 트리 구축
2. CSS 마크업 파싱 - CSSOM 트리 빌드 (CSS Object Model)
3. DOM과 CSSOM을 결합하여 렌더링 트리 형성
4. 렌더트리 배치
5. 렌더트리 페인팅

2) 런타임 때 렌더링 조작

• triggering이 있을 때 UI를 변경
• 런타임 때 JS로 DOM을 조작
• 리렌더링 - 리페인팅, 재배치 발생

1. JS로 DOM노드를 선택
2. 노드 조작 -> 선택한 노드에 새로운 노드 추가, 선택한 노드를 수정 또는 삭제

DON 노드 선택

• document.querySelector(선택자), 선택자 = ".className" or "#idName" 등
• querySelector, querySelectorAll, getElementDyId 등등

노드 조작

• 노드 생성: document.createElement(대그이름)
• 노드 추가: Node.appendChild(Node)

이벤트

유저가 클릭했을 때 함수를 실행시키고 싶다면

• 유저가 클릭을 했다는 사실을 JS에서 catch 해야 함.
• 따라서 유저가 행동하기 전에 미리 요소에 이벤트를 받을 수 있도록 수신기 등록 필요

EventTarget 객체

• 이벤트의 대상이 되는 객체가 EventTarget 객체를 구현, document, window 등
• 이벤트를 수신할 수 있는수신기를 가질 수 있음.(listener)
• EventTarget 객체에 addEventListener("이벤트 유형", 콜백함수)를 통해 이벤트 리스너 등록

.addEventListener("click", function (event) {...});

이벤트 유형

• 유저와의 상호작용, 기본 환경 상태의 변화
• click, focus(input), blur(input)

서버와의 통신

데이터 조작을 위해 클라리언트와 서버와의 통신이 필요

서버 통신에는 물리적인 시간 지연이 발생

• 요청과 동시에 바로 처리 불가능
• 요청 이후 응답이 오기까지 기다렸다가, 응답 신호를 받아야 함.
• 자바스크립트는 이러한 상황에 필요한 처리기가 필요
• 대표적인 패턴: 콜백 패턴, Promise 객체, async - await

Promise 객체

미래의 어떤 시점에 결과를 제공하겠다는 객체

Promise 객체의 3가지 상태

• 대기 pending: 수행 중
• 이행 fulfilled: 수행이 성공적으로 완료
• 거부 rejected: 수행히 실패

메서드

• then: fulfilled 일 경우(성공)
• catch: reject 일 경우(실패)

const promise = new Promise((resolve, reject) => {
    try {
    	resolve('result');
    } catch (error) {
    	reject('failure reason');
    }
});
promise
    .then(() => {...})
    .catch(() => {...})

promise 객체는 비동기 처리방식을 도와주는 객체임.

 

동기: Synchronous

• 직렬적으로 작업을 수행하는 방식
• 요청 이후, 응답을 받아야지 다음 동작이 이루어지는 방식

비동기: Asynchronous

• 병렬적으로 작업을 수행하는 방식
• 요청 이후, 응답 수락 여부와 상관없이 다음 작업이 동작하는 방식

Async - await

• 비동기 처리 패턴 중 하나
• Promise의 단점을 보완, 가독성을 높여줌.
• 함수에 async 키워드를 붙여, Promise 인스턴스를 반환하도록 함.
• await를 Promise 인스턴스 앞에 추가하여, 성공 처리 이후에 다음 함수 명령문이 실행되도록 함,

const promise = new Promise((resolve, reject) => {
    try {
    	resolve('result');
    } catch (err) {
    	reject('failure reason');
    }
});
async () => {
    try {
        const result = await promise; // 성공 처리 대기, then과 유사한 역할
        console.log(result);
        return result;
    } catch (err) {
        console.error(err);
    }
});

 

웹 프론트엔드 개발자의 책임

구현 - 빠르고 생산적으로 기능을 구현

• 자동화) 개발 속도를 낮추는 요인이 있다면 빠르게 개발할 수 있도록 자동화 및 개편
• 책임 분담) 다른 개발 소스의 활용

적용 - 빠르게 서비스에 적용

• 지속적 통합 배포: 개발단계 -> 배포단계
• 개발 단계: 개발을 생산적으로 빠르게 진행
• 배포 단계: 파일을 서버에 업로드
• 사이클이 반복적, 최적화된 상태로 이루어질 수 있도록 해야 함.

협업 - 작업 생산성 올리기

• git 등 형상관리 도구를 이용
• 코드를 빠르게 이해하여, 정확히 수정할 수 있도록 가독성 올리기

읽기 좋은 코드

다른 사람이 구현한 코드여도 빠르게 이해할 수 있도록 읽기 좋은 문서의 형태로 유지 

1. 코드의 구조를 빠르게 파악하도록 돕기 - 관심사 분리 등
2. 코드 생산 줄이기 - 코드 재사용성 높이기, 레거시 코드가 많지 않도록 관리
3. 코드 통일화 - 코드 포맷팅: 일관된 스타일 유지, 네이밍 규칙
4. 컨텍스트 이해를 빠르게 돕기 - 주석