Web Browser (14) 썸네일형 리스트형 REST API 설계 REST API 설계시 유의 사항 1. /는 계층 관계를 나타내는데 사용한다. // houses Collection에 있는 apartments Collection에 있는 banpojayi id 21번 Element에 접근 GET /houses/apartments/banpojayi/21 2. Resource에 대한 행위는 HTTP Method로 표현한다. 1번 사용자의 정보 조회 REST API // X GET /users/show/1 // O GET /users/1 3. Method는 URL에 포함하지 않는다. //X POST /users/1/update-posts/1 //O PATCH /users/1/posts/1 4. URL 마지막엔 /를 포함하지 않는다. // X /users/ // O /users.. localstorage,sessionstoage,cookie 1 Cookie - 웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. - 쿠키는 개수와 용량에 있어 제한을 걸어 두고 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이며, 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다. - 쿠키는 만료일자를 지정하게 되어 있어 언젠간 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. (만료일자를 지정하지 않으면 세션 쿠키가 된다.) Cookie의 장/단점 + 장점 : 대부분의 브라우저에 지원이 다 된다. - 단점 : api가 한번 더 호출되므로 서버에 부담이 증가된다. 2. WEB STORAGE Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이.. Ajax , Axios , Fetch (비동기 http통신) Ajax ajax는 JavaScript에서 비동기 HTTP 통신이 가능하도록 해줍니다. 비동기통신은 일부의 정보만 요청하기때문에 전체 화면을 랜더링하지 않고 점진적으로 해당 부분의 사용자 인터페이스를 갱신할 수 있습니다. 장점 : jQuery를 통해 쉽게 구현이 가능하다. error, success, complete의 상태를 통해 실행흐름을 쉽게 조절할 수 있다. 단점 : jQuery를 사용해야한다. promise기반이 아니다. 기존에 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아닙니다. 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상.. event.currentTarget , event.target 차이점 나는 나다 우리나라 currentTarget는 이벤트를 등록한 요소이기 때문에 listener를 붙여놓은 div태그 target는 이벤트가 발생한 요소이다. 만약 “나는 나다”를 클릭하면 p태그가 target가 되는 것이고, 만약 “우리나라”를 클릭하면 a태그가 target가 되는 것이다. currentTarget : 이벤트 리스너가 달린 요소 target : 실제 이벤트가 발생하는 요소 출저: currentTarget vs target 의 차이점 자바스크립트 - 도롱뇽 BLOG (nscworld.net) currentTarget vs target 의 차이점 자바스크립트 - 도롱뇽 BLOG 자바스크립트에서 e.currentTarget와 e.target의 차이점에 궁금한 사항이 있어서 포스팅합니다. 이벤트.. e.preventDefault()와 e.stopPropagation()의 차이점 1. e.preventDefault() import React, { FC } from 'react'; const App: FC = (): JSX.Element => { return ( 글 제목: 자바스크립트 좋아요 개수: 10 ); }; export default App; a 태그가 다음의 내용들을 감싸고 있는 상태에서 만약 좋아요 개수 라는 글자를 눌렀을 때만 href 속성에 있는 주소로 가는 이벤트를 막아주고 싶을때는 어떻게 적으면 될까요? 정답은 간단합니다. 좋아요 개수라는 글자를 눌렀을 때만 onClick 속성에다가 이벤트 객체를 이용하여 preventDefault() 처리를 해준다면 좋아요 개수라는 글자를 눌렀을 때는 a태그에 등록된 주소로 이동하지 않게 됩니다. 이 처럼 preventDefau.. WebRTC WebRTC 브라우저에서 별도의 소프트웨어 없이 실시간으로 통신을 가능하게 해주는 웹을 위한 오픈 프레임워크이다. 비디오와 음성 채팅 어플리케이션에서 사용되는 오디오와 비디오와 같이 높은 퀄리티의 의사소통을 위한 기본적인 것들을 포함한다. -> 줌 화상통화 보통 브라우저에서 실행할때 JavaScript API를 통해 실행할 수 있어 개발자들로 하여금 쉽게 RTC web app을 실행하는 것이 가능하다. WebRTC API RTC는 비디오,오디오 데이터를 주고받을때 서버가 필요하지않지만 offer를 주고받기 위해서 서버가 필요 RTC 양쪽 브라우저 연결(각각은 따로 설정한담에 서버에서 socket.io사용해서 연결) -첫번쨰단계 : 입장시 미디어 데이터를 불러옴[getUserMedia] -두번쨰단계 : p.. MediaDevices MediaDevices MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법입니다. 속성 부모 인터페이스인 EventTarget의 속성을 상속합니다. 이벤트 devicechange (en-US)사용자 컴퓨터에 미디어 입출력 장치가 추가되거나 제거됐을 때 발생합니다. ondevicechange (en-US) 속성으로도 사용할 수 있습니다. 메서드 부모 인터페이스인 EventTarget의 메서드를 상속합니다. enumerateDevices()시스템에서 사용 가능한 미디어 입출력 장치의 정보를 담은 배열을 가져옵니다. getSupportedCo.. socket.io Socket.IO socket.io는 웹소켓을 이용해 클라이언트에 실시간으로 데이터를 전송한다. socket.io는 Socket을 구현한것으로 WebSocket 개발을 쉽게 하기 위한 것이다. 클라이언트에서 Event Listener로 새로운 정보를 받아 정보를 업데이트할 수 있다. Socket.IO는 실시간 웹 애플리케이션을위한 JavaScript 라이브러리입니다. 웹 클라이언트와 서버간에 실시간 양방향 통신이 가능합니다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js 용 서버 측 라이브러리의 두 부분으로 구성됩니다. socket.io 활용되는 곳 실시간 분석, 메시지, 채팅 바이너리 스트리밍, 문서 공동작업 등 [특징] Node.js 라이브러리로 실시간 웹 기술을 손쉽게 사용할 수 있.. 이전 1 2 다음
