본문 바로가기

분류 전체보기518

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.
VSCode 캔버스(Canvas), WebGL 자동완성 안됨 해결 방법: @type VIsual Studio Code 상에서 html canvas나 WebGL 작업을 하는데, 아래처럼 아무런 자동완성이 뜨지 않을 때가 있다. 매번 명령어를 검색해보기도 귀찮다. # 해결방법 : @type을 통해 VS Code에게 힌트를 주면, Canvas나 WebGL 컨텍스트 객체도 자동완성이 된다. 1. CanvasRenderingContext2 : canvas컨텍스트 객체 생성 전에, 아래처럼 @type 태그 주석을 달아준다 /** @type {CanvasRenderingContext2D} */ const canvas = document.getElementById("canvas_main"); /** @type {CanvasRenderingContext2D} */ const ctx = canvas.ge.. 2021. 6. 14.
[HTML/CSS] 자식 태그의 margin-top이 부모 div에 적용되는 현상 해결 방법 html/css 개발을 하다가 당황스러운 일을 겪어서 기록으로 남겨둔다. 중첩된 div 태그 구조에서, 자식 div에 margin-top을 주었는데, 부모 div에 margin-top이 적용되어버리는 사태가 발생한 것이다. (자식이 block 속성이면 발생하는듯 하다.) 즉, 아래 코드를 실행하면, 자식 아래와 같은 결과물이 나온다. 원래 기대했던 결과물은 이것이었을텐데 말이다. 상식적인 상황은 아니지만, 마진병합/마진상쇄(margin-collapse)현상의 일종이라고 한다. "부모 블록에 테두리, 패딩 등이 없고 별도의 min-height, max-height 등이 설정되지 않은 경우, 자식의 margin-top은 부모의 margin-top으로 적용된다." 해석이 맞나... 자세한 내용은 mozzila.. 2021. 6. 7.
HTML Canvas(캔버스) 마우스 이동/클릭 좌표 추적 확인 방법 # HTML 캔버스 내부의 마우스 좌표 확인 방법 1. HTML 캔버스 생성(html) 2. 캔버스 취득(Javascript) const canvas = document.getElementById("myCanvas"); 3. 마우스 클릭시, 캔버스내 좌표 확인 canvas.onclick = function(event){ const x = event.clientX - ctx.canvas.offsetLeft; const y = event.clientY - ctx.canvas.offsetTop; } * 캔버스 객체에 onclick 이벤트 콜백함수를 등록한다.(상황에 따라 onmousedown을 사용해도 된다) * 마우스의 좌표(event.clinetX, event.clinetY)와 캔버스의 위치(ctx.can.. 2021. 6. 6.
[식객 허영만의 백반기행] 전체 맛집 리스트: (최신 업데이트) 식객 허영만의 백반기행 전회차 전국(서울 포함) 리스트 지도입니다. TV맛집 지도 사이트에서한눈에 확인하실 수 있습니다. https://www.dogumaster.com/map/tv?channel=sg   맛있는녀석들 리스트는 이 글을 참고하세요.백종원의골목식당 리스트는 이 글을 참고하세요.생활의달인 리스트는 이 글을 참고하세요. 성시경의 먹을텐데 맛집 리스트는 이 글을 참고하세요.현주엽의 먹보스 쭈엽이 맛집 리스트는 이 글을 참고하세요오사카사는사람들TV 마츠다 부장님 일본맛집지도는 이 글을 참고하세요 아래 도표는 209회 이후 업데이트 되지 않습니다.위의 TV맛집지도 사이트에서 최신 맛집 정보를 확인해 주세요!회차정보지역1지역2식당메뉴209회(김동환&정영진 맛집)인천부평구부일안창살치마살육사시미&안창살구.. 2021. 6. 5.

티스토리툴바