[클라우딩 어플리케이션 엔지니어링 TIL] 240112 - 기능 개발

 

Intro

---

지난 시간에는 프로젝트 셋팅을 완료했고 이번 시간부터 본격적으로 기능을 개발하는 방법에 대해 학습하였다.

프레임워크나 라이브러리 없이 작성하니 createElement, appendChild를 엄청 사용해서 개발을 해야 해서 기능이 많아질수록 코드가 복잡해졌다. 파일로 세분화하는 과정이 중요할 것 같다. 그리고 프레임워크의 사용 이유에 대해 알게되었다.

 

 

 

오늘 학습한 내용

: 기능 개발하기

---

진행 프로젝트 정리 - Action

• load: 최초 진입 시점
• 유저의 액션 ➡️ 클릭, 입력 등등

유저 스토리

• 현재 자산이 입력되지 않은 경우 → 자산을 입력할 수 있다.
• 입력되어 있는 경우 → 자산을 새로 입력할 수 없다.
• 현재 자산은 0원 이상 입력해야 한다.
• 현재 자산을 입력해야 소비 내역을 입력할 수 있다.

Action - Load

1. 현재 자산 금액 조회
   1. 대기: 로딩
   2. 성공: 성공 feedback
   3. 실패: 실패 feedback
2. 현재 자산의 존재 여부를 확인
   1. 존재할 경우:
      • input 비활성화
      • 소비내역 입력 버튼 노출
   2. 존재하지 않을 경우:
      • input 활성화

Action - 유저의 액션

(액션: input) 현재 자산을 입력한다.

1. validation: 금액 0원 이상
2. 입력 후, 서버에 저장
   1. 대기: 로딩
   2. 성공: 성공 feedback
      • 존재할 경우의 케이스
   3. 실패: 실패 feedback

 

위처럼, 계산기 기능들을 로드 시점과 유저의 액션에서 정리한 액션들을 가지고 코드로 직접 작성해 보는 실습을 진행하였다.

 

실습을 진행하면서 Font Awesome이라는 사이트를 알게 되었다.

웹에서 사용하는 아이콘들을 불러올 수 있는 유익한 사이트이다.

Font Awesome

https://fontawesome.com/

Font Awesome

 

• npm에서 적용하는 방법

npm install --save @fornawesome/fontawesome-free

 

• 다음으로 원하는 디자인을 선택한 후 HTML 코드를 복사한다.

<i class="fa-solid fa-spinner-third"></i>

• JS 파일에 import해서 사용한다.

import '@fortawesome/fontawesome-free/js/all.js';

 

 

 

 

마무리

---

오늘은 아침부터 기분이 좋은 날이다. 왜냐하면 TIL 배움기록왕에 선정되었기 때문이다! 히히😭

열심히 작성한 보람이 있다. 선정되기 위해 작성한 건 아니였는데 잘썼다고 칭찬을 받으니 너무 뿌듯하다.

내가 매일 TIL을 작성하는 이유는 기록이라는 수단으로 내가 배운 정보가 나의 지식으로 정리하기 위함이다.

올해 목표 중 하나가 기록을 잘 하는 것이다. 그러기 위해 최근에 읽고 있는 책 중 하나가 '거인의 노트'라는 책인데 책을 통해 기록의 이유와 방법에 대해 많이 배우고 있다.

 

강의를 들으면서 알게되는 것은 많지만 그 내용을 듣는다고 내 것이 되는 것이 아니다. 기록이라는 수단을 통해 내 지식으로 쌓아가는 것이다.

원래 기록이란 건 오래 걸리는 일이 맞다. 단순히 베끼는 것이 아니라 생각도 하면서 작성하는 것이기 때문에 오래 걸리는 게 당연하다. 그렇지만 시간을 투자한 만큼 내 기억에는 오래 남아있을 것이다. 그러니 다들 TIL 작성을 해보는 것을 권합니다😁

 

풍부한 지식을 섭취하고 싶다면 무작정 먹기만 해서는 안 된다. 그것을 잘 소화해야만 피가 되고 살이 된다. - 거인의 노트 中