본문 바로가기

개발(Development)/JS(자바스크립트)80

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.
자바스크립트 로드 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.
Javascript 페이지 이동, 현재 주소 확인: window.location # window.location 속성 1. 브라우저의 최상위 전역객체인 widnow 에 정의된 속성이다. 2. 브라우저 접속 주소와 관련된 프로퍼티, 메서드를 보유하고 있다. 3. 주로 아래와 같은 일을 수행하는데 활용한다. 1) 현재 접속 중인 URL 주소 파악 2) 새로고침 3) 다른 URL 주소로 페이지 이동 # location 페이지 이동 관련 프로퍼티와 메서드 1. location.href 프로퍼티 1) "현재 접속 중인 URL 주소"를 확인할 수 있다. // 1-1. 현재 접속중인 주소URL 체크 location.href; // 출력결과: http://dogumaster.com 2) 다른 URL 주소 설정 시, 해당 페이지로 이동한다. // 1-2. 다른 주소 URL로 이동 location.h.. 2021. 6. 30.
자바스크립트(JS): 서버 비동기 http 요청 및 데이터 전송(AJAX) 브라우저 상에서 순수 자바스크립트만으로 서버에 비동기 AJAX 요청 및 데이터 전송하는 방법을 정리합니다. (JQuery를 사용하지 않습니다.) 1. XMLHttpRequest 객체 생성 : HTTP 요청 전용 객체인 XMLHttpRequet객체를 생성한다. const request = new XMLHttpRequest(); 2. request 객체 초기화 설정 : 요청 메서드, 경로, 비동기 여부를 설정한다. request.open('메서드', 'URL경로', '비동기 여부') * 메서드 : GET, POST, ... * 비동기여부 : true(비동기, 디폴트값), false(동기) 3. 전송 데이터 타입 설정 : POST/PUT 등으로 데이터를 보낼 때는, RequestHeaer를 아래와 같이 설정해.. 2021. 6. 27.
Javascript: Audio 사운드 하나를 연속하여 반복/중복 재생하는 방법 Audio객체는 play()가 호출되어 재생이 시작 되면, 끝까지 재생이 완료되기 전에는 반복 호출하여 재생할 수 없다. 아래 코드는 for문으로 Audio객체.play()를 10회 반복 호출하지만, 브라우저에서 실행해보면 단 한번만 재생된다. (크롬을 제외한 브라우저에서 실행해보시길. 크롬은 사용자의 액션이 없는 상태에서의 오디오 자동재생이 금지되어 있다) 그러나 경우에 따라서는 동일한 음원 파일을 연달아 바로 재생해야할 때가 있다. 특히 게임 개발 중에는 미사일을 발사할 때마다 효과음이 중첩 재생되어야 한다. 필요할 때마다 매번 새로운 Audio 객체를 생성하여 재생하는 것도 방법이지만, 이 경우 Audio 리소스 로드에 시간이 걸려서 딜레이가 발생할 수 있다. 가장 좋은 방법은 미리 여러개의 Aui.. 2021. 6. 22.
JS: DOM 이벤트 리스너로 객체의 메소드 연결 시, this가 변경되는 문제 자바스크립트에서 생성자함수나 class 등을 통해 객체(인스턴스)를 생성한 후, HTML 엘리먼트의 이벤트 리스너로 객체(인스턴스)의 메서드를 연결하면, 객체의 메서드 내부에서 사용된 this가 객체 본인이 아닌, HTML엘리먼트를 가르키는 문제가 발생한다. # 문제 상황 문제가 발생하는 코드는 아래와 같다. 브라우저 상에서 keydown이벤트가 발생하면, 객체의 keyList 배열에 키보드값을 push하는 코드다. (정확히는 프로토타입 메서드 부분이 다르지만, 그냥 넘어가자.) 위 코드를 브라우저에서 실행한 후, 키보드에서 엔터키 등을 누르면 콘솔에 아래와 같이 출력된다. 1. 키보드 입력값은 Enter로 잘 찍힌다. 2. this가 document로 찍힌다: keyboardTracker가 아니다. 3.. 2021. 6. 21.
HTML/JS: Audio 객체 음악 파일 제어 및 사운드 재생/정지 방법 HTML에서 오디오를 재생하는 방법 2가지를 정리한다. 1. HTML의 audio 태그를 이용하는 방법 2. Javascript의 audio객체를 이용하는 방법 참고로, 크롬 브라우저에서는 autoplay가 금지되어 자동재생이 불가하다. 1) HTML에서 코드는 자동 재생되지 않으며, 2) Javascript에서 사용자의 액션이 없는 상태에서의 audio객체.play() 코드도 작동하지 않는다. 상황에 따라 아래와 같은 로그가 뜰 수도 있다. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 오디오 자동재생이 사용자 환경에 좋지 않다고 판단한 크롬의 정책이라는 것.. 2021. 6. 19.

티스토리툴바