[클라우딩 어플리케이션 엔지니어링 TIL] 240111 - JS 실습

Intro

---

오늘은 직접 프로젝트 세팅하는 방법에 대해 학습했다.

json-server를 새롭게 알게되었고 json-server로 앞으로 간단하게 REST API 통신을 구현한 페이지를 만들어 볼 수 있을 것 같다.

그리고 sass는 한번도 사용해 본 적이 없는데 앞으로 실습하며 써볼 수 있어 기대가 된다.

 

 

 

오늘 학습한 내용

: Teck Flow, 프로젝트 세팅

---

Tech Flow

어제 공부한 User Flow와 상세 Flow에 이어 Teck Flow에 대해 학습했다.

기술적으로 어떻게 구현해야 하는 지에 대한 플로우를 작성해 보는 것이다.

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

간단한 계산기를 구현하기 위해서 필요한 단계를 생각해보고, 각각의 단계에서 구현 목표와 그에 따른 필요 사항들을 생각해서 tech flow를 작성한다.

 

예를 들면,

1. 서비스에 접근한다.
   • 구현 목표: 유저가 브라우저에서 화면을 확인할 수 있도록 한다.
   • 필요: 유저가 브라우저에 접근한다 ➡️ 유저가 확인할 수 있는 화면이 그려진다.
   • Tech Flow: 브라우저를 사용해 서비스 URL 접속 ➡️ 서비스에 필요한 파일을 로드 ➡️ 로드한 파일들을 활용하여 화면을 그린다.
2. 유저가 액션을 하면, 서비스는 액션을 입력 받는다.
   • 구현 목표: 유저의 액션을 서비스에 입력받는다.
   • 필요: 유저가 할 수 있는 UI ➡️ 유저가 액션을 입력받을 수 있도록 준비해야 함
   • Tech Flow: Input UI에 키보드로 숫자를 입력한다. ➡️ input에 등록된 이벤트가 실행됨 ➡️ 입력받은 데이터를 브라우저에서 확인할 수 있다.
3. 입력받은 데이터를 서버에 저장한다.
   • 구현 목표: 유저에게 입력받은 데이터를 서버에 저장한다.
   • 필요: 서버, 서버와 브라우저 간의 통신 (API)
   • Tech Flow: 유저가 버튼을 클릭하면 ➡️ 버튼에 등록된 서버 전송 이벤트가 발생 ➡️ API를 통해 서버에 데이터 저장 요청 ➡️ 서버는 요청이 완료되면 브라우저에게 알려줌
4. 현재 자산을 서버로부터 받아온다.
   • 구현 목표: 현재 자산 데이터를 서버로부터 받아온다.
   • 필요: 서버, 서버와 브라우저 간의 통신 (API)
   • Tech Flow: API를 통헤 서버에 데이터 조회 요청 ➡️ 서버에서 데이터 응답
5. 서버로부터 받은 자산 데이터를 화면에 보여준다
   • 구현 목표: 서버로부터 응답받은 데이터를 화면에 보여준다.
   • 필요: 서버로부터 응답받은 데이터 ➡️ 응답 데이터를 유저가 보기 쉽게 처리하는 로직 ➡️ 유저가 확인할 수 있는 화면 그리기
   • Tech Flow: 응답 데이터를 유저가 보기 쉽게 처리한다. ➡️ 처리된 데이터를 화면에 다시 보여준다.

 

웹/유저/서버 간 인터렉션

위의 내용 구현을 위해 웹/유저/서버는 서로 상호작용을 한다.

• 웹 ➡️ 유저: 화면을 보여준다. (렌더링)
• 웹 ⬅️ 유저: 액션 입력 받을 수 있도록
• 웹 ➡️ 서버: 데이터 조회/저장/수정 요청
• 웹 ⬅️ 서버: 요청사항에 대한 응답을 받음

 

렌더링

렌더링에는 HTML 문서를 내려 받아 브라우저가 HTML을 읽어 화면에 그리는 기본 렌더링과 자바스크립트의 조작으로 다시 렌더링하는 유형이 있다.

• 기본 렌더링
  • HTML 파일에 문서 작성
  • 최초 파일이 로드될 때, 브라우저에 의해 HTML을 읽어 화면에 그림
• 런타임 때 렌더링
  • 런타임 시 자바스크립트로 렌더링을 조작
  • 액션이 있을 때 UI를 변경해야 하는 케이스

 

1. html을 통한 렌더링
   • HTML: Hyper Text Markup Language
     • 웹 페이지와 웹 사이트의 구조를 구성하는 코드
     • 웹을 로드할 때 처음에 로드하는 파일
   • CSS: Cascading Style Sheet
     • 마크업 언어가 실제로 표시되는 방법을 기술하는 스타일 언어
   • DOM: Document Object Model
     
     • HTML문서와 상호작용할 수 있는 인터페이스 (JS로 DOM에 접근할 수 있음)
     • node와 Object로 문서를 표현
     • 부모/자식 구조의 트리구조
   • 렌더링 과정
     1. html 마크업 파싱 - DOM 트리 구축
     2. CSS 마크업 파싱 - CSSOM 트리 빌드
     3. DOM과 CSSOM을 결합해 렌더링 트리 형성
     4. 렌더트리 배치
     5. 렌더트리 페인팅
2. 런타임 때 렌더링 조작
   • Triggering이 있을 때 UI를 변경해야 하는 케이스
   • 런타임 때 자바스크립트로 DOM을 조작하여 렌더링한다. (document.querySelector, document.createElement, Node.appendChild(Node), ...)
   • 리렌더링 - 리페인팅, 재배치 발생

 

 

이벤트

유저가 이벤트를 발생했을 때 함수를 실행시키고 싶다면?
➡️ 사실을 자바스크립트가 catch해야 함 == 이벤트 catch가 필요

✅ 유저가 행동하기 전에 수신기 등록이 필요 ✅

• EventTarget 객체
  • 이벤트의 대상이 되는 객체가 EventTarget 객체 구현
  • 이벤트를 수신할 수 있는 수신기
• 이벤트 유형
  • 유저와의 상호작용, 기본 환경 상태의 변화
  • click, focus, blur, ...

 

 

서버간 통신

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

서버와의 통신에는 물리적인 시간 지연이 발생하기 때문에 요청과 동시에 바로 처리할 순 없다.

그러므로, 요청 이후 응답이 오기까지 기다렸다가 응답 신호를 받아야 한다. 대표적인 방법으로,

• 콜백 패턴
• Promise 객체 (ES6)
• async - await

을 사용해 응답을 기다렸다가 응답 신호를 받을 수 있다.

 

Promise

• 대기 Pending: 수행 중
• 이행 fulfilled: 수행 성공 ➡️ then
• 거부 rejected: 수행 실패 ➡️ catch

Promise는 위의 상태 중 하나의 상태를 갖는다.

 

동기와 비동기

• 동기 (Synchronous)
  • 직렬적으로 작업을 수행하는 방식
  • 요청 이후, 응답을 받아야지 다음 동작이 이뤄지는 방식
• 비동기 (Asynchronous)
  • 병렬적으로 작업을 수행하는 방식
  • 요청 이후, 응답 수락 여부와 상관없이 다음 작업이 동작하는 방식

 

async - await

비동기 처리 패턴 중 하나로 가독성이 좋지 않은 Promise의 단점을 보완한다.

함수에 async 키워드를 붙여 Promise 인스턴스를 반환하도록 한다.

await를 Promise 인스턴스 앞에 추가해 성공 처리 이후에 다음 함수 명령문이 실행되도록 한다.

 

 

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

프로젝트에서 웹 프론트엔드 개발자가 가져야할 책임에 대해 학습했다.

• 구현에선, 빠르고 생산적으로 기능을 구현해야 한다.
  • 자동화: 개발 속도를 낮춘다면 빠르게 개발할 수 있도록 자동화 및 개편 필요
  • 책임 분담: 다른 개발 소스 활용
  • 구현을 도와주는 도구로는 npm, sass, prettier 등이 있다.
• 빠르게 서비스에 적용해야 한다.
  • 지속적 통합 배포: 개발단계 ➡️ 배포단계
    • 개발단계) 개발을 생산적으로 빠르게 진행해야 함
    • 배포단계) 파일을 서버에 업로드
    • 사이클이 반복적, 최적화된 상태로 이루어질 수 있도록 셋팅이 필요
    • 배포를 도와주는 도구로는 babel, vite 등이 있다.

 

NPM

NPM 노드 패키지 메니저이며 다른 사람들이 만든 코드 패키지를 사용할 수 있어 프로젝트 작업의 시간을 단축할 수 있다.

패키지들을 설치할 경우 관리가 필요한데 NPM이 버전 관리, 코드 종속성 관리 등을 담당하는 역할을 한다.

 

스타일링용 pre-processor (전처리기)

• Sass: CSS 전처리기로 CSS 한계와 단점을 보완하기 위해 만들어진 전처리기이다. 가독성을 높이고 코드의 재사용에 유리한 CSS 확장 언어이다.

 

번들러

번들러는 의존성 있는 모듈 코드를 하나의 파일로 만들어주는 도구이다.

개발을 하다보면 편의를 위해 프레임워크 및 라이브러리를 사용을 하는데 브라우저에선 코드의 용량을 최적화하거나, 리소스 최적화, 캐싱, 버전 대응 등이 필요하기 때문에 작업된 코드를 브라우저에 최적화 될 수 있도록 정리하는 중간 전처리기가 필요하다.

이러한 중간 전처리기로 번들러를 사용하여 모듈로 된 여러 파일들을 합쳐준다.

번들러를 위한 도구로는 webpack, vite, percel 등이 있다.

 

 

협업을 위한 셋팅

프로젝트는 대부분 여러명이서 개발하는 것이기 때문에 작업의 생산성을 올리기 위해 git과 같은 버전관리 시스템을 사용한다.

• git
  • branch: 유저 간의 작업이 독립적으로 분리되어 동시에 작업할 수 있음
  • merge: 작업이 완료되면 코드를 병합하는 과정이 필요
  • 파일 수정이 이루어지면, 해당 시점의 수정사항들을 스냅샷하여 저장하기 위해 (git add 파일명) 메시지와 함께 로그를 남긴다. (git commit -m "메시지")
• github (git 저장소 호스팅 웹서비스)
  • 파일 관리 환경
    • 내 컴퓨터에서 관리: local
    • 원격 저장소에서 관리: remote
  • git에서 컷밋한 내역을 원격 저장소에 올려 관리한다.
    • git remote add {{ 원격 이름 }} {{ 원격 저장소 url }}
    • git push {{ 원격 이름 }} 브랜치명

또한, 함께 작업 시 코드를 빠르게 이해하여 정확히 수정할 수 있도록 노력해야 한다.

• 코드 포맷팅, 네이밍 규칙 등을 정해 코드를 통일화하여 코드 가독성을 올린다.
• 읽기 좋은 문서 형태로 유지해야 한다. ➡️ testable module...
• 코드를 빠르게 이해할 수 있도록 필요하면 주석을 사용한다.

 

 

프로젝트 셋팅

• npm init ➡️ package.json 생성
• vite 설치

Vite

• vite에서 CSS pre-processor 사용

https://ko.vitejs.dev/guide/features.html#css-pre-processors

Vite

• JSON server: json 파일을 사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴

npm i json-server

 

참고) 현재 설치 시 alpha버전으로 설치가 되어서 기본 버전으로 설치하려면 원하는 버전 명을 뒤에 붙여 설치해야 함

npm i json-server@0.X.X

 

 

 

 

마무리

---

오늘은 프로젝트 작업을 위한 프로젝트 셋팅을 마무리 했다. 프로젝트 셋팅도 꽤 오래 걸리고 어려운 일이다.

특히, json server가 예제대로 동작하지 않아서 헤메다가 버전 문제인 걸 알아냈다.

문서에서 ⚠️이 버전은 알파버전 입니다!라고 맨 첨부터 경고를 줬는데... 영어 문서라 눈이 침침했나보다.

작성된 문서를 잘 읽는 습관을 들여야겠다.