본문 바로가기

HTML ⁄ CSS ⁄ JS

JavaScript - 연대별로 보는 자바스크립트 변천사 선호도 1위, 사용률 1위에 빛나는 자바스크립트가 프로그래밍 언어로서 어떻게 발전해왔는지 연대별로 간단하게 알아보자. 1990년대 1995년, 자바스크립트 개발 1996년, 넷스케이프 내비게이터2에 탑재 모카(Mocha), 라이브스크립트를 거쳐 자바스크립트 로 부르게 되었다. J스크립트와 함께 파편화되면서 발생한 크로스 브라우징 이슈를 해결하기 위해 넷스케이프는 에크마 인터내셔널에 표준화를 요청했다. 1997년, ECMAScript1 발표 ECMAScript는 자바스크립트의 표준사양이다. 브라우저에 내장되는 자바스크립트 엔진은 이 ECMAScript 사양을 준수해서 만들어진다. 1998년, ES2 발표, DOM 레벨1 발표 ECMAScript2가 발표되었고, W3C에서도 DOM 레벨1을 발표했다. DOM.. 더보기
JavaScript - 값(value), 식(expression), 문(statement) 코치님(포코)의 추천키워드, 값 식 문. 많이 들어봤고 알고있다고 생각했지만 막상 설명하려고 하면 어려운 개념이다. 값, 식, 문의 기초개념을 정확히 이해하고 더 나은 코드를 작성해보자. 값 Value a value is the representation of some entity that can be manipulated by a program. '값'이란 프로그램이 조작할 수 있는 어떤 표현이다. '값'은 문자열, 문자, 숫자 처럼 어떤 데이터 형식도 가질 수 있다. '값'을 L-Value와 R-Value로 나누기도 한다. 대입연산자 (=)를 기준으로 왼쪽에 있는 L-Value, 오른쪽에 있는 R-Value로 나누는 것이다. L-Value는 메모리 주소을 가지고 있어 식별자를 통해 프로그래밍으로 컨트.. 더보기
Javascript - 'this' 키워드로 객체에 접근하기 this 키워드 this는 객체의 프로퍼티나 메서드를 참조, 변경할 수 있도록 해주는 자기참조변수(self-referencing variable)이다. 생성자 함수로 인스턴스를 생성하려면, 먼저 생성자 함수를 정의해두고, new 연산자와 함께 생성자 함수를 호출해야 한다. 그런데 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 전이라, 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 이 때 this를 사용하면 '미래'에 생성되는 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this 바인딩이란, this라는 식별자와 this가 가리킬 객체를 '연결'하는 과정을 의미한다. this 바인딩, 즉 this가 가리키는 값은 함수 '호출 시점'에 함수를 어떻게 호출하는지에 따라 동적으로.. 더보기
JavaScript - 유용한 내장 메서드(find, filter, every, some, reduce, repeat) 코드리뷰에서 리뷰어 분들이 사용을 추천해주셨거나, 페어 프로그래밍을 하며 유용하다고 느꼈던 Array와 String 내장 메서드 몇 가지의 사용법을 다시 정리해보자. find find()는 주어진 테스트를 만족하는 첫번째 요소의 '값'을 반환한다. 테스트를 만족하는 값이 여러 개 이더라도 가장 첫번째 값만 확인할 수 있다. 테스트를 만족하는 요소가 없다면 undefined를 반환한다. const arr = [2, 4, 6, 8, 10]; const isOdd = (num) => num % 2; const firstBigEnough = arr.find((element) => element > 7); // 8 const firstOdd = arr.find(isOdd); // undefined filter f.. 더보기
JavaScript - 호출 스케줄링(setTimeout, setInterval, requestAnimationFrame) 지정한 시간에 함수가 실행될 수 있도록 해주는 '호출 스케줄링' 구현 방법에 대해 알아보자. setTimeout setTimeout을 사용하면 지정한 시간이 지난 후에 함수가 실행되도록 할 수 있다. 사용방법 let timerId = setTimeout(func, delay, arg1, arg2, ...) btn.addEventListener('click', () => clearTimeout(timerId)); func - 호출하고 싶은 함수를 넣는다. delay - 지연시키고 싶은 시간을 넣는다. 단위는 ms(밀리세컨드) 이므로 1000을 넣으면 1초 후 실행된다. 기본값은 0이다. arg - 호출하려는 함수의 인자를 전달할 수도 있다. timerId - setTimeout은 식별자를 반환한다. 브라우.. 더보기
CSS - vw & vh 단위, em & rem 단위 자주 사용하는 CSS 단위에 대해 정리해보자. vw & vh 단위 vw 브라우저 창 너비값 * 0.01 단위이다. 예를 들어, width를 100vw로 지정하면 너비에 꽉 차게 된다. 'viewport width'을 뜻한다. vh 브라우저 창 높이값 * 0.01 단위이다. 예를 들어, height를 100vh로 지정하면 높이에 꽉 차게 된다. 'viewport height'을 뜻한다. 반응형 웹을 위해 미디어 쿼리를 작성할 때 요긴하게 쓰인다. vw단위를 높이에 지정하거나, vh단위를 너비를 지정할 때 사용해도 무방하다. em & rem 단위 em 부모 요소의 폰트사이즈 값이다. 예를 들어, font-size를 1em으로 지정하면 부모와 동일한 폰트사이즈를 갖는다. '알파벳 m'을 뜻한다. rem 최상위.. 더보기
JavaScript - 브라우저 이벤트 e 기초 인터랙티브 웹 개발의 기초인 브라우저 이벤트 에 대해 정리해보자. 이벤트 객체 e 이벤트 객체는 이벤트가 발생했을 때 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보가 담겨있다. 이벤트 객체는 이벤트 핸들러의 첫 번째 인자로 받는다. 위치는 첫 번째로 항상 고정이다. e.currentTarget - 핸들러를 할당받은 요소 (this와 같음) e.target - 실제 이벤트가 발생한 node e.type - 브라우저 이벤트 종류 e.key - key값을 문자열로 나타냄 e.keyCode - key값을 코드로 나타냄 ( *deprecated 라고 하니 이 방법은 지양하도록 하자) e.defaultPrevented - preventDefault 호출여부 e.preventDefault() - 기본으로 실행되.. 더보기
CSS - Transform, Transition, Animation, 3D 자바스크립트 없이 CSS 만으로 재밌는 효과를 줄 수 있는 4가지 효과를 알아보자. 1. CSS Transform '변형'을 뜻하는 Tranform은 CSS3에서 처음 등장했고 width, height 등을 조정하는 방법보다 성능이 좋다. 나머지 박스에 영향을 미치지 않고, 기준점이 중앙에 있다는 점이 특징이다. 중앙으로 설정되어있는 기준점은 transform-origin으로 쉽게 바꿀 수 있다. .box:hover { transform-origin: 0% 0%; /* 좌측 상단으로 기준점 변경하기 */ transform-origin: left top;/* (같은 효과) */ transform-origin: 100% 100%; /* 우측 하단으로 기준점 변경하기 */ transform-origin: ri.. 더보기

티스토리툴바