클라우딩 어플리케이션 엔지니어링 TIL Day 12 - 가계부 구현하기 요구사항 분석 및 기본 세팅

이번 강의부터는 실제로 서비스를 만들어본다!

유저와 서비스 간의 Interaction을 위해서 어떤 개념을 알아야 하며, 그 이외에도 서비스를 잘 관리하는 법을 배우게 된다

가계부 서비스를 구현하며 요구사항을 분석하고 User Flow도 정리해보며 지금까지 배운 개념을 실제로 적용해보고 총정리할 수 있는 시간이 될 것이다

단순히 이론을 아는 것에서 그치지 않고 실제 서비스를 만들어보면서 개발 역량을 기를 수 있도록 하겠다!

이번 강의는 서비스의 기본 요구사항 분석부터 프로젝트 세팅하는 방법을 다룬다

---

# 가계부 구현하기 실습

# 가계부 서비스 소개

소비 내역을 관리하여 나의 자산 현황을 파악하고 이전 기록을 확인하기 위한 서비스를 구현한다

 

# 서비스 요구사항 분석

# main 컨셉

현재 자산을 관리할 수 있다

소비 내역을 관리할 수 있다

 

# Entity와 속성

▶자산

• id
• 금액
• 최초 생성일자
• 수정 일자

▶ 소비 내역

• id
• 금액
• 카테고리
• 내용
• 시점 금액
• 생성 일자

 

# User Story

▶현재 자산을 관리할 수 있다

• 현재 자산을 조회할 수 있다
• 현재 자산을 등록할 수 있다

▶ 소비 내역을 관리할 수 있다

• 소비 내역을 등록할 수 있다
• 소비 내역을 수정할 수 있다
• 소비 내역을 삭제할 수 있다

 

# User Flow

User Story를 기준으로 구현 시나리오를 정리한 것이다

유저의 행동을 시작으로 시나리오를 시작하고 유저의 행동에 따른 피드백을 제공해야 한다

시나리오 성공 Case 먼저 작성 -> 시나리오 실패 Case 나열(엣지 케이스)

 

# Tech Flow

1. 서비스에 접근한다

2. 유저가 액션을 하면, 서비스는 액션을 입력 받는다

3. 입력 받은 데이터를 서버에 저장한다

4. 현재 자산을 서버로부터 받아온다

5. 서버로부터 받은 자산 데이터를 화면에 보여준다

 

서비스는 3가지 레이어로 구성된다

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

1. 웹 -> 유저 : 화면 보여줌(렌더링)

2. 웹 <- 유저 : 액션 입력 받기

3. 웹 -> 서버 : 데이터 조회/저장/수정 요청

    웹 <- 서버 : 요청사항에 대한 응답 받기

 

# 렌더링

▶기본 렌더링

html 파일에 문서를 작성

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

HTML

웹페이지와 웹사이트의 구조를 구성하는 코드(마크업)

웹이 로드될 때 처음에 로드하는 파

CSS

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

DOM

HTML 문서와 상호작용할 수 있는 인터페이스

node와 object로 문서를 표현

트리 구조이다 -> 부모 자식의 관계 형성

렌더링 과정

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

▶런타임 때 렌더링

런타임 때 JS로 DOM을 조작하여 렌더

액션이 있을 때 UI를 변경해야 하는 case

렌더링 과정

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

=> Document 인터페이스를 통해 접근한다

DOM 노드 선택 방법

• document.querySelector(선택자)
• document.querySelector(".className")
• document.querySelector("#idName")

노드 생성 : document.createElement(태그이름)

노드 추가 : Node.appendChild(Node)

 

# 이벤트

유저가 클릭했을 때 함수를 실행시키고 싶다면 어떻게 해야할까?

이벤트를 발생시켜야 한다!

EventTarget 객체

이벤트의 대상이 되는 객체가 EventTarget 객체를 구현한다 -> document, window

이벤트를 수신할 수 있는 수신기를 가질 수 있다 -> listener

이벤트 유형 : click, focus, blur ....

addEventListener

Node.addEventListener(이벤트 유형, 콜백함수)

요소 생성 시 이벤트 리스너도 함께 등록한다

 

# 서버 간 통신

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

하지만 서버 통신에는 물리적인 시간 지연이 발생하여 요청과 동시에 바로 처리가 불가능하다

따라서 JS에는 이러한 상황에 필요한 처리기가 필요하다

• 콜백 패턴
• Promise 객체
• async - await

 

# Promise

미래 어떤 시점에 결과를 제공하겠다는 약속을 의미

대기 pending : 수행 중

이행 fulfilled : 수행이 성공적으로 완료

거부 rejected : 수행이 실패

▶매서드

then: fulfilled 일 경우

catch : reject 일 경우

 

# async - await

비동기 처리 패턴 중 하나

Promise의 단점을 보완하고 가독성을 높여준다

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

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

 

동기와 비동기에 대해서 알아보자

▶ 동기 : Synchronous

직렬적으로 작업을 수행하는 방식

요청 이후, 응답을 받아야지 다음 동작이 이루어지는 방식

▶ 비동기 : Asynchronous

병렬적으로 작업을 수행하는 방식

요청 이후, 응답 수락 여부와 상관없이 다음 작업이 동작하는 방식

---

# 프로젝트 기본 세팅

# git 세팅

node-modules는 용량이 너무 커서 git에 올리지 않아야 한다

node-modules 를 git에 올리지 않으려면 -> .gitignore 파일 생성 후 -> 파일에 node-modules 입력 후 저장

 

# npm 설치

터미널에서

npm init -y

입력 -> package.json 파일이 생긴다

 

# vite 설치

개발용 vite

npm install vite -D

 

# SCSS 설치

터미널에서

npm add -D scss

입력

테스트를 위해서 index.scss 파일을 생성해준다

index.scss 파일에 style 요소를 지정해주고 index.js 파일에서 해당 scss을 import 한다 -> 적용 완료!

이 때 주의할 점은 npm run dev로 실행시켜야지 vite가 scss를 css 파일처럼 읽어들인다!

 

# json-server 설치

1. 터미널에

npm install -g json-server

입력

2. root 파일에 db.json 생성

db.json 파일 생성 후 더미 데이터를 입력한다

더미 데이터는 json-server npm 페이지에서 copy 가능하다

json 서버를 띄운 다음에 데이터 자체를 json에서 관리 -> 서버와 클라이언트의 플로우를 간단하게 만들어준다

server.js 파일을 만들어서 관리하자

//server.js example

const jsonServer = require("json-server");
const server = jsonServer.create();
const path = require("path");
const router = jsonServer.router(path.join(__dirname, "db.json")); // ← 사용할 json 파일 지정
const middlewares = jsonServer.defaults();

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser);

server.use(router);

let port = 80; // ← port 설정 부분 (변경 가능)
server.listen(port, () => {
  console.log(`JSON Server is running, port(${port})`);
});

package.json 파일을 통해 관리

"server": "node server.js"

해당 코드를 scripts 내에 추가해주자

그리고 npm run server 를 실행시켜주면 서버가 실행되어야 하는데 안된다

왜 그럴까?

json-server의 버전 호환성 문제 때문에 에러가 발생한다

▶해결 방법

npm install json-server@0

으로 0버전을 설치해서 호환성 문제를 해결해주니 서버가 정상적으로 작동한다

http://localhost/posts 로 접속하니 서버의 데이터가 잘 보인다

axios를 사용하여 서버를 호출하는 것도 가능하다

//index.js

import axios from "axios";

const getPosts = async () => {
  const data = await axios.get("http://localhost:80/posts");
  console.log(data);
  return data;
};

getPosts();

---

# 새로 알게 된 점

서비스를 구현하기에 앞서 왜 이 서비스를 구현하는지, 유저의 요구사항은 어떻게 되는지와 같은 User Flow를 생각해보고 기술 스택도 정리해보았다

또한 npm 설치와 같은 기본적인 실습 환경 세팅을 해보며 기초를 탄탄하게 잡고 시작할 수 있는 시간이었다

JS의 다양한 라이브러리를 사용하다보면 버전 호환성 때문에 에러가 발생하는 경우가 많은 것 같다

단순한 실습 환경 세팅을 위한 json-server를 설치하면서도 버전 호환성 때문에 에러가 발생하였고

다른 교육생의 질문과 답변을 참고하여 해결할 수 있었다

이 부분은 기억을 잘 해두면 나중에도 유용하게 에러를 해결할 수 있을 것 같아 따로 정리해보았다

앞으로 서비스를 직접 구현하게 되면 더 많은 에러들과 마주할텐데 그때마다 잘 헤쳐나가야겠다