전체 글

TIL - 20220928

오늘은 모던 JavaScript 튜토리얼에서 앵커: 문자열의 시작 ^과 끝 $에 대해 공부했다. 작성한 질문은 다음과 같다. 캐럿 기호 ^와 달러 기호 $를 앵커라고 부른다. 캐럿 기호 ^는 텍스트의 시작, 달러 기호 $는 텍스트의 끝을 나타낸다. 정규 표현식에서 캐럿 기호 ^는 문자열이 시작하고 원하는 문자열이 바로 나오는지 검사할 때 좋다. 다음과 같은 예시를 들 수 있다. let str = '동해물과 백두산이 마르고 닳도록'; console.log( /^동해물과/.test(str) ); // true 정규 표현식에서 달러 기호 $는 문자열 시작하고 원하는 문자열로 끝나는지 검사할 때 좋다. 다음과 같은 예시를 들 수 있다. let str = '동해물과 백두산이 마르고 닳도록'; console.log..

TIL - 20220927

오늘은 모던 JavaScript 튜토리얼에서 유니코드: 'u' 플래그와 \p{...} 클래스에 대해 공부했다. 작성한 질문은 다음과 같다. u 플래그로 정규 표현식에서 유니코드 관련 기능을 활성화할 수 있으며 다음 두 기능이 가용된다고 보면 된다. 이모지와 같은 4바이트 문자를 2바이트 문자 두 개로 처리하지 않고 문자 한 개로 올바르게 처리한다. \p{...}를 이용해 유니코드 프로퍼티를 검색에 사용할 수 있게 된다.

TIL - 20220926

오늘은 모던 JavaScript 튜토리얼에서 문자 클래스에 대해 공부했다. 작성한 질문은 다음과 같다. 문자 클래스는 특정 집합에 포함된 모든 기호에 일치하는 특별한 표현이다. 예를 들어 숫자 클래스는 \d라고 쓰면 된다. 주로 사용하는 문자 클래스로는 다음과 같이 있다. \d - 숫자: 0에서부터 9 사이의 문자 \s - 스페이스, 탭(\t), 개행(\n)을 비롯하여 아주 드물게 쓰이는 \v, \f, \r을 포함하는 공백 기호 \w - 단어에 들어가는 문자로 라틴문자나 숫자, 밑줄을 포함한다. 반대 클래스란 같은 글자지만 대문자로 표기하며 해당 문자를 제외한 모든 문자에 일치한다는 뜻이다. \D - 숫자가 아닌 문자: \d와 일치하지 않는 일반 글자 등의 모든 문자 \S - 공백이 아닌 문자: \s와 ..

TIL - 20220925

오늘은 모던 JavaScript 튜토리얼에서 패턴과 플래그에 대해 공부했다. 작성한 질문은 다음과 같다. 정규식 객체를 만드는 문법은 두 가지 문법이 있다. // '긴' 문법 regexp = new RegExp("pattern", "flags"); // '짧은' 문법 regexp = /pattern/; // 플래그가 없음 regexp = /pattern/gmi; // 플래그 g, m, i가 있음 짧은 문법에서 /는 문자열에 따옴표를 쓰는 것처럼 자바스크립트에게 정규 표현식을 생성하고 있다는 것을 알려준다. 자바스크립트가 지원하는 플래그로는 다음과 같이 있다. i - i 플래그가 붙으면 대, 소문자 구분 없이 검색한다. g - g 플래그가 붙으면 패턴과 일치하는 모든 것들을 찾는다. g 플래그가 없으면 패..

TIL - 20220924

오늘은 모던 JavaScript 튜토리얼에서 '궤도의 높이에서'에 대해 공부했다. 작성한 질문은 다음과 같다. 컴포넌트란 기능과 페이지의 상호 작용 방식으로 설명할 수 있는 별도의 시각적 개체이다. 컴포넌트가 갖추어야 할 것은 다음과 같다. 고유한 자바스크립트 클래스 외부 코드가 접근할 수 없으며 해당 클래스에서만 관리되는 DOM 구조 구성 요소에 적용되는 CSS 스타일 다른 구성 요소와 상호 작용하기 위한 이벤트, 클래스등을 일컫는 API

TIL - 20220923

오늘은 모던 JavaScript 튜토리얼에서 CSS 애니메이션에 대해 공부했다. 작성한 질문은 다음과 같다. transition-property: 해당 프로퍼티엔 left, right, margin-left, margin-right 같이 애니메이션 효과를 적용할 프로퍼티 목록을 정의한다. transition-duration: 해당 프로퍼티엔 애니메이션 효과를 얼마나 줄지 설정하는 프로퍼티다. transition-delay: 해당 프로퍼티엔 애니메이션이 시작하기 전 얼마만큼의 딜레이를 줄지 설정하는 프로퍼티다. transition-timing-function: 해당 프로퍼티엔 프로퍼티를 사용하여 timing 함수를 만들면 시간에 따라 애니메이션 효과를 어떻게 분배할지 설정할 수 있는 프로퍼티다.

TIL - 20220922

오늘은 모던 JavaScript 튜토리얼에서 베지어 곡선에 대해 공부했다. 작성한 질문은 다음과 같다. 베지어 곡선이란 컴퓨터 그래픽스에서 사용되는 특별한 형태의 곡선으로 CSS 애니메이션 등에서 도형을 그릴 때 사용된다. 베지어 곡선의 특징으로는 다음과 같다. 조절점이 항상 곡선 위에 있는 것은 아니다 곡선의 차수는 조절점의 개수에서 1 뺀 값이다. 곡선은 항상 조절점의 컨벡스 헐 안에 있다.

TIL - 20220921

오늘은 모던 JavaScript 튜토리얼에서 localStorage와 sessionStorage에 대해 공부했다. 작성한 질문은 다음과 같다. 쿠키를 사용하여 브라우저에 데이터를 저장할 수 있다. 하지만, 또 다른 객체인 localStorage와 sessionStorage를 사용하는 이유는 다음과 같다. 쿠키와 달리 웹 스토리지 객체는 네트워크 요청 시 서버로 전송하지 않는다. 이러한 점을 이용하여 쿠키보다 더 많은 자료를 저장할 수 있다. 쿠키와 달리 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 온전히 자바스크립트 내에서만 수행된다. 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근..