일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- ES6
- Component
- NextJs
- JavaScript
- 자바스크립트
- backend
- HTML
- API
- javscript
- pug
- 리액트
- nodejs
- heroku
- clonecoding
- node.js
- react
- Session
- Flutter
- CLONE
- graphQL
- TypeScript
- Mongoose
- frontend
- form
- MongoDB
- CSS
- DART
- ECMAScript
- express
- GRID
- Today
- Total
목록분류 전체보기 (313)
Enjoy Programming

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가 된다. 그리고 받은..

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

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