Plactic Code

2019-06-04 TIL

2019-06-04

잘못 알고 있던 지식 수정하기

모의 면접 스터디 하면서 내가 했던 답변, 들었던 답변에 대해 궁금하거나 잘 몰랐던걸 찾아봤다.

JPEG의 압축 방식

내가 JPEG의 압축 방식이라고 알고있던 알고리즘은 RLE(Run Length Encoding)이고, jpeg가 아닌 bmp의 압축 옵션으로 선택 가능하다.

jpg는 훨씬 더 복잡한 방법으로 압축하며, 인간의 눈이 휘도보다 색상에 둔감한 것을 이용해 컬러스페이스를 YCbCr로 변경해 색상 성분에 대해 더 많은 압축을 가한다.

React 프로젝트의 bundle 결과물

이건 잘못 알고 있었다기 보다 잘 모르던 것인데, react 프로젝트를 build한 결과물을 보면 js는 js끼리, css는 css끼리 번들되어있으며, 프로젝트의 유일한 html인 index.html은 이름 그대로 root 디렉토리에 에 존재한다.

웹 브라우저로 디렉토리에 접근할 때 가장 먼저 참조하는 파일이 보통 index.html로 설정되어있는 일종의 convention을 따르는 선택인 것 같다. (다만 한줄로 늘어뜨려놨는데 이것은 난독화가 목적일까?)

flux 아키텍쳐 (패턴)

공식문서

flux는 react와 함께 facebook에서 사용함. flux를 보완해 redux가 개발되었다.

자세한 것은 위에 공식문서를 읽어보자. 물론 읽었지만 명쾌히 이해가 안되고.. 다만 redux와 여러 개념을 공유하는 것을 알았다.

React의 Lifecycle이란?

리액트 라이프사이클은 컴포넌트의 생성, 업데이트, 제거 각 상황에 따른 동작의 (생애)주기를 말함. 라이프사이클 메서드는 그 주기 안의 단계마다 실행되는 메서드이며, 미리 정의된 메서드를 오버라이드해서 해당 시점에 특정 동작을 할 수 있다.

Redux

Free Code Camp의 Redux 챌린지

간단 정리

  1. state를 저장할 redux store를 만든다
  2. action을 리턴하는 action creator 함수를 정의한다
  3. .dispatch() 메서드에 action을 인자로 넣어 호출해 redux store에 action을 dispatch한다. (아니면 action creator를 in-line으로 호출해 바로 리턴값을 인자로 전달)

action은 type 속성을 필수로 가지며, 임의의 data도 가질 수 있다.

Redux: Create a Redux Store

리덕스는 리액트를 포함해 여러 웹 기술들과 함께 사용될 수 있는 상태 관리 프레임워크입니다.

리덕스에는, 하나의 스테이트 오브젝트가 존재하고 앱의 모든 스테이트를 책임집니다. 이 말은 만약 여러분의 리액트 앱이 열 개의 컴포넌트를 갖고있고, 각 컴포넌트가 자신의 로컬 스테이트를 가지고 있다면 앱의 모든 스테이트는 하나의 스테이트 오브젝트(리덕스 store) 안에 정의된다는 말입니다. 이건 리덕스를 배울 때 첫 번째로 이해해야 할 중요한 원칙입니다 : 리덕스 스토어는 어플리케이션 스테이트에 관한 single source of truth 입니다.

이 말의 다른 의미는, 여러분의 앱의 어떤 부분이 스테이트를 업데이트하려면 반드시 리덕스 스토어를 통해 해야만 한다는 뜻입니다. 단방향 데이터 흐름(unidirectional data flow)은 여러분의 앱 내 상태 관리를 추적하기 쉽게 만들어줍니다.

리덕스 store는 앱의 상태를 보관하고 관리하는 오브젝트입니다. 리덕스 오브젝트에는 createStore()라는 메서드가 있는데 리덕스 스토어를 만들 때 사용합니다. 이 메서드는 reducer 함수를 필수 인자로 받습니다. 리듀서 함수는 뒤에 있을 챌린지에서 다룰 것입니다. 그리고 옆에 있는 코드 에디터에 이미 정의되어있습니다. 리듀서 함수는 간단히 스테이트를 인자로 받고, 스테이트를 리턴합니다.

store 변수를 선언하고 createStore()메서드에 리듀서를 인자로 전달해 할당하세요.

const reducer = (state = 5) => {
  return state;
}

// Redux methods are available from a Redux object
// For example: Redux.createStore()
// Define the store here:
const store = Redux.createStore(reducer);

Redux: Get State from the Redux Store

리덕스 스토어 오브젝트는 몇가지 메서드를 제공합니다. 예를 들어, getState()메서드를 이용해 리덕스 스토어에 저장된 스테이트를 가져올 수 있습니다.

옆에 코드 에디터에 이전 챌린지의 코드를 다시 적어두었습니다. store.getState()를 이용해 스토어로부터 스테이트를 가져오세요. 그리고 새로운 currentState변수에 할당하세요.

const store = Redux.createStore(
  (state = 5) => state
);

// change code below this line
const currentState = store.getState();

Redux: Define a Redux Action

리덕스는 상태 관리 프레임워크이기 때문에 스테이트를 업데이트하는 것은 리덕스의 핵심 태스크 중 하나입니다. 리덕스에서는, action을 dispatch함으로써 스테이트 업데이트가 촉발됩니다(triggered). action은 간단하게는 자바스크립트 오브젝트인데 액션 이벤트에 대한 정보를 담고 있습니다. 리덕스 스토어는 이러한 action 오브젝트를 받고, 그에 따라 스테이트를 업데이트 합니다. 가끔은 리덕스 action이 데이터를 갖고있기도 합니다. 예를 들어, action은 유저가 로그인 한 후 유저네임을 갖습니다. 데이터는 optional인 반면, action은 반드시 발생한 액션의 타입을 기술하는 type 속성을 담고 있어야 합니다.

리덕스 action을 메신저(심부름꾼)이라고 생각합시다. 이 메신저는 여러분의 앱에 일어나는 이벤트에 관한 정보를 리덕스 스토어에 배달합니다. 그러면 store는 일어난 action에 기반해 스테이트를 업데이트하는 비즈니스를 수행합니다.

리덕스 action을 기술하는건 type 속성을 가진 오브젝트를 선언하는 것 만큼 쉽습니다. action 오브젝트를 선언하고 ‘LOGIN’ 스트링을 가진 type 속성을 주세요.

// Define an action here:
const action = { type: 'LOGIN' };

Redux: Define an Action Creator

action을 만든 후, 다음 단계는 그 action을 리덕스 스토어에 보내 스테이트를 업데이트 하도록 하는 것입니다. 리덕스에서는, action creator를 정의해 이 일을 할 수 있습니다. action creator는 단순히 action을 리턴하는 자바스크립트 함수입니다. 다른 말로, action creator는 action 이벤트를 표현하는(represent) 오브젝트를 생성합니다.

호출시 action 오브젝트를 리턴하는 actionCreator() 함수를 정의하세요.

const action = {
  type: 'LOGIN'
}
// Define an action creator here:
function actionCreator() {
    return action;
}

Redux: Dispatch an Action Event

dispatch메서드는 리덕스 스토어에 action을 디스패치하기 위해 사용됩니다. store.dispatch()를 호출하면서 action creator가 리턴한 값을 인자로 전달하면 store에 액션을 되돌려 보냅니다.

action creator는 일어난 액션을 명시하는 type 속성을 가진 오브젝트를 리턴한다는 것을 떠올려봅시다. 그리고 이 메서드는 action 오브젝트를 리덕스 store에 dispatch합니다. 이전 챌린지의 예시에 기반해서, 다음 코드들은 동일한 기능을 하며, 둘 다 LOGIN이라는 type의 액션을 dispatch합니다. :

store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });

옆에 있는 코드 에디터의 리덕스 store는 login이라는 속성을 갖는 오브젝트로 초기화되어있고 현재는 그 값이 false로 설정되어있습니다. 또한 loginAction()이라는 action creator도 있는데 LOGIN type의 action을 리턴합니다. dispatch메서드를 호출하면서 loginAction()에 의해 생성된 action을 전달함으로써 LOGIN 액션을 리덕스 store에 dispatch하세요.

const store = Redux.createStore(
  (state = {login: false}) => state
);

const loginAction = () => { // action creator 입니다
  return { // action을 리턴합니다
    type: 'LOGIN'
  }
};

// Dispatch the action here:
store.dispatch(loginAction()); // store에 action을 dispatch합니다
Minchang Kim
Minchang Kim
웹/앱 개발자 김민창입니다! 좋은 하루 되세요!