FrontEnd/Javascript (26) 썸네일형 리스트형 Socket.io 에 대하여 #socket.io-client 출처: https://inpa.tistory.com/entry/SOCKET-%F0%9F%93%9A-SocketIO-%EC%82%AC%EC%9A%A9-%ED%95%B4%EB%B3%B4%EA%B8%B0 ( ****정말 잘쓴 블로그****) https://smaivnn.tistory.com/2#article-1--socket-io-%EC%9D%B4%EB%9E%80? https://velog.io/@fejigu/Socket.IO-client 1. Socket.io 이란? socket.io를 알아보기 전, 웹 소켓에 대해 먼저 알아보자. 웹 소켓은 HTML5에 새로 추가된 실시간 양 방향 데이터 전송을 위한 기술이다. http가 아닌 ws프로토콜을 사용하며, 따라서 브라우저, 서버.. 이벤트 리스너, 콜백, 이벤트 버블링에 대하여 이벤트 리스너 이벤트 리스너는 말 그대로 해당 이벤트에 대해 대기중인 겁니다. 항상 리스닝 중이죠. 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행됩니다. window.onload = function () { alert('I\'m loaded'); }; 위의 코드를 보신 적이 있을지 잘 모르겠습니다만, 이 코드가 대표적인 이벤트 리스너입니다. window가 load될 때에 function 부분이 실행되는거죠. load됐다는 것을 누가 알려주냐면, 브라우저가 알려줍니다. 비슷한 코드로, 그리고 자주 쓰이는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + '이벤트명'으로 명명됩니다. 자주 쓰이는 이벤트의 목록을 알려드리자면, onblur(객체가 focus를 잃었을 때), onchan.. 자바스크립트의 this #자바스크립트 this #js this 출처: https://poiemaweb.com/js-this (this뿐만 아니라 apply/call/bind까지다루고 있다) 요약: Java와 달리 자바스크립트의 경우 Java와 같이 this에 바인딩(식별자와 데이터를 연결)되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다(하지만 내 생각에는 어떻게 호출했는가 뿐만 아니라 어떻게 선언 되었는가도 영향을 주는것 같다. 아래의 예시를 보면 객체안에 함수표현식 방식으로 선언된 함수에서의 this는 해당.. 비동기식 처리 모델과 Ajax 출처: https://poiemaweb.com/jquery-ajax-json 1. Introduction 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 전환이 발생한다. 이것은 브라우저와 서버와의 통신에 의한 것이다. 서버는 요청받은 페이지(HTML)를 반환하는데 이때 HTML에서 로드하는 CSS나 JavaScript 파일들도 같이 반환된다. 클라이언트의 요청에 따라 서버는 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 서버로부터 웹페이지가 반환되면 클라이언트(브라우저)는 이를 렌더링하여 화면에 표시한다. Traditional Web Page Lifecycle Ajax(Asynchronous JavaScript and XML)는 자바스크립트.. JSON, JSON.parse()와 JSON.stringify() Deepdive p 819참고 JSON(JavaScript Object Notaion): 클라이언트와 서버 간의 HTTP통신을 위한 텍스트 데이터 포맷. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포멧으로 대부분의 프로그래밍 언어에서 사용할 수 있다. JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트이지만 JS의 객체 리터럴과 약간은 다르다. JSON의 키는 반드시 큰따옴표(작은따옴표 사용 불가)로 묶어야 한다. 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다. 하지만 문자열은 반드시 큰따옴표(작은 따옴표 사용불가)로 묶어야 한다. 서버에서 클라이언트로의 데이터전송, 클라이언트에서 서버로의 데이터 전송 모~두 JSON포멧의 문자열로 이루어진다. 직렬화(Ser.. 실행 컨택스트 참조: https://www.youtube.com/watch?v=EWfujNzSUmw (복습. Closure함수: 자신이 선언 되었을 때 렉시컬 환경(렉시컬 스코프)을 기억하는 함수) (내생각)실행컨텍스트(환경), 스코프가 같은 의미로 쓰일수 있다. (내생각)실행컨텍스트: 코드 실행에 필요한 환경(조건이나 상태)을 모아둔 객체(즉 스코프역시 코드 실행에 필요한 조건이나 상태를 모아둔 영역이므로 스코프가 실행컨텍스트와 같은 의미일 수 있는것이다) 요약: 실행 컨텍스트이란? 코드를 실행하는데 필요한 환경을 제공하는 객체. 여기서 환경이란 코드 실행에 영향을 주는 조건이나 상태를 의미함. 식별자 결정을 더욱 효율적으로 하기 위한 수단으로써 필요한 정보를 한곳에 모아 제공하는 객체. 스코프 체인이란?: 스코프들.. 클로저(closure) 출처: https://poiemaweb.com/js-closure 요약. 클로저란? 자신(함수)이 선언되었을때의 렉시컬 환경(렉시컬 스코프,정적 스코프)을 기억하는 함수 자유변수: 클로저함수에 의해 참조되는 외부함수의 변수 1. 클로저(closure)의 개념 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로 자바스크립트에 관심을 가지고 있다면 한번쯤은 들어보았을 내용이다. execution context에 대한 사전 지식이 있으면 이해하기 어렵지 않은 개념이다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(L.. 함수 호이스팅 ing 출처: https://www.youtube.com/watch?v=fETYLCU2YYc 이전 1 2 3 4 다음
