Reese.dev

190930-191006

October 06, 2019

REFLECT

  • 유튜브 클론 코딩 Challenge

    • 예습 - #6 User Authentication
    • 과제
    • TIL정리
  • 알고리즘 2문제 풀고 정리하기

  • React - Nomflix

    • video player route 추가
    • movie series link 추가

  • Vanilla JS / React 게임 만들기

    • 끝말잇기
    • 구구단
    • 숫자야구

  • 생활코딩 Node.js

    • 쿠키와 인증
    • 세션과 인증
    • Passport.js

  • React Tab메뉴의 영화 포스터 클릭 시 해당 영화의 Detail페이지로 이동하도록 디벨롭했다.

    • 이슈 1: Poster컴포넌트를 Link 컴포넌트로 감쌌는데 클릭시 URL만 변경되고 Route가 전환되지 않았다.
    • 1차: componentWillReceiveProps 사용해서 Route 전환을 구현할 수 있었다. 하지만 초기 렌더링을 제어하는 방법이 많아져서 혼란을 야기하고 오류 처리 인터럽트 동작시 메모리 누수가 발생할 수 있어서 등등의 이유로 React ver.17부터 deprecated된다. 다른 메소드로 대체해야 했다.

    • 2차: 새로운 state의 값으로 비동기적으로 fetch해온 데이터를 할당해야 했다. 때문에 동기적으로 동작하는 static getDerivedStateFromProps를 썼을때는 앱이 동작하지 않았다. 다시 componentDidUpdate로 변환했더니 제대로 동작했다:)

      async componentDidUpdate(prevProps, prevState) {
if (this.props.location.pathname !== prevProps.location.pathname) {
  let newResult = null;
  let newId = parseInt(this.props.location.pathname.slice(7), 10);
  ({ data: newResult } = await movieApi.movieDetail(newId));
  this.setState({ result: newResult });
} else {
  return null;
}
}
    • 이슈 2: Route 전환에는 성공했으나 탭 메뉴가 업데이트 되지 않았다.
    • Detail 컴포넌트에서 componentDidUpdate를 써서 state를 업데이트 했으나 Detail 컴포넌트 안에 있는 Tab 컴포넌트까지 변경내용이 전달되지 않았다.

    • 해결: Tab 컴포넌트에 static getDerivedStateFromProps을 추가해서 props 변경시 state를 업데이트함으로써 컴포넌트를 새롭게 렌더링하도록 했다.

      static getDerivedStateFromProps(nextProps, prevState) {
return prevState.production !== nextProps.production
  ? {
      videos: nextProps.videos,
      series: nextProps.series,
      production: nextProps.production
    }
  : null;
}

 

  • passport.js로 사용자 로그인 기능을 구현했다. local 로그인, github 로그인은 비교적 간결하게 구현돼서 좋았는데 facebook을 구현할때는 인내심의 한계를 느끼는 순간들이 있었다. 설정해줘야 하는 내용도 복잡한데다 localtunnel 연결이 불안정해서 애를 먹었다. 결국 localtunnel 대신 ngrok을 사용하고 구현에 성공은 했는데 세션이 8시간 이후에 만료돼서 만료된 이후에는 URL을 다시 받고 앱 설정도 다시 해야 한다..

 

PLAN NEXT WEEK

  • 유튜브 클론 코딩 Challenge

    • 예습 - #7, #8
    • 과제
    • TIL정리

  • React Nomflix

    • video player 팝업 추가

  • Vanilla JS / React 게임 만들기

    • 끝말잇기
    • 구구단
    • 숫자야구

 

CONTENTS OF THIS WEEK

동작(Motion)과 실행(Action)의 차이
아주 작은 습관의 힘

동작(Motion)은 계획을 세우고 전략을 확립하고 배우는 것이다. 동작은 유용하지만 결코 그 자체로 결과를 만들어내지는 않는다.

반대로 실행(Action)은 행위로서 결과를 도출한다. 예를 들어 더 나은 다이어트 계획을 검색하거나 그 주제에 대해 책을 몇 권 읽는 것은 동작이다. 하지만 실제로 건강한 음식을 먹고 운동을 한다면 이것은 실행이다.

우리 대부분은 비판을 피하는 데 선수들이다. 실패하거나 안좋은 평가를 받는 건 기분 좋은 일이 아니므로 그런 일이 발생할 상황을 피하는 것이다.

동작은 쉽다. 자신이 그 과정 중에 있다고 느끼게 해준다. ‘내가 쓰고 싶은 책에 대해 몇 가지 아이디어가 떠올랐어. 이걸 합치기만 하면 돼’. 동작은 뭔가를 했다는 느낌을 준다. 하지만 실제로는 뭔가를 하는 ‘준비’를 한 것뿐이다. 준비가 ‘미루기’의 또 다른 형태가 돼서는 안 된다. 무엇이는 실제로 변화하는게 중요하다.

높은 수준의 결과물을 내기 위해 동작만 열심히 하고 실행을 하지 않은건 아닌지, 실수하고 실패하면서 성장할 수 있는 기회를 스스로 버린건 아닌지 나자신을 돌아보게 된다. 최소한 남은 3개월 동안은 마음껏 실수하고 마음껏 실패하자.

차이를 만들어내는 것은 횟수다.
‘반복’함으로써 변화할 수 있다.
코딩의 ‘양’을 늘림으로써 코드의 ‘질’을 높일 수 있다.

@Reese
Sin Prosa Sin Pausa