1) 개념 TypeScript(이하 TS)는 C#의 창시자인 엔지니어가 개발을 주도하여 2012년 Micrsoft에서 발표한 오픈소스이다. 자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 SuperSet으로 자바스크립트 문법을 그대로 사용할 수 있다. 자바스크립트에 존재하지 않는 정적 타입을 지원한다. 그렇다면, 코드를 TS로 작성할 경우, 브라우저 혹은 엔진에서 TS 파일 자체를 읽는 것일까? 그 안에서는 어떤 동작이 이루어지고 있을까, 원리를 알아보자. 2) 원리 1. TS 컴파일러(TSC) 에서 하는 일 (컴파일) TS 코드 -> AST 코드 -> 타입 체크 -> JS 코드 2. JS 엔진에서 하는 일 (런타임) JS 코드 -> AST 코드 -> 바이트 코드 자바스크립트만 사용할 때는 1번..

웹접근성(Web Accessibility) 웹사이트에서 제공하는 정보를 신체적, 환경적 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 것 - 신체적 : 장애인 및 고령자를 포함한 모든 사람 - 환경적 : 다양한 플랫폼 및 디바이스와 웹브라우저 등 모든 환경 그렇다면 웹접근성을 향상시키기 위한 방법은 무엇이 있을까? 1. 웹접근성 지침을 준수하고 2. 웹표준 기술을 활용하는 것이다. 웹접근성 지침 : 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침으로, 웹 서비스를 제작하는 사람들이 기획/디자인/개발 과정에서 고려해야 할 요구사항입니다. (출처 : https://a11y.gitbook.io/wcag/internationa..

원시값이라는 단어조차 낯설다. 공부를 하다보면 용어, 단어 배우기도 참 어려운 것같은 요즘이다. MDN 에서는 다음과 같이 설명하고 있다. JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값에는 string, number (en-US), bigint (en-US), boolean, undefined, symbol, 그리고 null이 존재합니다. 원시값은 더 이상 단순화시킬 수 없기 때문에 원시적이라 하여 원시값으로 불린다고 한다. 원시값을 포스팅하는 가장 큰 이유는 메모리 할당과 관련이 있기 때문이다. 메모리 관리에 대해 아는 것이 원시값을 이해하는 것에 도움이 될 것이다. 이전 메모리 관리의 글의 4-1을 보면 라고 설..

사전적 정의 : 일반 규칙이나 통례에서 벗어남 개발적 측면에서는 어떤 언어든 라이브러리나 프레임워크가 됐든 정해놓은 규칙에 어긋나게 사용하려고 하면 발생하는 것을 예외가 발생했다고 하고, 이 때 '그냥 에러가 발생하게 둘 수 없지~' 하면서 '예외가 발생하면 이렇게 행동할 것!' 이라고 규정해두는 것이 바로 예외처리이다. MDN에서는 아래와 같이 설명하고 있다. throw 문을 사용하면 예외를 던질 수 있고, 던진 예외는 try...catch 문으로 처리할 수 있습니다. Throw (던질 게 받아라~) throw 'Error2'; // String throw 42; // Number throw true; // Boolean throw { toString: function () { return '저는 객체..

Promise의 예외처리 function promFuc() { return new Promise((res, rej) => { setTimeout(() => { rej("error"); }, 1000) }) } 위의 함수를 사용하여 예외처리 할 수 있는 방법을 알아보자. 1. catch promFuc() .catch(e => { console.log("1번"); }) .catch(e => { console.log("2번"); }) 이렇게 작성할 경우, 1초있다가 1번이 실행되고, 또 1초있다가 2번이 실행될 것 같지만, 실상은 그렇지 않다. (함정주의) 왜냐하면 첫 번째 catch는 함수의 promise 를 반환받게 되는데, 그 안에 예외가 발생했기 때문에 실행될 수 있다. 그럼 두 번째 catch도 동일..

브라우저 주소창에 주소를 입력한 후에, 브라우저에 초점을 맞춰 렌더링이 되기 전까지의 과정을 상세히 기록한 것이다. 우리가 알고, 칭하는 '렌더링' 까지 오기까지 '브라우저는 어떤 과정을 거치며, 대체 누가 언제 이런 일을 하는것이가' 의 막연한 궁금증으로 아래처럼 정리하게 됐다. 1. Handling inputs (주소창에 URL 입력) : 브라우저 프로세스 안의 UI 프로세스가 주소값을 URL인지 search query 인지 판단한다. - search query라면 검색 엔진으로 보내서 검색 준비 - URL이라면 네트워크 프로세스로 URL 값을 전달 준비 2. Start Navigation (엔터키 입력) - UI 프로세스가 network call initiates과 URL을 전달하며, 렌더러 프로세..