클라우딩 어플리케이션 엔지니어링 TIL Day 13 - 가계부 구현하기

지난 시간에는 서비스의 요구사항을 분석하고 실습 환경을 세팅했다면

이번 시간부터 본격적으로 가계부 서비스를 구현한다

주요 기능을 구현하면서 프론트엔드 개발자로써 역량을 기를 수 있도록 열심히 강의를 따라가야겠다

---

# 가계부 구현하기

지금까지 배운 개념들을 활용해서 가계부 서비스에 적용해본다

복습하는 차원에서 배운 개념 중 가계부 서비스에 구현한 개념들을 다시 한번 정리해보도록 하겠다

 

# toLocaleString

숫자, 날짜 시간 등을 현재 사용자의 로컬에 맞게 형식화하는 데 사용

내장 객체인 Number, Date, Array 등에서 사용

toLocaleString 적용 전(Numbe 객체)

$currentAssetValue.textContent = store.currentFunds ?? "-";

toLoacaleString 적용 후

  //toLocalString을 적용해서 금액 입력 시 , 를 넣어주자
  $currentAssetValue.textContent = store.currentFunds?.toLocaleString() ?? "-";

기본적으로 사용자의 브라우저 설정에 따라 형식을 지정하지만 추가 매개변수를 통해 원하는 언어 또는 지역 설정 지정 가

const number = 1234567.89;
const options = { style: 'currency', currency: 'USD' };
//언어 및 지역 -> 미국 영어로 설정, 두번째 매개변수로 형식 옵션 지정
const formattedNumber = number.toLocaleString('en-US', options);
console.log(formattedNumber); // "$1,234,567.89"

 

# Optional Chaining

객체의 속성을 안전하게 접근하는 방법을 제공

? : 해당 속성이나 메서드가 존재하는지 여부 확인 -> 존재하지 않는다면 undefined 반환

코드의 안정성을 높이고 중첩된 속성이나 메서드에 대한 불필요한 코드 검사 줄일 수 있다

ES11 에서 도입되었기 때문에 이전 버전에서는 지원되지 않을수도 있다

//optional chaining 사용
  //store.currentFunds? -> store.currentFunds가 없을 경우 undefined 반환
  //undefined 대신 ?? 뒤에 대체할 수 있는 값을 "" 안에 표현해줄 수 있음
  $currentAssetValue.textContent = store.currentFunds?.toLocaleString() ?? "-";

 

# push

배열에 새로운 요소를 추가하는 데 사용된다

배열의 긑에 하나 이상의 요소를 추가할 수 있다

//arr 이라는 배열 존재 시
arr.push(ele1, ele2, ...., eleN);

//example
const fruits = ['apple', 'banana', 'orange'];

fruits.push('grape', 'watermelon');

 

# map

배열 내 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환한다

원본 내열은 변경하지 않고 새로운 배열을 반환한다

const arr = [1, 2, 3, 4, 5];

//화살표 함수를 사용해서 코드를 더욱 간결하게 작성
const newArr = arr.map(num => num * num); // [1, 4, 9, 16, 25];

 

# forEach

배열의 각 요소에 대해 한 번씩 주어진 함수를 실행하는 메서드

반복문을 사용했을 때 보다 코드를 간결하게 작성할 수 있다

// 기본 구문
arr.forEach(callback(currentValue, index, arr));

// arr : forEach()를 호출하는 배열
   callback : 배열의 각 요소에 대해 실행되는 함수
   currentValue : 현재 처리 중인 요소의 값
   index : 현재 처리 중인 요소의 인덱스
   arr : forEach()를 호출한 배열

forEach()는 원본 배열을 변경하지 않고 반복 작업을 수행한다

//화살표 함수를 사용한 forEach()의 예시
const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index) => {
	console.log(`Index ${index}: ${fruit}`);
    });
    
    // Index 0 : apple
       Index 1 : banana
       Index 2 : orange

 

# join

배열의 모든 요소를 하나의 문자열로 결합하여 반환한다

// 기본 구문
const resultStr = arr.join(separator);

// arr : join을 호출하는 배열
   separator : 각 요소를 구분하는 데 사용할 문자열, 생략 시 기본값으로 쉼표(' , ') 사용

 

# toLocaleTimeString

현재 가계부 소비내역 목록의 날짜 및 시간은 아래와 같이 보인다

toLocaleTimeString 으로 날짜 형식을 고쳐주겠다

(근데 남은 자산은 왜 undefined 로 뜨지..?)

// 2024-01-16T15:15:25.669Z -> 10:30 HH:mm
          const time = new Date(createAt).toLocaleTimeString("ko-kr", {
            dateStyle: "short",
            hourCycle: "h24",
          });

toLocaleTimeString 메서드는 toLocaleString 메서드와 유사하게 Date 객체에서 지역화된 시간 문자열을 반환할 때 사용한다

옵션을 사용하여 시간 형식을 더 세밀하게 제어할 수 있다

 

# sort

배열의 요소를 정렬하는 데 사용한다

배열의 원본을 변경하며, 정렬된 배열을 반환한다

const fruits = ['banana', 'apple', 'orange', 'kiwi'];
fruits.sort();

console.log(fruits);
// 출력: ["apple", "banana", "kiwi", "orange"]
// 알파벳 순서(기본) 에 따라 정렬

객체 배열의 특정 속성에 대해서 정렬할 수도 있다

const persons = [
  { name: 'John', age: 30 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 35 }
];

//오름차순 정렬
persons.sort((a, b) => a.age - b.age);

console.log(persons);
/* 출력:
[
  { name: 'Alice', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Bob', age: 35 }
]
*/

 

# 304 오류 해결

강의를 보면서 코드를 작성하는데 코드를 올바르게 작성했음에도 로직이 제대로 돌아가지 않았다

소비내역을 작성해서 등록을 누르면 아래에 리스트로 떠야하는데 뜨질 않았다

network 창을 확인해보니

304가 잔뜩이다

검색해보니 HTTP 304 상태 코드는 "수정되지 않음"(Not Modified)을 나타내는 상태코드라고 한다

주로

1. 캐시 사용 : 브라우저가 이전에 이미 받은 리소스를 캐시하고 있으며, 클라이언트가 서버에 새로운 요청을 보낼 때 'If-Modified-Since' 헤더와 함께 이전에 응답에서 받은 날짜를 서버에 전송

2. 조건부 요청 : 서버는 클라이언트의 요청을 확인하고, 리소스가 수정되지 않았다면 304 상태 코드를 반환하고, 수정된 경우 새로운 리소스와 함께 200 OK 상태코드를 반환

의 상황에서 발생한다고 한다

크롬의 경우 설정 -> 개인 정보 및 보안 -> 인터넷 사용 기록 삭제 -> 쿠키 및 캐시 삭제

로 하면 해결된다고 한다

(근데 아직도 304 상태 코드가 뜬다 ㅠㅠ 해결되면 다시 포스팅하겠다ㅠㅠ)

 

# filter

배열 내 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 true를 반환하는 요소들로 이루어진 새로운 배열을 생성한다

즉, 배열의 요소를 조건에 맞게 걸러내는 데 사용된다

filter() 메서드는 새로운 배열을 반환하며 원본 배열은 변경하지 않는다

// filter 기본 구문
const newArr = arr.filter(callback(currentValue, index, arr));

//객체 배열에서 특정 조건 만족하는 요소 걸러내기 example
const persons = [
  { name: 'John', age: 30 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 35 }
];

const adults = persons.filter(person => person.age >= 30);

console.log(adults);
/* 출력:
[
  { name: 'John', age: 30 },
  { name: 'Bob', age: 35 }
]
*/

---

# 새로 알게 된 점

이번 강의를 진행하면서 매우 많은 것을 알게 되었다

지금까지 배운 다양한 메소드를 실제 로직에서 사용해보면서 다시 한번 메소드의 역할 및 구현 방법을 익힐 수 있었다

특히 map, filter 메소드는 이전에 프로젝트를 진행했을 때 되게 많이 사용했었다

하지만 해당 메소드들에 대한 이해가 부족한 상태로 사용했기에 아쉬운 점이 많았었다

이번 강의를 통해서 map, filter, toLocaleString 등 자주 사용되는 메소드들을 복습하며 예전에 진행했던 프로젝트를 반성(?) 하게 되었다

남은 기능 개발하기 파트를 잘 마무리하고 예전 프로젝트를 리팩토링 해봐야겠다