2019-10-28 개발일지

# 오늘의 TODO

• 마이그레이션 프로젝트 개발
  • 로그인 체크 API
  • 광고 수익 차트 응답 데이터 형식 수정
• JEST 학습

 

 

---

 

# 로그인 체크 API 개발 진행 내용

1. 개발 목적

해당 기능을 추가 개발하게 된 이유는 프론트 팀의 요구사항이었기 때문이다.

현재 프론트팀은 화면을 React로 MPA로 개발하고 있다.

MPA로 개발하다보니 페이지 이동이 발생하는데, 프로젝트 기능들의 특성 상 '로그인 상태'가 아니면 로그인 페이지로 리다이렉트 시키는 구조의 기능들이 많다.

 

페이지를 이동할 때 로그인 상태를 판단하고 로그인 페이지로 이동시키기 위해서 해당 API를 개발 요청하였다.

 

# 로그인 체크 API 개발 후

1. 더 좋은 방법 없나...

결국 프론트 팀이나 나나 더 나은 방안에 대한 노하우가 없으니 이런 무식한 구조의 검증 방법을 택했지만 '더 좋은 방법이 있을 것 같은데...'하는 아쉬움이 있다.

 

페이지 이동 마다 서버에서 자체적으로 로그인 상태를 체크하는 것 외에 클라이언트와의 로그인 상태 검증 통신이 필요하다니 불만스럽다.

 

---

 

# 광고 수익 차트 응답 데이터 형식 수정 개발 진행 내용

1. 개발 목적

차트를 그릴 때, 그리는 데이터 내용이 최근 7일이기 때문에 각 일에 대한 값을 그래프로 표현한다.

근데 기존에는 그냥 값만 배열로 전달했기 때문에 프론트에서 직접 최근 7일을 구하는 작업을 해야하는 상황이었는데 그냥 내가 했다.

 

TS를 쓰면서 지금까지 Object의 Dynamic(동적) 선언에 답답함을 느끼고 있었는데, 이번을 계기로 답답함을 해소할 수 있었다.

 

배열로 던지던 데이터를 객체로 던지도록 구조를 바꿨는데 { 키: 값 } 형태로 { 일자: 값 } 으로 던지려고 했다.

 

그래서 데이터를 가공하면서 아래와 같이 객체에 데이터를 채워넣어야 했다.

 

const obj: {} = {};

for (let i = 0; i < n; i += 1) {
    obj['n일'] = value;
}

 

TS에서 위와 같이 obj를 선언한 후에 key: value를 추가하려고 하면 any타입 관련한 에러가 발생한다.

 

하지만 다음과 같이 obj를 선언하면 객체의 속성을 동적으로 선언할 수 있다.

 

const obj: { [k: string]: number } = {};

for (let i = 0; i < n; i += 1) {
    obj['n일'] = value;
}

 

이거 몰라서 TS 진짜 불편하게 느끼고 있었는데 오늘에야 비로소 불편함이 해결되었다 ㅎㅎㅎㅎ

 

 

---

 

# JEST 학습 진행 내용

Setup And Teardown 챕터부터 예제를 따라하면서 다시 차근차근 보고 있다.

그냥 사용 방법만 알고선 사용할 수 있는 수준이 아니라고 느껴져서 차근차근 예제를 따라하면서 테스트에 가까워지는게 우선인 것 같다.