이 기술 블로그를 만들기 위해 5년을 미뤘다.

자바스크립트에서는 input type="file" 태그를 이용하여 이미지를 포함한 다양한 확장자의 파일을 업로드할 수 있다. 만약 이미지만 업로드하게끔 제한하고 싶다면 accept="image/*" 프로퍼티를 추가하면 된다. 이와 비슷하게 비디오 파일만 업로드하고 싶다면 accept="video/*", 오디오 파일만 업로드하고 싶다면 accept="audio/*" 이렇게 사용하면 된다. 혹은 특정 확장자만 허용하는 방법도 있다. 예를 들어 아래와 같이 작성하면 png, jpeg 확장자를 갖는 이미지만 업로드가 가능하다. // png, jpeg 확장자를 갖는 이미지만 업로드 허용 // 혹은 이제 업로드한 이미지 미리보기를 구현하는 방법을 알아보자. 미리보기를 구현하기 위해 널리 사용되는 두 가지 방법으로는..

window 전역 객체 내에는 location, navigator, web storage 등 다양한 프로퍼티가 존재한다. var 키워드로 선언된 전역 변수 또한 window 전역 객체의 프로퍼티로 접근이 가능하다. window 전역 객체는 식별자 window.을 앞에 붙이지 않고도 객체 내 프로퍼티에 접근이 가능하다. const path = window.location.pathname; const path2 = location.pathname; console.log(path === path2); // true window.navigator에 포함된 값으로 userAgent라는 값에 접근이 가능한데, userAgent는 HTTP 요청을 보내는 디바이스와 브라우저 등의 사용자 식별 정보를 담고 있는 head..

Typescript 타입 + 자바스크립트 브라우저에서 실행하려면 별도의 컴파일 과정 필요 장점 에러의 사전 방지 의도하지 않은 타입의 인자가 전달되었을 때 런타임(브라우저)이 아닌 개발 단계에서 오류를 탐지하여 수정할 수 있음 코드 가이드 및 자동 완성 용이 VSCode에서 해당 변수의 타입에 맞는 메소드 자동 완성 타입이라는 개념은 크게 아래 5가지를 의미 type alias interface class enum import 구문 JSDoc 소스코드 파일에 주석을 달기 위해 사용되는 마크업 언어 자바스크립트에서 타입스크립트처럼 코딩 가능 typedef / property를 사용하여 타입에 대한 힌트 제공 가능 /** * @typedef {object} Address * @property {string}..

타입스크립트에서 타입을 선언하는 방식에는 type 키워드를 사용한 type alias 방식과 interface 키워드를 사용한 방식 2가지가 있다. Type Alias type Point = { x: number; y: number; }; type SetPoint = (x: number, y: number) => void; Interface interface Point { x: number; y: number; } interface SetPoint { (x: number, y: number): void; } 둘의 차이점은 다음과 같다. 1. interface는 동일한 이름으로 재선언 가능 interface에서는 동일한 이름을 갖는 인터페이스를 중복하여 선언할 수 있다. 이를 선언 병합(Declaratio..

자바스크립트의 원시형 데이터 타입으로는 총 6가지가 있다. 숫자(Number) 문자열(String) 불리언(boolean) undefined null 심볼(Symbol) 그 중에서도 심볼이라는 타입이 있는데, 추가된 지도 얼마 안됐고(ES6) 보통 잘 사용되지는 않다 보니 지금까지 이게 뭘까 싶었는데, 오늘에서야 공부를 하게 됐다. 오늘은 심볼 타입에 대해 알아보자! 먼저, 심볼의 정의부터 알아보자면, 심볼(Symbol)이란? 다른 값과 중복되지 않는 자료형(unique) 이다. 심볼은 유일성이 보장되는 자료형이기 때문에 일반적으로 심볼 타입은 객체의 프로퍼티 키로 사용된다. 그럼 심볼 값은 어떻게 생성하며, 또 어떻게 사용할 수 있는지 알아보자! 심볼 값 생성 심볼 값은 Symbol() 함수를 호출하여..

Javascript에서 클라이언트와 서버 간 데이터를 주고받기 위해 사용되는 비동기 HTTP 통신 방식으로는 대표적으로 fetch, axios, ajax 등이 있다. 이들의 공통점과 차이점을 알아보자. fetch 별도의 설치 없이 모던 브라우저에서 사용 가능 POST, PUT 요청의 경우에는 body에 데이터를 실어 보냄 fetch(`/payload`, { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pname }) }).then(res => { // ... }) 단점 - IE에서는 지원하지 않으므로 polyfill 주입 필요 (chrome 42+, firefox 39+, edge 14+, s..

HTML 파일에서 외부 js 파일을 가져오는 방법은 다음과 같다. 그럼 여기서 궁금한 점이 발생한다. script 태그의 위치는 어디에 위치해야 할까? 보통 브라우저는 HTML 문서를 파싱할 때, 위에서부터 차례대로 파싱하게 된다. 그렇기 때문에 파싱 과정에서 script 태그를 만나면 해당 js 파일의 다운로드가 완료될 때까지 DOM 생성을 멈춘다. 따라서, 스크립트가 페이지 생성을 막아버리므로 사용자는 스크립트를 다운받을 때까지 스크립트의 아래에 위치한 페이지를 볼 수 없게 된다. 이러한 이유 때문에 보통 script 태그는 보통 body의 최하단에 위치하는 게 일반적이다. 하지만 script 태그가 맨 아래에 위치하게 된다면, HTML 문서를 다운로드한 후 스크립트를 다운받아 실행하므로 페이지 로딩..

보통 자바스크립트로 애니메이션을 구현해야 할 경우, setInterval과 requestAnimationFrame을 이용한 방식이 가장 많이 사용된다. 나는 setInterval을 주로 사용했었는데, setInterval로 만든 애니메이션의 경우에는 같은 애니메이션을 동시에 여러 번 호출하는 경우 애니메이션이 꼬이면서 버벅임이 발생할 수 있다는 단점이 있다. (애니메이션 함수가 종료되기 전에 이벤트를 실행하는 경우에는 중첩돼서 이벤트가 실행되기 때문에 clearInterval로 기존 이벤트를 지워줘야 함) 그래서 이번에 requestAnimationFrame으로 코드를 리팩토링하면서 알게 된 setInterval과 requestAnimationFrame의 차이점을 간략히 정리했다. setInterval ..

실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성 → 해당 실행 컨텍스트를 콜 스택에 저장 → 선입후출(stack)로 코드들을 실행하여 전체 코드의 환경과 순서 보장 예시 /* 여기는 전역 컨텍스트입니다. */ var a = 1; function outer() { /* 여기는 outer 함수의 컨텍스트입니다. */ function inner() { /* 여기는 inner 함수의 컨텍스트입니다. */ console.log(a);// undefined 출력var a = 3; } inner(); console.log(a);// 1 출력 } outer(); console.log(a);// 1 출력 : 차례대로 전..

This 실행 컨텍스트가 생성될 때(=함수가 실행될 때) 결정됨 실행 컨텍스트 생성 당시 this가 지정되지 않은 경우에는 전역 객체가 대신 저장됨 자바에서의 this와는 다른 개념 자바에서는 클래스로 생성한 인스턴스 객체를 의미 자바스크립트에서는 어디서든 this라는 개념이 사용될 수 있음 전역 공간에서의 This 전역 객체를 가리킴 브라우저에서는 window이고, node.js에서는 global 전역 변수 생성 시, 자바스크립트 엔진은 해당 변수를 전역 객체의 프로퍼티로 할당 var a = 1; console.log(a); // 1 console.log(window.a); // 1 console.log(this.a); // 1 // → 스코프 체인을 탐색하면서 전역(window)객체의 프로퍼티를 탐색..