전체 글
-
하드웨어concept/CS50 2021. 6. 10. 00:10
출처 : www.edwith.org/cs50 하드웨어 하드웨어는 컴퓨터를 물리적으로 구성하는 요소이며, 컴퓨터에 연결되어 추가적인 기능을 수행 컴퓨터의 하드웨어는 크게 중앙처리장치, 기억장치, 입출력장치로 구성 중앙처리장치(Central Processing Unit, CPU)는 프로세서라고 불리기도 하는데, 입력장치에서 받은 명령을 실제로 처리. CPU가 1초에 얼마나 많은 연산을 할 수 있는지 속도를 측정하는 단위는 기가헤르츠(GHz)이다. 기억장치 입력된 명령이나 데이터가 저장되는 공간 주기억장치와 보조기억장치로 나누어진다. 주기억장치 보조기억장치 RAM 하드디스크(HDD), SSD 기억된 정보를 읽어내기도 하고 다른 정보를 기억시킬 수 있는 메모리로서, 응용 프로그램을 일시적으로 불러오거나, 데이터..
-
Redux 개념 정리concept/React, Redux, RN 2020. 12. 31. 10:34
Store 말 그대로 state가 관리되는 오직 하나뿐인 저장소의 역할을 합니다. Redux 앱의 state가 저장되어 있는 공간이죠. 그래서 우리가 가장 먼저 해 주어야 할 작업은 Store를 만드는 작업입니다. store > store.js 파일에서 createStore 메소드를 활용해 rootReducer를 연결 해 주고 있습니다. Reducer Reducer 는 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 pure function 입니다. const itemReducer = (state = initialState, action) => { switch (action.type) { case ADD_TO_CART: return Object.assign({}, state, ..
-
react-reduxconcept/React, Redux, RN 2020. 12. 17. 10:51
connect 메소드 : 컴포넌트와 store를 연결시켜주는 역할 import { connect } from 'react-redux'; class Counter extends Component { render() { return ( this.props.value this.props.changeDiff(e.target.value)} /> ) } } const mapStateToProps = (state) => { return { value: state.value } } const mapDispatchToProps = (dispatch) => { return { changeDiff: (diff) => dispatch(action(diff)) } } Counter = connect(mapStateToProps..
-
Redux dev toolconcept/React, Redux, RN 2020. 12. 15. 18:17
redux dev tool 로 시간여행을 할 수 있다. 인스톨 하고 createStore를 할 때 두번째 전달인자로 다음 코드를 전달해주면 된다. Redux.createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ) 그리고 개발자 도구에서 리덕스 데브 툴 아이콘 선택하면 status 바뀌는 것이 눈에 보임 왼쪽 화면에는 type이 찍힘 오른쪽 화면에는 color 가 찍힘 이렇게 리덕스로 버전관리가 가능하다. 리덕스에서 여러가지 콘솔창에 찍어보면서 개발하려면 reducer 함수 내부에 찍어보면 된다.
-
리덕스 적용concept/React, Redux, RN 2020. 12. 15. 02:40
npm install --save redux 리덕스를 이용한다는 것은 store를 만들어서 그 store의 state를 바꾼다는 것이 리덕스의 핵심! 1. store를 만든다. 2. 그럼 state가 자동으로 생긴다. 3. reducer 라는 함수를 만들어서 store에 주입해준다. 1. createStore로 스토어를 만드는데 여기 전달인자로 reducer를 넣어주어야 한다. 여기서 reducer의 역할은? dispatch에 의해서 action이 들어오게 되면 reducer가 그 action 값과 기존에 있었던 state의 값을 참조해서 새로운 state값을 만들어주는 것 (새로운 state 값을 리턴한다. 이 때, 기존 state를 immutable 하게 유지하기 위해서 Object.assign을 통..
-
Redux - 2concept/React, Redux, RN 2020. 12. 10. 03:01
출처: 생활코딩 리덕스를 쓰면 좋은 이유 간단한 애플리케이션 생활코딩 참고 가능 www.youtube.com/watch?v=ijdFixuK1nI&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=5&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9 1. n제곱에서 2n으로 시간복잡도가 줄어듬 2. 시간여행을 할 수 있음 크롬 개발자 도구에서 리덕스 데브 툴을 쓰면 애플리케이션 상태 변화 과정을 볼 수 있음 => 즉, 리덕스를 이용함으로써 중앙집중적인 데이터 스토어를 통해서 애플리케이션을 쉽게 개발할 수 있다. 리덕스가 없다면? 아래와 같이 똑같은 코드를 계속 반복해야함 (간단한 앱 만들 때 참고 하기)
-
Redux introconcept/React, Redux, RN 2020. 12. 3. 23:53
출처 : 생활코딩 Redux란? 자바스크립트 앱을 위한 예측 가능한 상태의 저장소 소프트웨어를 개발할 때 우리를 위협하는 가장 큰 위험은 복잡성이다. 리덕스는 애플리케이션의 복잡성을 획기적으로 낮춰서 우리의 코드가 어떤 결과를 가져올지 예측 가능하게 만들어주는 도구이다. 어떻게??? 가장 중요한 리덕스의 특징은 Single Source of Truth (하나의 상태를 갖는다!) 상태(state)는 그냥 객체이다. 하나의 객체 안에 애플리케이션에서 필요한 모든 데이터를 우겨 넣는다. state = { data: ~~~ } 그리고 이 상태는 아주 중요해서 외부로부터 철저하게 차단시킨다. 오로지 허용하는 함수만을 통해서 상태(state) 데이터에 접근할 수 있다. 그 함수들에는 dispatcher, reduc..
-
React storybook mini session 정리concept/React, Redux, RN 2020. 12. 1. 18:18
스토리북? 컴포넌트 기반 UI 개발 환경 -> 서로 다른 뎁스의 컴포넌트들을 동일한 뎁스로 flat하게 펼쳐줌 -> 그러면 상위 의존성 없이 mock data를 넣어서 테스트 가능 스토리북의 좋은 점: 컴포넌트 각각을 브라우저에서 볼 수도 있음 로그인할 때도 로그인하고 로그아웃하고 할 필요없이 로그인 컴포넌트하나 띄워서 해 볼 수 있음 +@ : 스토리북 플러그인 knobs : UI에 바로바로 적용돼서 눈으로 확인 가능 actions +@ : webpack이 내장 => 개발환경이 따로 구축된다. 즉, 스토리북으로 만든 애들만 따로 배포할 수 있다. 사내에서 디자이너와 기획자와 소통하기 원활 (따로 배포 안해도 된다.) 컴포넌트의 역할을 철저하게 나누자! SDD (Storybook Driven Develop..