JIGGAG

10월 한달동안 로그

2019년 11월 2일

10/27 - 11/2

Memoization

  • React.memo
    • Memoization
    • Component
    • React.memo(({ value }) => { /* value가 변경되면 render */ })
  • React.useMemo
    • Memoization
    • Value
    • React.useMemo(() => { /* value가 변경되면 render */ }, [value])
  • React.useCallback
    • Memoization
    • Function
    • React.callback(() => { /* value가 변경되면 호출 */ }, [value])
  • 메모이제이션하는 대상, 목표가 다른듯 목적은 동일해 보인다. 그렇다면 과연 재사용하는 모든 값, 컴포넌트, 함수에 메모이제이션을 적용하는게 좋을까? 번역: 언제 useMemo와 useCallback을 사용하는가 해당 블로그를 읽고 고민이 생겼고 작성해둔 코드를 지웠다가 다시 그려보며 생각해본다. 과연 이게 꼭 필요한 메모이제이션일까.

Redux saga

  • Action type
    • Request
    • Success
    • Failure
    • 액션 타입별로 3가지 종류 선언 > 반복 > createAction 함수 사용
  • Effect
    • take-fork: while 계속 take 해둔 액션을 대기하다가 들어오면 fork 집어둔 내용 실행
    • take: 해당 액션 호출 대기
    • fork: 해당 액션 실행 대기
    • takeEvery: 모든 액션 실행
    • takeLatest: 마지막 액션만 실행
    • put: 액션 함수 실행
    • call: api 실행
    • select: saga state 호출

Redux vs Mobx

10/20 - 10/26

Container Presenter Pattern

  • Container와 Presenter로 분리하여 작업(index, container, presenter, style)
  • Container: redux state를 제어하는 컴포넌트(smart component)
  • Component: 단순 props로 제어하는 컴포넌트(dumb component)
  • Container -> Component -> Presenter -> Action -> Container 반복
  • 참고: Container와 Component

Ducks Pattern

  • Redux Action, Action Creator를 한 파일로 관리
  • action, creator, reducer 각각 나눠서 작업하면 USER 관련된 리덕스를 수정하려면 3파일을 전부 수정해야하는 불편
  • 기능별로 묶어서 관리하자
  • // action
const EX_ACTION_LIST = ‘ex_action_list’;

// action creator
const getList = () => {
    return { type: EX_ACTION_LIST };
}
  • 참고: Ducks Pattern

React Native: Flatlist

  • 스크롤이 자동 생성되며 뷰 밖에 있는 것은 lazy
  • 인스타나 페이스북처럼 무한 로드 페이징에 효과적
  • scrollview 안에서 사용하면 flatlist의 기능을 이용하지 못함

FE 성능 최적화

  • 네이버테크콘서트 유튜브
  • 측정 > 분석 > 최적화 반복
  • 어디를? 유저가 가장 많이 사용하는 화면, 가장 가치 있는 화면
  • 무엇을? Loading and Interaction
  • 어떻게? waterfall의 높이, 폭, 간격 개선
    1. request 수 줄이기 - 불필요한 자원 호출 삭제
    2. request 시간 줄이기 - 파일 경량, 난독, 압축
    3. request 중첩 - 파일 로드 우선순위
  • 참고: http 캐시

Server Side Rendering / Client Side Rendering

  • SSR (ex. jsp): 요청마다 서버에서 내려줘야함
  • CSR (ex. spa): 초기 접속 시 파일 전부 가져와서 보여주기만

Was(web application server) / Web Server

  • Apache, tomcat, nginx
  • 동적 vs 정적
  • ~/getList vs ~/list.js
  • 특정 URL로 요청 할 경우 웹서버에서 확인 후 WAS로 보낸다
  • User(~/example.do) > Web Server(해당 URL을 어디로 보낼지 확인) > WAS(해당 URL 호출) > Web Server(WAS에서 데이터 리턴) > User(데이터 확인)
  • 사용자 요청 > 아파치가 톰캣에 보내야 하는 요청인지 확인 > 톰캣 요청 > 톰캣이 아파치에게 데이터 리턴 > 아파치가 사용자에게 데이터 리턴
  • WAS vs Web Server
  • Request에 따라 WAS 또는 Web Server

10/13 - 10/19

Functional-Javascript

  • 지난주 스터디를 진행하며 궁금했던 Call과 curry의 차이점
  • Curry: 인자로 받은 function에 args를 하나씩 함수 인자로 분리하여 반환
  • Call: 인자로 받은 function에 args를 넣은 Curry 함수를 실행
  • function의 args 갯수가 맞지 않는 경우 curry는 해당 함수를 반환하지만 call은 해당 인자를 Undefined로 인식하여 실행됨
  • 유인동님의 함수형 프로그래밍

유사배열

10/6 - 10/12

TDD?

  • 참고 영상 - 우아한테크
  • 내 능력을 살짝 넘어가는 작업을 구체적인 목표를 가지고 지속적으로 시도
  • Test 코드 작성 > 리팩토링 > 테스트 실패 > 재작성

SPA에서 구글 애널리틱스(ga)를 route url 별로 자동 구현한 라이브러리 오픈소스가 있는지 찾아보고 없다면 만들면 좋을것 같다.

  • 이미 history 라이브러리에서 history.listen으로 응답에 따라 ga를 보낼 수 있도록 되어있다.
  • 내가 생각한 것은 react-router-dom의 link가 호출되어 url이 변경되는 순간 해당 url로 ga가 보내지는 것… 라이브러리 내장 지원
  • 이게 nextjs일까

한달동안

  1. 10월 한달동안
  2. 11월 한달동안
  3. 12월 한달동안
©Jiggag, Built with Gatsby