개발항해일지 22년/7월/2주 :: Redux Thunk, 프로젝트 인수인계, 오픈

일지 2022년 7월 2주차

 

 

이번주 목표

조금 더 정돈된 한 주를 갖자!!

첫 프로젝트 분해 및 파악

 

 

npm 버전

기존 프로젝트를 fork -> clone하고 npm install로 dependecies를 받으려고 했다

하지만 시작부터 안됐다

 

npm install 대신

--legacy-peer-deps를 사용해서 실행까지 되지만 여전히 error가 나오는 상황

 

 

 

dependencies 란?

프로젝트에 필요한 모든 패키지를 버전 넘버와 함께 가지고 있다.

어떤 라이브러리를 설치하면 dependencies object 속에 들어가 있는 것

 

devDependencies 란?

위의 보통 depencies란 같은 개념으로 설치된 라이브러리 등의 버전과 적어두고 있지만,

개발시에만 필요한 라이브러리 등을 여기에 넣어둔다

eslint, typescript 등이 좋은 예시일 듯 하다

 

peerDependencies 란?

반드시 필요한 패키지를 담고 있다.

다운받는 사람이 필요한 패키지의 버전도 반드시 같아야 한다.

 

peer의 의미가 동등한 사람, 또래 라는 뜻이 있는 것처럼
peerDependencies에 포함된 내용은 동등하게 가지고 있고, 버전도 같아야 한다

 

--legacy-peer-deps는 peerDepencies를 무시하며 install 해주는 것!

 

 

useLocation

현재 URL에 대응하는 useState라고 생각

 

 

Redux의 thunk

또 새로운 단어에 겁먹지 말자, Thunk는 함수를 사용하는 방식을 나타내는 말일뿐이다.

목적은 복잡한 코드를 편리하게, 사이드 이펙트를 줄이기 위한 방법일 뿐이다.

 

프로그래밍에서

thunk는 조금 딜레이된 일을 하는 코드라는 의미

현재 바로 진행되는 것이 아니라 조금 이따 일어나게 하는 것

 

리덕스에서는

thunk는 함수를 쓰는 방법의 표준으로, 리덕스의 store disptach와 getState 메소드와 함께 쓰인다.

 

사용하려면

reudx-thunk 미들웨어가 Redux store에 환경 설정으로 포함되어 있어야한다.

 

thunks를 쉽게 말해서

Redux 앱에서 비동기 로직을 작성하는 표준이다.

하지만 동기와 비동기 로직 모두 가질 수 있다

 

Thunk 사용을 왜 하나?

Redux 관련 로직을 UI 레이어로부터 분리할 수 있게 해준다.

 

Redux reducers는 사이드 이펙트를 가지면 안된다.

하지만 실제 앱은 사이드 이펙트가 있는 로직을 필요로 한다.

이럴 때 Thunk에 사이드 이펙트를 위치시킨다.

 

 

프로젝트 인수인계 받다

기업내 프로젝트를 인수인계 받았다

지금은 사용법이 미숙한 TypeScript, Redux, Jest 등 이 적용된 프로젝트다

 

어떻게 로직을 파악할지 생각을 해봤다

실제 로직을 따라가며 적용된 기술들을 확인하자

• 로그인은 어떻게 인증하고 있나?
• 표시되는 데이터는 어디서 가져오나?
• 등

 

그리고 가장 좋은 점은 실제 티켓(요구사항)을 중심으로 찾아가자

실제로 오늘 버그 티켓을 하나 처리해서 PR을 했다

 

이 프로젝트 마스터가 되기 위해 필요한 사항이 있다

• 사용된 기술 TypeScript, Redux, Jest 등에 대한 이해
• 나는 물론 다른 사람에게도 도움이 될 문서 작성
• 업그레이드 React, Redux 버전 등

 

 

미리 준비하자, 오픈하자

같이 일한다는 것은 내가 하는 일이 확실히 보여줄 수 있어야 된다.

혼자 글을 쓰며 문서화를 했지만,

보여주기 위한 계획과 하는 일에 대한 설명을 타인에게 하는 것이 습관이 들어있지 않다.

초반인 만큼 집요하게 문서를 만들고, 계획을 짜는 것에 두려워하지 말자!

 

 

하면서 배우는게 최고

개인 프로젝트를 하며 테스트 코드 작성은 와닿지 않는 일이었다.

dependecies 업데이트, 기능 추가에도 잘 쓰이겠지만, 가장 와닿는 이유는 이거다.

바로 리팩터링, 기능을 달라지지 않고 코드를 변신시키는 거라,

테스트 코드 그대로 사용하며 작동이 같은지 확인하면 좋겠다!

담당하는 프로젝트는 테스트 코드가 작성이 되어있어 좋은 공부가 되겠다

 

처음으로 만든 (실전)테스트 코드

import filterObjectFalsyValues from './filterObjectFalsyValues';

describe('filterObjectFalsyValues', () => {
  it('return properties that has trusy values', () => {
    const originalObject = {
      institutionName: 'Institution Name',
      institutionCode: '',
      sapAccount: '',
      userName: 'userName',
      name: 'name',
      phoneticName: 'phoneticName',
      region: 'region',
      area: '',
    };

    const filteredObject = {
      institutionName: 'Institution Name',
      userName: 'userName',
      name: 'name',
      phoneticName: 'phoneticName',
      region: 'region',
    };
    expect(filterObjectFalsyValues(originalObject)).toEqual(filteredObject);
  });
});

 

 

버그로 로직을 알아가다

첫 프로젝트를 받았다. 기업이 하는 서비스라 아무래도 개인적인 프로젝트보다 크다.

무작정 로직 파악 하려는 시도는 목표없이 공부하는 느낌이 들었다, 아직 익숙하지 않아 그럴지도 모르지만.

하지만 실제 버그 티켓을 고치기위해 동작을 예측하고, 디버깅하니 조금씩 로직이 그려진다

 

 

JS13K 2022 첫 회의

한 달간의 게임 개발 여정을 위해,

미리 준비할 수 있는 것들을 이야기해보는 간단한 회의 시작

 

 

참고 링크

Difference between dependencies, devDependencies and peerDependencies

=> https://www.geeksforgeeks.org/difference-between-dependencies-devdependencies-and-peerdependencies/

 

npm: When to use `--force` and `--legacy-peer-deps`

=> https://peaku.co/questions/10071-npm:-cuando-usar-%60--force%60-y-%60--legacy-peer-deps%60

 

npm ci

=> https://docs.npmjs.com/cli/v8/commands/npm-ci

 

useLocation

=> https://v5.reactrouter.com/web/api/Hooks/uselocation

 

Thunk

=> https://redux.js.org/usage/writing-logic-thunks

 

Redux Toolkit

=> https://redux-toolkit.js.org/usage/usage-with-typescript

 

 

sail by Christopher burns @unsplash