Enjoy Programming

어제 포스팅에 이어 react-redux를 더 해본다. 어제 포스팅에서는 connect()를 사용해 컴포넌트에 getState()하는 방법을 알아봤다. mapStateToProps.. 어쩌구 다시 읽어보자. 이번에는 중요한 dispatch하는 방법을 알아보자. 공식 문서를 읽어보자. 일반적으로 mapDispatchToProps라고 부른다고 한다. connect()의 두번째 파라미터로 이 파라미터는 객체나 함수이거나 또는 제공되지 않을 수 도 있다고 한다. 그리고 위처럼 connect(mapState, mapDispatch) 의 형태로 써주면되는데 만약 mapState를 안할거라면 null로 바꿔주면 된다. 그리고 만약 mapDispatch를 함수로 정의 했다면 최대 두개의 파라미터를 부를 수 있다고 한다..

자 바닐라 redux를 사용해 봤으니 react에서 redux를 사용해본다. 초기 설정은 거의 동일하다. redux는 깔려있으니 필요한 react-redux를 설치해주자. 그리고 Store.js를 만들어서 동일하게 todo를 관리할 store를 만들어주고 store를 export시켜준다. 어딘가에서 써야하니까. 이제 react-redux를 사용할 차례이다. 이전 포스팅에서 subscribe를 썻었다. store의 변화를 감지해야하니까. 변화가 있으면 app을 다시 rendering해야하는데 react에서는 rendering이 전체로 일어나는게 아니고 변화가 있는 부분만 rerendering된다. 무슨차이지?... 변화만 있는 부분만 재랜더링 해도 되지않나? 생각이 들지만 진행해보자. 자 이제 store를..

전 포스팅에 이어 오늘은 redux를 이용해 todo리스트를 만들어보자. 그에 앞서 redux의 중요한 세가지 룰을 알아보자 먼저 Single Source of Truth Redux는 앱의 state를 위해 단 하나의 store를 이용한다. 모든 state가 한곳에 있기 때문에 이렇게 부른다. store의 데이터 구조는 nested된 구조로 이루어져 있다. 자바스크립트 객체로써 {{{{},{},{}},{}}} 이렇게 정리되어 있다. 두번째로 state는 read-only이다. 절대로 직접 mutate하면 안된다. state를 변경하기 위해서는 action을 통해 dispatch되어야 한다. 이말인 즉슨 예를 들어 state가 배열이라면 새로운 값이 들어올때 기존 배열을 push같은 메서드를 이용해 변경해..

https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org react를 공부하며 redux redux 하길래 뭔가 싶었는데 이제 시작했다. redux는 뭘까? redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 상태 state를 담은 뭔가라는 소린가? 일단 상태를 관리하는 라이브러리라고 한다. 컴포넌트들의 상태 관련 로직을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 그리고 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 자 한가지 생각해보자. 리액트에서 상위 ..

오랜만에 넷플릭스 클론사이트 업데이트를 하다가 문제가 생겼다. 다름이 아니구.. themoviedb api 에서 detail 화면에 예고편을 뿌려주려고 컴포넌트를 하나 만들었는데~ mixed content error가 발생하면서 비디오를 받아오지 못하는 것이다. 수정은 해놔서 스크린샷은 없다. 아무튼 에러 코드를 읽었을때 https: http 어쩌고 한다. https 에서 http를 써서 그런다는 듯 했다 코드를 보니 유튭 영상을 가져와 뿌려줄 때 http로 적었다. 요걸 https로 수정하니 자알 나온다... 흠 그럼 도대체 어떤 문제일까 검색해보니 https 사이트에서 ajax를 사용해 비동기로 http로 연결되어 있는 다른 컨텐츠(이미지, 비디오, 파일)을 이용해서 화면에 출력하려고 했을때 발생한다..

앞선 포스팅에 이어 socket.io를 이용해 콘솔창에 메세지를 주고받는 것을 해보자. 역시 중요한 것은 socket과 on(), emit(), broadcast.emit()의 역할만 잘 이해하고 있으면 된다. 우선 클라이언트 측에서 메세지를 보내는 함수를 하나 작성한다. sendMsg 라는 함수에 msg라는 파라미터를 받게 되면 socket.emit을 통해 Msg라는 이벤트를 발생시키고 msg파라미터를 받아 전송한다. 그리고 메세지를 전송한 클라이언트의 콘솔창에 메세지를 띄워준다. 마찬가지로 받는 클라이언트 측의 메세지를 출력하는 함수를 작성하고 받아보자 이 함수도 클라이언트측에서 작성된다. callback함수인 handleMsgNoti에 data를 받는데 이는 위에 작성한 msg가 된다. 그리고 받은..