Enjoy Programming

이번에 프론트엔드 면접을 보며 절실히 느끼고 또한 코드를 작성하면서 그리고 여러 것을 배우면서 느꼈던 원리에대한 이해의 부재가 얼마나 큰지 와닿았고 더 나은 코드 더 좋은 프로그래밍을 하기 위해 처음 자바스크립트 책을 샀다. 검색도 해보고 알아보고 했는데 이게 책이 상당히 두껍긴 하지만 많은 사람들이 추천하고 현재에 머물지 않고 앞으로 나아가기 위해 도움이 될 수 있겠다 판단해서 오늘 바로 송도로 달려가서 사왔다. 왜 이리 재고가 없는 것이냐;; 동네랑 청라 검단 몇 군데를 전화했는데 전부없었다.. 인터넷가는 4만500원 송도 교보문고에 재고 확인해보니 1권이 딱 !!!! 오케이 바로 건너가서 샀다 45000원... ㅋㅋㅋ 톨비에 기름값까지 5만원에 샀네;; 그러니 더 열심히 공부하고 내 것으로 만들자 ..

dispatch와 getState를 할 수 있으니 이제 subscribe를 해줘야하는 건가? 구독해서 렌더링 해줘야 한다. 컴포넌트 하나를 더 만들어보자. 그냥 렌더링 될 todo list 컴포넌트이다. 이 컴포넌트가 받아야할 prop은 이미 text인것을 알기에 text를 넣어주고 랜더링 해준다. 이제 홈컴포넌트에서 각 text를 넣어주면 된다. spread를 사용해 보내줬다. 위 코드는 익숙한 방식으로 풀어보면 요렇게 되겠다. 이렇게 todo가 넘어가고 destructure로 {text}만 받는 구조. 자 그럼 생각해보자 home 컴포넌트는 이미 connect를 연결해서 state와 dispatch를 해줬다. home은 state도 필요했고 dispatch도 필요했으니 mapState와 mapDisp..

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

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

직장 구하면서 포트폴리오 사이트 하나를 만들었는데.. 뭔가 코드가 너무 지저분해 보였다.. 기존 코드다 ㅡㅡ;; 모달창 하나 띄우는데 코드를 이렇게 많이쓰다니.. 형편없다.;; 포트폴리오 라우터에서 각각의 포트폴리오당 모달창을 띄우는데 flag를 각각에 주고 각각을 실행하다보니 가가가가가가각이다.. 그래서 아침에 급하게 이번에 배운 useTab을 활용해 볼까했다. 이미 npm에 배포는 되어있으니 설치를 해주고 네개나 쓰던 modal flag를 하나도 줄였다. 그리고 useTabs를 사용해서 portDatas를 배열 인자로 넣어주었다. closeModal 함수도 간결해졌다. 하나니까.. 그렇게 하고서~ 포트폴리오 데이터 스테이트를 map함수를 이용해 각각 화면에 띄워준다. onClick시 setModal을..

Socket.IO 는 WebSocket을 기반으로 클라이언트와 서버의 양방향 통신을 가능하게 해주는 자바스크립트 라이브러리이다. 브라우저와 Node.js용 서버 측 라이브러리, 두 부분으로 구성된다. 먼저 MDN에서 websocket이 무엇인지 살펴보자. 웹 소켓은 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술이다. 개발자는 웹 소켓 API를 통해 서버로 메세지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다. HTTP를 생각해보면 HTTP는 stateless 이다. 그래서 클라이언트에 접속해서 서버로 get이나 post요청을 하게되면 응답이 이루어지게 되는데 이 하나의 과정이 끝나면 서버와의 연결이 끊긴다. 서버가 유저를 지속적..