본문 바로가기

분류 전체보기518

웹소켓(Web Socket) 온라인 테스트 사이트 # 웹소켓 연결 및 데이터(메세지) 전송 테스트 사이트 - 주소 : https://www.websocket.org/echo.html # 온라인 웹소켓 테스트 방법 1. 접속 - https://www.websocket.org/echo.html 주소로 접속한다. 2. 연결 1) Location에 연결할 WebSocket 서버의 주소를 입력 2) Connect 클릭시 연결, Disconnect 클릭시 연결 종료 3) Log 항목에 연결(Connected) 로그와 서버로 부터 받은(RECEIVED) 메시지가 출력 된다. 3. 데이터 전송 1) Message에 전송할 메시지 입력 2) Send 버튼 클릭시 데이터 전송 3) Log 항목에 보낸(Send) 메시지와 서버로 부터 받은(RECEIVED) 메시지가 출력 .. 2021. 7. 3.
[맛있는녀석들] 전체 맛집 리스트(엑셀): 최신 업데이트 맛있는녀석들 전회차 전국(서울 포함) 리스트입니다. 식당의 위치 는 아래 지도 사이트에서 확인할 수 있습니다.https://www.dogumaster.com/map/tv?channel=tg  백반기행 리스트는 이 글을 참고하시기 바랍니다.생활의달인 리스트는 이 글을 참고하시기 바랍니다.백종원의골목식당 리스트는 이 글을 참고하시기 바랍니다. 전국 냉면 맛집지도는 이 글을 참고하세요!전국 떡볶이 맛집지도는 이 글을 참고하세요! 데이터가 너무 많아진 관계로 2023.7월 이후의 정보는TV맛집 지도 사이트 (https://www.dogumaster.com/map/tv?channel=tg) 에서 확인하시기 바랍니다.방송 회차지역1지역2식당메뉴1경기파주시맷돌우리콩감자탕콩비지 감자탕1인천남동구부암갈비생돼지갈비2인천중.. 2021. 7. 2.
Node.js: Web Socket 통신 - ws모듈 사용 방법 # 웹소켓(Web Socket)이란? : ws프로토콜을 이용하는 양방향 통신방식이다. : ws프로토콜은 한번 연결되면 "연결을 끊지 않고 계속 유지"한 상태로 "클라이언트와 서버가 서로 데이터를 주고 받는다" : 따라서 서버 하나에 여러 클라이언트가 붙어서 지속적으로 데이터를 주고 받아야하는 서비스에 유용하다. : HTTP 통신의 경우, 클라이언트가 요청을 하고 서버가 응답을 하면 바로 연결이 끊어진다. 예를 들어 채팅서비스의 경우, 계속해서 새로운 메시지가 있는지 확인해야 하는데 웹소켓을 이용하면 매번 서버에 요청할 필요 없이 계속해서 새로운 데이터를 받을 수 있다. 기존에 연결된 통로를 통해 추가 요쳥이 없어도 서버에서 데이터를 보내줄 수 있기 때문이다. * 참고: 웹소켓 지원 전에는 클라이언트가 서.. 2021. 7. 2.
Javascript: URI, URL, QueryString과 인코딩/디코딩 정리 # URI(Uniform Resource Identifier) : 인터넷에 있는 자원을 나타내는 유일한 주소 * URI, URL(Uniform Resource Locator), URN(Uniform Resource Name)의 차이는 아래 그림 참고 * 연관된 개념인 Scheme(Protocol), Host(Domain), Port, Path, Query String, Search, Fragment는 아래 그림 참고 # URI 인코딩이란? : URI의 문자들을 이스케이프 처리하는 것 # 이스케이프 처리란? : 어떤 시스템에서도 읽을 수 있는 아스키(ASCII) 문자셋으로 변환하는 것 # 즉, URI 인코딩이란? : 네트워크 등를 통해 정보를 공유할 때, 어떤 시스템에서도 읽을 수 있도록 URI의 문자들을.. 2021. 7. 2.
Node.js: NPM 명령어 정리, package.json(+scripts) 생성 및 사용 방법 # NPM(Node Package Manager)이란? - Node.js 전용 패키지가 올라가 있는 서버이다. - 패키지 업로드/다운로드 및 버전관리 기능을 제공한다. - node.js를 설치할 때 함께 설치된다. * 패키지는 남들이 만들어 놓은 외부모듈로, 라이브러리 같은 개념이다. * NPM 공식 사이트: https://www.npmjs.com/ # package.json 생성 - 수많은 패키지를 다운받다보면 관리가 어려워진다. - 그래서 프로젝트마다 package.json 파일을 만들어서 패키지 목록 및 버전을 관리한다. * 프로젝트를 생성하자마자 package.json을 만들어주고 시작하길 권장한다. - 명령어: npm init 1) package name 등의 정보를 입력해준다. 필요 없는 항목.. 2021. 7. 1.
TED 스크립트 확인 및 문장별 구간반복 영어 공부 방법 TED 영상을 통한 영어공부 방법을 간단하게 정리해본다. TED 사이트는 자체적으로 영어 스크립트를 제공할 뿐만 아니라, 단락/문장 단위로 구간반복하여 청취할 수 있는 기능도 제공한다. 1. TED 사이트 접속 1) https://www.ted.com/ 사이트 접속 2) Watch 메뉴 클릭 3) TED Talks 메뉴 클릭 * 한번에 https://www.ted.com/talks 으로접속해도 된다. 2. 사용언어: 한국어로 변경 : 사이트의 언어를 한국어로 변경한다.(필수X) 1) Languages 클릭 2) 한국어 선택 3. 정렬방식: 많이 시청한 순으로 변경 : 사람들이 많이 시청한 순으로 영상을 정렬한다.(필수X) 1) Sort By 영역 클릭 2) Most Viewed 선택 4. 영상 선택 : .. 2021. 7. 1.
GitHub 토큰 인증 로그인: Personal Access Token 생성 및 사용 방법 Git Hub에서 ID/PW기반의 Basic Authentication 인증을 금지하고, ID/Personal Access Token 방식의 Token Authentication 인증을 요구하고 있다. 앞으로는 소스코드를 push/clone하려고 하면, 아래와 같은 문구가 뜨면서 잘 되지 않는 상황이 발생할 수 있다. Password authentication is temporarily disabled as part of a brownout. Please use a personal access token instead. Please see https://github.blog/2020-07-30-token-authentication-requirements-for-api-and-git-operations/ .. 2021. 6. 30.
티스토리 블로그: 사이드바 이미지 배너, HTML 배너 출력 추가 설정 방법 티스토리 블로그는 사이드바에 이미지 배너와 HTML 배너를 출력하여 노출시킬 수 있다. # 티스토리 사이드바 배너 추가 방법 1. 배너출력 설정 2. 사이드바에 배너 추가 3. 배너 상세내용 편집 # 이미지 배너 출력 방법 1. 배너출력 설정 1) 플러그인 > 배너출력 2) "적용" 설정 2. 사이드바에 배너 추가 1) 꾸미기 > 사이드바 2) 이미지 배너 "+" "이미지 배너출력"의 + 버튼을 누른 후, 배너를 위치시킬 사이드바 영역을 선택합니다. 3) 편집 우측에 생긴 "이미지 배너" 영역에 마우스를 가져가면 "편집" 버튼이 노출됩니다. 클릭해줍니다. 4) 상세 사항 입력 - 이름: 배너의 이름을 입력합니다. (따로 노출되는 건 아니고, 배너들을 구분하기 위한 이름) - 이미지URL: 이미지의 주소를.. 2021. 6. 30.
자바스크립트 로드 script 태그: async/defer 비동기 속성 HTML에서 자바스크립트를 사용할 때 1. script태그 내부에 JS코드를 작성하거나, 2. script태그의 src속성을 통해 외부 JS파일을 불러온다. # 기존 JS 로드의 문제점 그런데 브라우저는 HTML, Javascript를 위에서 부터 순차적으로 파싱하는 관계로, HTML이 파싱되지 않은 상태에서 Javascript를 사용할 경우, HTML 엘리먼트를 참조하지 못하는 문제가 발생한다. HTML 입니다. # 기존의 JS 로드 문제 해결 방법 그래서 보통 2가지 방법을 사용했다. 1. body의 최하단에서 javascript 사용 : HTML이 모두 파싱된 다음 Javascript가 HTML태그를 사용한다. HTML 입니다. 2. window.onload 이벤트 리스너 등록 : window 로드.. 2021. 6. 30.

티스토리툴바