프로그래머스 데브코스 TIL - Day 15

✅ 학습 목차

- [DAY 15] VanillaJS를 통한 자바스크립트 기본 역량 강화 (6)

 

✅ 새롭게 학습한 부분

- TodoList 만들기 실습 (API 활용)

 

 

---

 

 

오늘은 TodoList를 API와 접목시켜서 실습하는 과정에서

처음 알게된 부분이나 기억하고 체크해야 될 부분들을 정리 하기로 했다.

 

 

1. 낙관적 업데이트

api요청이 정상적으로 처리될 것이라고 보고
클라이언트 측에 ui로 먼저 업데이트를 시키고 이후에
서버에서 데이터를 받고 업데이트를 하는 방식.
= api의 응답이 느릴 때 사용자의 경험 측면을 향상시키기 위함

 

좋은 방법이지만 서버측에서 오류가 생겼을 때에는 어떻게 처리해야 할 지

한번 더 고려해보아야 할 것 같다

 

2. 로딩중 처리

state에 isLoading을 추가하여 api요청 전에 isLoading 값을 true로 변경하고,
api요청에 응답을 받을경우 isLoading의 값을 false로 변경하는 방식을 사용하여
해당 isLoading의 값에 따라 isloading의 UI가 변경되는 로직을 작성하면 된다.

 

3. input에 작성한 내용 유지하기

input에 글을 작성하다가 새로고침을 했을 때나 페이지를 벗어났다가 다시 돌아왔을 때
작성하고 있던 내용이 유지가 되길 원한다면 localstorage를 사용하여 저장하면 된다!

사용자 경험을 위해 다양하게 localstorage를 사용할 수 있는 것 같다.

 

 

부모 엘리먼트에서 submit event를 받을 수 있다?

 $userList.addEventListener("submit", (e) => {
   // <div><form><input /></form></div> == > div를 통해 받을 수 있음
  });

부모 엘리먼트 안에 form이 있을 경우 form에 직접 접근하지 않고

부모 엘리먼트를 통해 sumbit 이벤트를 받을 수 있다. (처음 안 부분!)

 

 

특정 url로 접근 했을 때 UI변경

SPA의 경우 ui가 변경됨에 따라 URL이 함께 변경이 되는 것이 아니기 때문에
Todo의 Username을 pathname으로 넣어서 이후에 pathname을 통해 url에 접근 시
해당 내용에 맞는 페이지를 보여주게끔 구현을 해주어야 한다.

 

[pathname 사용]

const { pathname } = location;
if (pathname.length > 1) {
  this.setState({
    ...this.state,
    selectedUsername: pathname.substring(1),
  });
  await fetchTodos();
}

location.pathname을 사용해도 되지만

location.search를 사용하여 query string으로 불러올 수 있다.

 

[querystring 사용]

// history, pushState(null, null, `/?selectedUsername=${username}`);

export const parse = (querystring) =>
  // '?name=sojin&position=developer'
  // &으로 쪼개기
  // key=value의 조합을 object 형태로 바꾼다.
  // 만들어 진 object를 return하면 아래와 같은 형태로 불러서 쓸 수 있다.
  // { keyname } = parse(querystring.substring(1));

  querystring.split("&").reduce((acc, keyAndValue) => {
    const [key, value] = keyAndValue.split("=");
    if (key && value) {
      acc[key] = value;
    }

    return acc;
  }, {});

 

reduce를 사용하여 object를 구성할 수도 있다는 것을 처음 알았다. 😲

reduce를통해 만든 것을 바로 return 하여 구조분해 할당을

사용하여 간략하게 표현하여 사용할 수 있었다.

 

 

 

느낀 점

 

이번에 강의를 들으면서 이번 주에 냈던 과제가 생각났다.

이렇게 했으면 더 좋았을걸~ 했던 것들이 떠올랐었다.. 이미 제출해서 수정 못함

물론 API를 다루는 과제는 아니였지만 코드를 정리하는 부분들이 조금 미흡했던 것 같다.

제출 전에 어떤 부분을 어떻게 개선하면 좋을까 하며 생각을 했을 땐 잘 보이지 않았었는데

제출을 하고 나서 무심코 코드를 봤을 때 아! 이거 이렇게 할 걸!하며 떠오른 것들이 몇 개 있기도 했다.

머리가 비어 있을 때 새로운게 생각나는 걸 보니 왜 다른 사람들이 잘 안풀릴 때

생각을 비우는 것도 필요하다고 하는지 이해가 되었다..ㅎㅎ