본문 바로가기

개발(Development)273

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.
자바스크립트 로드 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.
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.

티스토리툴바