컴과생의 끄적끄적

Container Redux의 공식 개념은 아니다. Redux를 React에 연동했을 때 사용하는 개념 Container Component의 준말로, Redux의 일부 state와 dispatcher를 포함하는 리액트 컴포넌트. (= Redux와 연결되어 있는 리액트 컴포넌트) react-redux React와 Redux를 연동하기 위해 사용하는 공식 바인딩 라이브러리 - Binding Library (= Binding) : 어떤 라이브러리를 특정 환경에서 사용하기 위해서, 그 환경과 라이브러리를 중간에서 묶어주는 역할을 하는 라이브러리 react-redux의 주요 API - Provider : 하위 컴포넌트들이 Redux Store에 접근할 수 있게 해줌 - mapStateToProps() : Redu..

Redux와 UI 관계 = 관계가 없다! Redux는 독자적인 자바스크립트 라이브러리로, 사용자에게 보이는 UI가 없이도 사용 가능하다. (따라서, 본래 React외에 NGULAR나 Vue와도 함꼐 사용가능하나 애초에 React와 궁합이 잘 맞도록 설계되었기에 React와 함께 사용하는 경우가 대부분이다.) Redux와 UI 연동 1. Redux Store 생성 2. Store가 UI 업데이트(재렌더링)를 구독(subscription) 목록에 추가 3. UI 업데이트 과정 1) 현재 Redux Store의 데이터(state)를 가져옴 2) 가져온 데이터 중 UI에서 필요로 하는 데이터만 추출 3) 추출한 데이터를 사용해서 UI 업데이트 4. 필요한 경우 초기 UI 렌더링 5. UI 입력이 발생한 경우 A..

Reducer : Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수 = 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정 [역할] Redux State에 변화를 주는 역할 function appReducer(state = initialState, action) { switch(action.type) { case 'PUSH_ITEM': return [...state, action.item]; case 'POP_ITEM': const newState = [...state]; // (state 변화가 아닌) 새로운 state를 생성! newState.pop(); return newState; default: return state; } } Rules of Reducer Only ..

Action : Redux Store에 저장된 데이터(State)에 변화를 주기 위한 행동 *Redux Action은 JavaScript 객체 형태로 존재 (일반 JS 객체와 다른 점은, type이라는 필드를 무조건 포함한다는 점! type - Redux Action의 type을 의미.) { type: 'ADD_TODO', // type: Action의 이름(개발자가 정의) text: 'Redux 공부하기' // (payload): Action을 처리하는 데 필요한 부가 데이터 } Action Creator : Action 객체를 생성하는 역할을 하는 JavaScript 함수 function addTodo(text) { return { // 여기서 리턴하는 객체가 바로 Redux Action 객체 typ..

Store : Redux의 데이터들을 저장하기 위한 저장소 실제 저장이 아닌, State management의 의미 → Redux Store의 데이터들을 저장장치에 저장되지 않음! - Redux Store는 데이터를 어떻게 관리할까? : JavaScript 변수를 통해 데이터를 관리 * 웹브라우저 새로고침, 컴퓨터 재부팅 시에 Redux Store의 데이터는 모두 날아감! - 트리 형태로 저장되는 Redux Store의 데이터들 Dispatcher : Action을 발송하는 역할 (수신자는 Redux) - Store의 dispatch 함수를 통해 디스패처 역할을 함 Store 관련 함수 createStore() : Redux Store를 생성하는 역할을 하는 함수 const store = creatSto..

Redux 구성 요소 Store(스토어) : Redux의 데이터들을 저장하기 위한 저장소 State : Redux Store에 저장되어 있는 데이터 Action(액션) : Redux Store에 저장된 데이터에 변화를 주기 위한 행동 (JavaScript 객체 형태로 존재) Action 생성자 : Action 객체를 생성하는 역할을 하는 함수 Reducer : 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정 = Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수 Immutability (불변성) : 리덕스 원칙 중 2. State is read-only 3. Changes are made with pure functions => Redux State 생성 후에는 값을 바꿀 ..

리덕스(Redux) 탄생 과정 SPA 등장으로, 웹사이트의 규모가 커짐 → 상태 관리의 복잡도 증가 (서버로부터 받아온 데이터, 로컬 데이터, UI 컴포넌트의 상태 등..) 언제 어디서 어떻게 상태(state)가 업데이트 되는지 파악하기 힘들어짐 상태 업데이트의 원인을 파악할 수 없다면, 버그 재현 및 수정이 어려움 상태 관리만을 위한 리덕스(Redux) 등장! Flux 아키텍처 : 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍쳐 = 데이터의 흐름을 정의한 하나의 방법 액션(Action): 데이터 흐름에 변화를 주기 위한 어떤 동작이 발생한 것 디스패처(Dispatcher): 액션을 발송하는 역할 (액션의 수신자: 리덕스) 스토어(Store): 데이터를 저장하는 공간 뷰(View): 스토어에서..

동영상은... 비교적 덜 간단 이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를, 동영상에도 똑같이 적용할 수 있다. 그러나 문제는, 동영상 서비스에 따라 그 성질이 조금씩 다를 수 있다는 것! 단순히 사이즈만 변경해서는, 프레임의 크기는 변화하지만 실제 콘텐츠(동영상)의 크기는 변하지 않는다. 해결방법 - 여백을 만들고, 그 여백에 절대값을 준다. : 이때 여백의 크기는 "종횡비(height/width)"에 달려있다! DOCTYPE html> 가변 동영상 .player{ padding-top: 56.25%; position: relative; } iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

이미지 요소에도... 상대단위 em, vw, % 등을 얼마든지 사용할 수 있다. 이때 주의 해야할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다. max-width CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 한다. *width와 max-width의 차이 width: 너비 지정 max-width: 제한 길이 지정 (이보다 커질 수 없다~) picture HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러올 수 있다. 주로, 해상도 별로 이미지의 비율을 바꾸고 싶을 때 사용! // source: 이미지를 미디어 조건에 맞게 선택적으..

미디어 쿼리 미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)이다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다. 미디어 타입 screen, print, speech 등 조건에 대한 물음(쿼리) *화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많다. 속성명 정의 min-width 디스플레이 영역의 최소 너비 max-width 디스플레이 영역의 최대 너비 min-height 디스플레이 영역의 최소 높이 max-height 디스플레이 영역의 최대 높이 orientation portrait 또는 landscape 감지 color 기기의 색상당 비트 수 color-index..