준수의_개발정리노트

WebRTC의 역사: Web에서의 끝판왕 목표 중 하나는 영상와 육성을 사용하여 사람간 " 실시간통신(Real Time Communication: RTC) "을 가능하게 하는 것입니다. 이는 우리가 텍스트 입력을 하는것처럼 자연스러워야 합니다. Web에서는 RTC 기술을 접목하는 것이 특히 더 어려웠습니다. Gmail의 video chat이 2008년에 인기를 얻었으며 2011년에는 Google에서 행아웃을 출시했습니다. Google은 RTC에 사용되는 많은 컴포넌트들을 개발한 GIPS라는 회사를 인수하였으며 GIPS에서 개발한 기술들을 오픈소스로 풀어버렸습니다. 그리고 RTC의 기준을 만들기위해 노렸했습니다. 그리고 2011년 5월 에릭슨에서 처음으로 WebRTC를 도입하여 개발하였습니다. WebRTC 어플리케이션들은 여러가지를 해야됩니다: - 스트리밍되는 오디오, 비디오 혹은 다른 데이터를 가져오기 - 다른 WebRTC 클라이언트와 연결할 수 있도록, IP주소, 포트와 같은 네트워크 정보를 받아오고 이를 서로 교환하기(NAT과 Firewall을 통해서도) - Signaling communication을 조직하여 세션을 시작 / 종료 / 에러를 보고합니다 - 미디어와 클라이언트의 정보를 교환합니다(해상도, 코덱 등) - 스트리밍되는 오디오 , 비디오, 데이터를 주고받습니다. 이를 위해 WebRTC는 다음과 같은 API들을 제공합니다: - MediaStream: data stream에 access할 수 있도록 합니다(웹캠, 마이크 등) - RTCPeerConnection: - RTCDataChannel: peer-to-peer간의 generic data 통신 Signaling: Session control, network and media information: WebRTC는 RTCPeerConnection을 사용하여 browsers(peers) 간의 스트리밍 데이터를 통신합니다. 하지만 WebRTC는

mapStateToProps function mapStateToProps ( state ) { return { a : 42 , todos : state.todos, filter : state.visibilityFilter } } // component will receive: props.a, props.todos, and props.filter Copy 위처럼 작성하면 props.a / props.todos / props.filter를 통해 접근할 수 있다. 1. mapStateToProps는 단순히 store에서 state를 가져다 주는 것이 아니라 component가 바로 사용가능하도록 만들어야된다. 2. selector function을 사용할 것 3. mapStateToProps는 store에 변경사항이 있을때마다 호출되기때문에 최대한 빨라야한다. 4. mapStateToProps는 pure하고 synchronous해야된다. mapDispatchToProps const mapDispatchToProps = dispatch => { return { // dispatching plain actions increment: () => dispatch({ type : 'INCREMENT' }), decrement : () => dispatch({ type : 'DECREMENT' }), reset : () => dispatch({ type : 'RESET' }) } } Copy mapDispatchToProps를 사용하면 위에서 언급한 mapStateToProps처럼 props.increment()이런식으로 호출이 가능해진다. React-Redux를 사용하면 store를 직접 접근하는일은 없다. connect(mapStateToProps, mapDispatchTo

한줄 간단 요약: Redux를 사용하면 state를 바로 바꾸는 것이 아니라 action 이라는 객체를 생성하여 어떤 state를 바꾸고 싶은지를 type 에 명시하여 dispatch 하면, 해당되는 reducer 가 action.type에 따라 state를 변경한다. combineReducer() Reducer의 인자로 넘어오는 state는 현재의 state, action은 dispatcher가 보낸 action 객체이다. combineReducer()는 state에서 key와 이름이 같은 property를 argument로하여 호출해준다. import { combineReducers } from 'redux' const todoApp = combineReducers ( { visibilityFilter , todos } ) export default todoApp 위의 코드는 아래와 같다: export default function todoApp ( state = { } , action ) { return { visibilityFilter : visibilityFilter ( state . visibilityFilter , action ) , todos : todos ( state . todos , action ) } } Copy custom하게 사용하고 싶다면: function reducer ( state = { } , action ) { return { a : doSomethingWithA ( state . a , action ) , b : processB ( state . b , action ) , c : c ( state . c , action ) } }

Introduction 본 리스트는 현재 작성되어 있는 코드를 이해하기 위한 최소한 의 리스트이며 공식문서를 읽을때나 코드를 볼때 궁금한점, 혹은 깊이 알아야될 것이 있을 때는 더 찾아보고 공부해야된다. 코드를 이해할 때의 팁: 만약 코드를 볼때 잘 모르겠다면, 일단 해당 코드가 호출되는 곳을 검색해가며 가장 최상단 코드(가장먼저 실행되는)로 이동한다. 최상단 코드가 이해가 되었다면 한단계씩 타고 내려가며 이해하도록 해본다. 만약 코드를 보다가 모르겠다면, 대부분 모르는 라이브러리를 사용하고 있거나 프레임워크를 사용하고 있기 때문이다. 따라서 현재 보고 있는 소스코드의 최상단으로 올라가면 import { ... } from  ' ... '; 구문이 있을텐데 소스코드가 import하고 있는 프레임워크 / 라이브러리의 기능을 구글링해가며 이해하도록 노력한다. 아래에 링크되어 있는 문서들을 읽고나면 대부분은 이해가 되겠지만 굵직한 것들을 최소한을 적은 것으로 부분부분 이해가되지 않는 소스코드들은 이런방식으로 이해하도록 한다. 해당 기능이 어떤 역할을 하고, 어떤 인자를 받으며, 어떤 값들을 반환하는 지를 공식문서를 통해 파악하고 나면 이해하는데 큰 어려움은 없을 것이다. Backend Application Server Django Official Document       - Models and databases              - Models              - Making Queries              - Aggregation              - Search              - Managers     - Handling HTTP requests              - URL dispatcher              - Writing views              - View decorators              - Generic

Key는 React가 어떤 아이템들이 변경, 추가, 삭제되었는지 판단할 수 있도록 도와준다. Key를 고르는 가장 좋은 방법은 list의 아이템들이 자신의 sibling들 사이에서 unique하게 판별할 수 있는 값으로 하는 것이 좋다.  대부분의 경우 data의 ID가 사용된다. function ListItem ( props ) { // Correct! There is no need to specify the key here: return < li > { props . value } </ li > ; } function NumberList ( props ) { const numbers = props . numbers ; const listItems = numbers . map ( ( number ) => // Correct! Key should be specified inside the array. < ListItem key = { number . toString ( ) } value = { number } /> ) ; return ( < ul > { listItems } </ ul > ) ; } const numbers = [ 1 , 2 , 3 , 4 , 5 ] ; ReactDOM . render ( < NumberList numbers = { numbers } /> , document . getElementById ( 'root' ) ) ; 가장 쉽게 생각하자면, 만약 map이 사용되었다면, key를 부여해주어야 한다. key는 자신의 sibling들 사이에서만 unique하면되며, global하게 unique할 필요는 없다.

true && expression은 expression을 반환하고, false && expression은 false를 반환하여 무시된다. function Mailbox ( props ) { const unreadMessages = props . unreadMessages ; return ( < div > < h1 > Hello! </ h1 > { unreadMessages . length > 0 && < h2 > You have { unreadMessages . length } unread messages. </ h2 > } </ div > ) ; } const messages = [ 'React' , 'Re: React' , 'Re:Re: React' ] ; ReactDOM . render ( < Mailbox unreadMessages = { messages } /> , document . getElementById ( 'root' ) ) ; Inline If-Else with Conditional Operator render ( ) { const isLoggedIn = this . state . isLoggedIn ; return ( < div > { isLoggedIn ? ( < LogoutButton onClick = { this . handleLogoutClick } /> ) : ( < LoginButton onClick = { this . handleLoginClick } /