[WIL] 프로그래머스 프론트엔드 데브코스 4주차 WIL

10.9(월) ~ 10.15(일) 기간동안 프론트엔드 데브코스 4주차를 보냈다. 이렇게 한 주를 꽉 채운적이 있던게 신교대 훈련소 때 이후로 처음 아닌가 싶은 생각이 든다.

 

1주일간 배운 내용 & 느낀내용📖

1. 우아한 형제들 사옥탐방 
2. Simple TodoList 구현
3. 프로미스, 제너레이터와 async, await 스터디
4. fetchAPI, historyAPI 강의 및 실습
5. 블로그 레이아웃 수정
6. 커피챗 라이브 코드리뷰
7. 광휘님 특강(블로그, 개발자의 자세)
8. TodoList에 User추가 + fetchAPI, localStorage, historyAPI 추가

 

1.우아한 형제들 사옥탐방 

  월요일은 한글날이었지만 데브코스는 쉬지않는다... 멘토님이 쉬시는 날이었는데 잠실 롯데타워에 있는 우아한 형제들 사옥을 구경시켜주셨다. 가서 느낀점은 내가 여길 오면 출근을 해도 즐겁게 할 수 있을 것 같다라는 것이다. 많은 사람들이 그 실내를 보면 비슷한 생각을 할 것 같다. 팀원들과 함께 동기부여를 강하게 받았다.

끝나고 멘토님이 비싼 밥도 사주시고 모각코도 같이 참여해주셨다..진짜 최고...

 

 

2.Simple TodoList 구현

우아한형제들 구경 이후~ 화요일까지는 그 전 주 수업하며 진행한 Simple TodoList에 TodoCount기능 혹은 validation추가기능등을 구현하는 과제를 진행했다.

 

수 목 금 강의를 듣고 나서는 App에서 setState를 통해  state를 중앙관리하며 각 TodoList, TodoCount등의 컴포넌트에 상태를 넘겨주면 되는구나를 차츰 이해하게 되었지만, 그 이전에 과제를 구현에 맞춰 진행하다보니 컴포넌트끼리의 의존도가 상당히 많이 생긴 채 구현하게 되었다.

이렇게 했으면 좋았을텐데 과제할땐 미처 몰랐다..

그래도 컴포넌트끼리 의존도가 있게 구현해보고 이후에 중앙관리를 익히니 강화 TodoList 실습때는 잘 했던 것 같다.

 

 

3.프로미스, 제너레이터와 async, await 스터디

 

서버와의 상호작용, 즉 API통신을 위해 처음 배우는 것은 XMLHttpRequest이다.

서버와의 통신은 비동기적으로 진행해야 하기 때문에 우리는 Promise를 활용하게 된다.

//day16의 API통신
export function request(url) { 
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest(); //XMLHttpRequest초기화.
    xhr.addEventListener("load", (e) => { //통신이 끝나면 발생한다. onload로도 가능.
      if (xhr.readyState === 4) { 
        if (xhr.status === 200) { //상태코드
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(xhr.statusText);
        }
      }
    });
    xhr.addEventListener("error", (e) => reject(xhr.statusText));

    xhr.open("GET", url); //요청을 초기화
    xhr.send(); //요청을 전송
  });
}

위 코드를 보면 request함수는 Promise객체를 return하게 되고, 이를 어떤 함수에서 await request(url) 형태로 받으면 await키워드는 Promise내의 res나 rej 값을 받게된다.

 

fetchAPI를 활용하면 좀 더 편하게 통신할 수 있다.

 

4.fetchAPI, historyAPI 강의 및 실습

fetchAPI의 경우 XMLHttpRequest에서 좀 더  현대적인 API라고 생각하면 된다. 역시 Promise기반으로 async await도 활용할 수 있다.

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = await response.json();
  console.log(jsonData);
}

가장 많이 사용하게 되는 형태의 fetch API이다.

 

실습에 활용한 API코드는 다음과 같다. (Promise)

const API_END_POINT = "https://kdt-frontend.programmers.co.kr/";

export const request = (url) => {
  return fetch(`${API_END_POINT}${url}`)
    .then((res) => {
      if (res.ok) {
        return res.json();
      } else {
        throw new Error(`${res.status} Error`);
      }
    })
    .catch((e) => alert(e));
};

fetch를 실행하여 온 응답에 대해 res.json을 리턴한다. 이 때 res.json()도 json()메서드가 Promise로 감싸지기 때문에 리턴된 res.json()역시 받는 쪽에서 .then으로 res데이터를 받아줘야한다.

 

이번엔 await을 활용한 api통신을 진행해보자.

export const API_END_POINT = "https://kdt-frontend.todo-api.programmers.co.kr";

export const request = async (url, options) => {
  try {
    const res = await fetch(`${API_END_POINT}${url}`, {
      ...options,
    });
    if (res.ok) {
      const json = await res.json(); //res.json은 프로미스 객체이나 await으로 res값만 받아서 json에 넣었다.
      return json;
    }
  } catch (e) {
    throw new Error("API 호출 오류");
    alert(e.message);
  }
};

await은 Promise객체의 res값을 바로 받아주기 때문에 api에서 data를 바로 넘겨줄 수 있다.

 

 

5.블로그 레이아웃 수정

블로그의 HTML을 직접 뜯어보며 레이아웃을 약간 조정했다.

사이드바를 오른쪽에서 왼쪽으로 옮겼고,

미리보기 글의 표시 범위를 살짝 조정했다.

 

어려운건 아니지만 HTML과 CSS를 직접 파악해 조정했다는게 좋다.

 

6.커피챗 라이브 코드리뷰

멘토님 커피챗 시간 -> 라이브 코드리뷰 코멘트 정리

• early return으로 에러 캐치 이후 로직을 짜자 (그렇지 않으면 메인 로직이 if문에 갇혀버려 가독성 저하)
• 어떤 상태의 flag는 지양하는게 좋다. 인간의 뇌가 코드를 읽는데 인지해두어야하는 요소가 추가되어 방해된다.
• onSubmit같은 이벤트에 대해 발생하는 콜백함수는 따로 이름을 빼서 가독성 개선하자.

 

 

7.광휘님 특강(블로그, 개발자의 자세)

왜 성장해야하는가? -> 잘 하는 개발자가 되기 위해, 시장에서 도태되지 않기 위해, 원하는 곳에 가기 위해

 

어떻게 성장하는가? -> 성장을 '기록'하자. 블로그로.

 

주니어 기준 기술은 당연히 잘 해야하고, 지금같은 상황에선 눈에 띄어야한다. 어떻게? ->

직접 만든 깃 블로그로 이력서를 내서 '아 이사람 웹에 진심이구나' 표출, 면접에서 2뎁스 3뎁스 이상 대답하기.

 

면접에서 2depth 3depth대답하는 방법은? ->

Q: 프로토타입에 대해 설명해주세요

A(일반적인 지원자): 프로토타입의 정의와 개념 설명

B(합격자): 프로토타입 설명, 1996년도 당시 js목표, 그때의 상황, 왜 생겼는지, 그래서 발생한 문제, 어떻게 해결하려하는지 쭉쭉~

 

 

8.TodoList에 User추가 + fetchAPI, localStorage, historyAPI 추가

일전에 만든 SimpleTodoList에 대해 강화하는 작업을 진행했다.

컴포넌트별 의존성 -> App.js에서 this.state로 중앙관리

로컬이 아닌 fechAPI를 통해 서버와 통신.

UserForm을 통해 유저를 등록하고 UserList에서 유저 클릭시 유저 별 Todo로 이동 (fetchAPI+상태관리)

historyAPI를 통해 url별로 상태 변경.

 

 

 

후기

• 진짜 빡세고 알차고 길었던 일주일이었다. 다만 많은걸 배웠지만 모든걸 흡수했나는 의문...
• 우아한 형제들 사무실 탐방은 진짜 좋은 원동력이 되었다.
• 스터디는 프로미스랑 async,await로 하였는데, 강의와 시너지가 잘 났던 것 같다.
• 그럼에도 프로미스와 async await에서 return되는게 객체인지 데이터인지 헷갈려서 능숙히 구현할정도로의 숙련도는 아직 부족하다.
• 커피챗은 뼈에 새길 조언이었고, 특히 현업자가 코드를 만지는 장면을 실시간으로 볼 수 있어서 감사했다.
• 광휘님 특강도 뼈에 새길 이야기들이니 잘 기억하자. 특히 나만의 차별화를 하는 방법.
• TodoList강화에서 User부분 이후로는 강의의 요구사항만 보고 직접 구현해봤는데 아직 숙련도의 부족함을 많이 느꼈다. 삽질도 많이하고..