공부의 발자취를 남기는 블로그

WebRTC란? 1. P2P 통신을 지원함(Peer-to-Peer) 2. 비디오, 오디오, 각종 데이터를 빠르게 통신가능 (P2P로 오는 장점) 3. 이에따라 낮은 지연시간이 지원됨. Socket.io같은경우는, 모든 데이터가 소켓서버를 경유하기때문에, 어느정도 지연시간이 필연적이지만, WebRTC는 P2P시스템을 지원하기에, 연결만 된다면 서버없이 클라이언트끼리 직통으로 데이터교환이가능하다. 특히, 데이터 크기가 큰 비디오, 오디오를 보낸다는것이 특징! WebRTC는 3가지로 나뉜다. 1. Mesh : 1:1 과같은 화상통화인경우 많이사용한다. Mesh는 사용자가 늘어날수록, 오고가는 트랙이 점점 많아지므로 가급적 적은 유저의 화상통화일경우만 쓰인다. P2P의 특징이 가장 잘 살아나는 경우다. 2. M..

본격적으로, Socket.io를 사용해 볼것이다. Socket.io는 기본적으로 JS에 친화적이라, Node.js와 상성이 잘맞는다. 물론, Spring에 Socket.io를 의존성을 부여해 구현할수 있지만 이에 대해선 지금 다룰게 아닌것같다. 시작하기전에 준비 Node.js 설치, Socket.io 설치 , express서버 설치 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 JS를 설치하면 npm 키워드를 사용할수 있게된다. npm 키워드를통해, npm install socket.io 코드를 입력하여 소켓.io를 설치하자. 또한, 우린 서..

WebSocket... 쓰기전에 webSocket을 왜? 쓰는지부터 파악을해보자! 우리가 갑자기 프로젝트에서 실시간 채팅방 시스템을 만들어야한다!! 여기서 말하는 "실시간"은 나와 상대방이 계속 연결되어 있어야한다. 헌데, 우리가 메세지를 보내는 행위는 POST 요청을 할것이다. HTTP 기초를 배웠다면, 기본적으로 통신은 무상태(stateless) 이다. 이유는 간단한데, 서버와 클라이언트를 계속 유지시키는건 서버낭비가 심하기때문이다. 이런 무상태에서 메세지를 보내면(POST) , 기본적으로 Re-Rendering (새로고침) 이 발생하고, 기존에 적었던 채팅메세지는 전부 홀라당 까먹어버린다. 그리하여, 실시간 채팅 또는 화상통화 같은경우 연결상태(Stateful) 가 되야한다. 그 Stateful를 ..

리액트로 영화 웹 서비스를 클론코딩을 해보려고한다. App.js 이 js에서 REST API를 작성한다. index 페이지는 Home.js로 영화 상세페이지는 /movie/{id} 이다. Home.js 첫 화면을 담당하는 Home.js 코드다. 우선, Home() 함수에 들어갈 loading, movies의 useState()를 작성 그후, getMovies 함수로 JSON 파일을 받아온다. 이는, 로딩이 걸리는 작업이니 asyn await 로 비동기처리를 하였다. useEffect로 getMovies()를 딱 한번만 re-rendering 하게 만들어준다. return 으로 그리고 싶은 HTML코드를 입력하자. 불러온 영화들을 처리하는 로직이다. 불러온 영화들의 JSON 데이터를 파라미터로 받아, 필요..

만들기전에 알아야할 React 개념: React.useState(): -> 이 문법은 하나의 오브젝트와, 그 오브젝트를 수정하는 메소드를 함께제공한다. EX) const [zip , setZip] = React.useState(""); 이걸 이용해서, zip이란 문자를 setZip으로 새로 바꿀수있다. 물론 문자말고 다른것도 가능하다. Fuction App()을 생성하자. toDo로 할것을 저장할 Strng과 할것들을 저장할 toDos 배열을 useState로 오브젝트와, 수정자를 만들어준다. 이벤트로는 onChange, onSubmit을 준비한다. App의 리턴으론 html코드를 작성한다. My to Dos 의 옆에 리스트의 길이를 반영하고, form을통해 할것을 작성해서 리스트의 추가한다. 추가한 리..

React가 자바스크립트의 라이브러리로, 그냥써도 좋지만 더 간편하고 효율적인 코딩환경을 지원하는 기술이 있다. 리액트 팀에서 지원하는 Creat-React-App 기능이다. 얻을수 있는이점 1.코드의 변경이있으면 브라우저 화면에 컴파일없이 즉시 반영을 해준다. 2.리액트에서 자동으로 서버를켜줌 3.빌드도 지원해줌. 4. 테스트도 지원해줌 등등.. 즉시 사용해보자. 우선 사전작업으로 Node.js라는걸 설치해야한다. npm이란 패키지 관리자를 사용하기위함이다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 여기서 LTS버전을 다운받는걸 추천한다. ..

React.js는 Javascript 의 라이브러리로써, 자바스크립트를 더욱 쉽게 개발할수있게 나온 기술이다. Jquery vs React? 이런 특징이 있다. 여기서 jQuery가 왜 더 느리고 , React가 좀 더 빠른지 코드를 보면 알 수 있다. JQuery 여기서 JQuery문법은 사용되지않았지만, 실행되는 원리는 같다. (JQuery는 가독성좋게 체인형식으로바꿔주는것) 다음과같은 처리방식이다. 1. 우선, body에서 요소를 가져옴 2. 그 요소를 가져와서 만들어둔 함수를 이벤트리스너로 넣어줌. 3. 해당요소를 다시 html에 업데이트 한마디로 개발자가 직접 DOM 요소를 뽑아와 수정하고 뿌리는형식이다. 이와 같은 방식을 요청이 들어올때마다 반복한다. React React는 다음과같은 동작방식..

이번에는 JQuery에서 사용하는 애니메이션쪽의 일부분을 가져왔다. 예시 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 span { color:red; cursor:pointer; } div { margin:3px; width:80px; height:80px; } div { background:#f00; } target $('input[type="button"]').click( function(e) { var $this = $(e.target); switch(..

jQuery에서 요소를 탐색하는 기능에 주로 탐색해보자 1 .add(selector) : 타겟에 엘리먼트를 추가 (merge) ex) $('#root').add('li') 2 .andSelf() : 타겟에 이전 설정을 추가해줌 EX) $("div").find("p").andSelf().addClass("border"); -> div태그에 p태그를 찾아 추가, 그리고 border클래스를 적용 3 .children([selector]) : 자식 엘리먼트를 추가 4.closest(selector): 가장 가까운 조상(부모) 엘리먼트를 탐색 5 .each(function(index,Element)) : 현재 엘리먼트셋에 반복작업을 실시한다. EX: $('.list li').each(function (index,..

폼 (form) 관련 jQuery 기능 Input 칸 관련 기능 1. focus() : input에 커서가 올라와있을때 이벤트 2. blur(): input커서가 올라온뒤 사라질때 일어나는 이벤트 3. change() : input 값이 바뀌어지면 일어나는 이벤트 4. select() : input 값을 드래그하면 일어나는 이벤트 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 span { } $("input").focus( function () { $(this).next("span").html('focus'); }).blur( function() { $(this).next("span").html('blur'); }).cha..