나는 자바스크립트 개발자다 컨퍼런스

코딩컨벤션 자동화 도구

각자의 코드스타일로 코드를 짰는데 누군가가 깃에 인덴트를 바꾸어 올리는 경우가 생긴다. 그런 문제를 방지하고 통일 성을 갖추기 위해 코드 컨벤션 자동화 도구를 사용한다.

eslint같이 ‘이거 문제 생길거 같으니까 고치세요.’가 아니라 한번설정하면 알아서 수정해주는 도구.

EditorConfig

프로젝트별, 파일별로 문자셋, 탭, 줄바꿈(리눅스? 윈도우?), 파일 끝 빈 줄 등

좀 유명한 angular, react등등에는 EditorConfig파일이 있다.

react처럼 활발한 활동이 있는 곳에서도 2년간 커밋이 없을 정도로 자동화의 효율이 높다.

단점 : 세세한 설정은 지원하지 않음

stylefmt

css파일이나 scss파일의 컨벤션을 강제

규칙에 맞게 자동으로 코드 변경.

세세하게 설정가능.

설정 파일은 stylelint의 작성법에 따름.

Prettier

JS파일의 코딩 컨벤션을 강제

규칙에 맞게 자동으로 코드 변경

JS파일을 분석후 재조합. 원본코드 형식 무시.

(이거 상당히 유용할거 같다.)

Husky + Lint-staged

Husky - git hook을 편하게 작성

Lint-staged - 커밋할

Prettier와 함께 사용하기 좋다.

커밋하기전에 Prettier를 거치도록하면 아주 일관성있는 깃헙 환경 구축가능.

React 퍼포먼스 개선기

조이코퍼레이션 : 온라인 접객 서비스.

리액트는 아주 장점이 많다.

쉬워서 시작하면 커다란 단점을 만나게 된다.

리액트는 프레임워크가 아닌 라이브러리. 컨테이너냐 컴포넌트냐. 앱의 규모가 조금만 커져도 느려지는 나의 앱을 발견.

앱이 느려져 채팅이 불가능한 상황이 왔다.

어떤 컴포넌트가 문제인걸까? -모든?

so, 성능을 측정할 수 있는 도구들 react-addons-perf / extension react dev-tool

react-addons-perf

react-addons-perf를 알아보자.

새로운 아이템을 추가할 때 어떤 변화?

새로추가된 아이템만 갱신되는가? 이전것도 렌더되는가?

해보니 기존 것도 렌더가 됬다.

shouldComponentUpdate

라이프사이클 중 shouldComponentUpdate() 이게 중요하다.

기존 것과 비교해서 렌더한다.

이로써 아주 좋아졌다.

근데, 앱 규모가 커지면 비교해야 할게 많아진다.

PureComponent라는게 있다.

React.PureComponent

PureComponent는 shallowCompare이기 때문에 구현할때 잘 생각. immutable한 방식을 쓰면서 사용하는것을 추천.

Advanced App의 구조

event 함수에서 실수

HOF(map)에서 실수

ES6 화살표함수는 자동으로 this를 바인드해 줌.

메모이제이션패턴을 사용해야 맵을 제대로 쓸 수 있다.

react로 TDD 초큼 맛보기

예제 - 스핀박스.

환경 - 웹팩 바벨 제스트 엔자임

왼쪽 구현코드 오른쪽 테스트 코드로 스플릿해서 씀.

테스트코드에 given-어떤 조건 또는 상황일 때 when- 무엇을 하면 then- 결과가 무엇이어야 한다.

테스트는 가독성이 중요하다.

어디에서 시작하지?

요구사항 설정하기

기본값 200 , 값 입력, 증가 버튼을 클릭하여 값이 1 증가, 감소 버튼 클릭하면 값이 1감소

그 중에 가장 쉬운것부터(물론 그걸 찾는 것도 어렵다.)

첫 테스트를 복붙해서 한다.

레포트를 보면 다음 스텝을 알 수 있다.

테스트가 통과하면 리팩토링하는 시간이다.

TDD는 테스트와 구현을 번갈아 반복하면서 계단을 하나씩 밟아가는 여정.

테스트 코드는 어떻게 검증해야하지? - 너무나 당연한 것부터 구현하면 확실하다.(공리느낌)(테스트 초기의 상수의 역할)

값 입력

테스트가 깨진상태(빨간불)라면 리팩토링을 하면 안된다.

문제가 있는 상태에서 리팩토링을 하면 어떤게 문제인지 멀어진다.

스킵을 해놓은 상태에서(안전한상태에서) 리팩토링한다.

값을 입력하는거니까 상수를 깨트린다.

복붙을 하는 이유는 중복을 발견하기 위함이다.

beforeEach()와 같은 후킹메소드를 사용하여 중복을 제거한다.

증가버튼을 클릭하여 값을 1증가 시킬 수 있다.

값입력처럼 증가/ 리팩토링/ 상수 깨기 등등을 진행한다.

테스트코드 리팩토링을 통해 군집화한다.

react application 아키텍쳐

왜 리엑트를 하나요?

아키텍처에 집중할 수 있어서 좋았습니다.

샘플로 시작한다. (리얼월드?리오월드?)

샘플은 다 나름의 아키텍쳐가 있는데, 현실은 다 아키텍쳐가 깨지게된다.

문서에 모든 답이 다 있다.

좋은아키텍쳐는 디자인되어야하고 플랜되어야한다.

첫째, 컴포넌트 역할 정의

버튼

버튼을 컴포넌트로 만들면 props에는 아이콘과 스타일을 줄 수 있다.

검색

자동완성

컴포넌트와 컨테이너

컨테이너 컴포넌트

컨테이너는 데이터를 다룬다.

둘째, 컴포넌트 분리

라우터를 이용한 분리 - 중첩 라우터를

리덕스를 이용한 분리 - dispatch도 내려주기 귀찮을땐 context 매직을 사용한다.

재사용가능한 컴포넌트?

뷰를 재사용하고 싶다면 -데이터로드에 대한 역할 제거
컨테이너도 재사용하고 싶다면 - 기능을 효율적으로 묶고 아키텍쳐를 활용
다른 프로젝트에서도 쓸수있게 데이터 로드, 아키텍쳐, 의존도 낮추고 props 를 사용하라.

셋째, 리덕스

리듀서

순수함수로 작성되어야한다.

인풋이같으면 같은 값을 반환하라.

주어진 값으로 계산만 해라.

딴짓하지 마세요.

-> 단순하지만 굉장히 어려운 이뮤터빌리티.

단순해서 개발자의 책임도 많아진다.

액션 생성자.

액션생정자는 항상 순수한 액션을 반환해야한다.

thunk 액션은 순수 오브젝트가 아니라 함수다.

액션 생성자는 인자를 체크하는정도만 사용하자.

리덕스 미들웨어

미들웨어는 많은걸 할 수 있다.

비동기 제어

비동기를 제어하는자가 프로그램을 제어한다.

사가를 알아보자.

사가는 테스크 단위로 관리한다.

비동기 상황을 제너레이터의 코루틴으로 바꾸어준다.

사가 미들웨어 하나로 여러개의 미들웨어를 사용하는 효과를 낼 수가 있다.

리덕스와 라우터 연동 전략

리덕스를 사용할 때 기존의 컴포넌트적 사고 아키텍쳐를 사용할 수 없으니

라우터와 리덕스를 동기화 시킨다.
라우팅 리듀서가 모든 메시지를 모니터하고 있다가 액션에 리다이렉트 페이로드가 있다면 url 변경 - 관제의 문제
특정 비동기 액션이 끝나면 명시적으로 라우팅 액션을 실행한다.
사가라면 쉽게 가능하다.
2번과 3번을 적절히 조합.
공통 액션 처리에 대한 공통 라우팅 전략
type,payload,redirect…
아키텍처에 영향을 주는 결정
- 스펙변경
- 모듈 업데이트(웹팩, 리액트 라우터)
- 배포 환경의 변화
- 이뮤터블 도입
- 플로 타입 체커 / 타입스크립트 도입
- 서버사이트 렌더링
- 클라우드 api / graphQL 도입
- rx/ mobiX 등 근간을 이루는 아키텍처 패러다임의 변화

2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.