본문 바로가기

TIL

 (92)
<자바스크립트 Javascript> 전역 객체 - 전역 객체(Global Object)란? 모든 객체를 아우르는 최상위 객체를 일컫는다. 브라우저 관점에서는 window 객체, 서버 관점에서는 global 객체가 전역 객체로서 작용한다. - 전역 객체의 특징 1) 개발자가 직접 생성하지 않는다. 2) 전역 객체는 전역 스코프를 갖는다 3) 꼭 필요한 경우를 제외하고 전역 객체의 작성은 생략될 수 있다(사실 거의 생략). 4) 전역 변수는 전역 객체의 프로퍼티이고, 전역 함수는 전역 객체의 메서드이다. 5) 표준 빌트인 객체(Standard Built-in Objects)도 전역 객체의 자식 객체 중 하나다. - 전역 프로퍼티 전역 객체의 프로퍼티를 말한다. 애플리케이션 전역에서 사용하는 값을 나타내기 위해 사용된다. 전역 프로퍼티에는 다음과 같은 것..
<HTML> 시맨틱 태그 - 시맨틱 태그란? 시맨틱(semantic), 단어 그대로 의미를 담고 있는 태그를 일컫는다. HTML5에서 새롭게 도입된 요소다. 시맨틱 태그를 통해 웹 페이지 내의 콘텐츠들에 의미 단위의 중요성을 부과하여 보다 의미론적인 페이지 구성이 가능하다. - 시맨틱 태그 종류 우리가 일반적으로 잘 알고 있고 사용하고 있는 div, span 태그는 이에 포함되지 않으며 다음과 같은 것들이 있다. *header : 헤더를 나타냄 *nav : 내비게이션을 나타냄 *aside : 사이드에 위치하는 공간을 나타냄 *section : 본문의 내용들을 포함하는 공간을 나타냄 *article : 본문의 내용을 나타냄 *footer : 푸터를 나타냄 - 시맨틱 태그의 필요성 웹 사이트는 사람들이 찾고 이용할 때에만 그 존재 ..
<자바스크립트 Javascript> 스코프(Scope) (2) - 함수의 상위 스코프를 결정하는 방법 1) 동적 스코프(Dynamic scope) : 함수를 호출한 위치에 따라 상위 스코프를 결정 2) 정적 스코프(Static scope) 혹은 렉시컬 스코프(Lexical scope) : 함수를 선언한 위치에 따라 상위 스코프를 결정 이 둘 중 자바스크립트와 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다. 따라서 함수를 선언한 시점에 상위 스코프를 결정한다. - 암묵적 전역(implicit global) 어떤 함수에, 선언하지 않은 식별자가 있는 경우 해당 함수를 호출하면 자바스크립트는 이를 프로퍼티로 동적 생성한다. 따라서 이 선언하지 않는 식별자는 전역 객체의 프로퍼티가 되며, 전역 변수처럼 동작하게 된다. 다만 이 선언하지 않은 식별자는 변수가 아니므로 변..
<자바스크립트 Javascript> 스코프(Scope) (1) - 스코프란? 일종의 규칙이다. 유효범위를 뜻하는 단어로서, 식별자가 사용될 수 있는, 스스로가 속한 범위를 말한다. 스코프 자체로 범위라는 구분 단위를 제공해주기 때문에, 식별자 이름이 같더라도 범위가 다르면 중복이 허용되므로 이러한 방식으로 충돌을 방지한다. - 스코프의 구분 자바스크립트에서의 스코프는 두 가지로 나눌 수 있다. 또한, 모든 변수는 스코프를 기본으로 가지므로 스코프에 따라 변수 구분도 가능하다. 1) 전역 스코프(Global scope) - 전역 변수(Global variable) : 모든 곳에서 참조가(해당 식별자의 사용) 가능하다. 자바스크립트는 보통의 언어와 달리 시작점을 갖지 않기 때문에 쉽게 외부에 전역 변수 선언이 가능하다. 다만, 이러한 편리함이 도리어 전역 변수의 남용을..
<자바스크립트 Javascript> 객체 사용 시 주의점 - 객체 사용 시 주의점 사소하지만 가볍게 여기면 어느새 버그로 나타나 1시간 이상을 헤메이게도 하는 그런 주의점들(...)을 모아보았다. 객체 사용 시 주의할 점이다. 1) 프로퍼티 키 이름이 두 단어 이상일 때 프로퍼티 키 이름이 두 단어 이상일 때는 반드시 따옴표로 감싸주어야 한다. 그렇지 않은 경우 자바스크립트는 이를 인식하지 못하고 에러를 발생시킨다. let user = { "Oh yeah" : "something" } 이는 객체 접근 시에도 주의해야 할 부분으로, 키 이름이 두 단어 이상일 때는 대괄호( [] )를 사용해야 자바스크립트에서 정상적으로 인식이 가능하다. 다만 단어의 연결에 $, _ 기호를 사용한 경우는 대괄호를 쓰지 않아도 무방하다. 2) 객체 내의 프로퍼티가 여러개일 때 프로퍼..
<CSS> 반응형 웹 디자인 - 메뉴바 (3) 지난 (1), (2) 글에서 반응형 웹 디자인의 메뉴바를 완성하였으나, 드림코딩 강의를 참조하여 코드를 다시 수정해보았다. 일명 리팩토링! 하였다. 디자인은 위처럼 에어비앤비를 테마로하여 다시 만들어보았다. - HTML 전체 헤더는 클래스명 nav로 하여 section 태그로 만들었다. 지난번과 달리 nav를 감싸는 더 큰 div 박스는 불필요하여 제거하였다. 브랜드명에는 로고 이미지도 새롭게 추가하였다. 메뉴는 지난번처럼 중단점 이하에서 나타나는 메뉴를 따로 만들지 않고, 하나의 메뉴만 만들고 이를 CSS에서 조작하여 미디어 쿼리를 통해 중단점 이하일 경우 다르게 나타나도록 만들었다. 코드가 훨씬 간결하고 보기 편해졌다. 맨 하단의 클래스 fas는 중단점 이하에서 나타나는 햄버거 모양의 메뉴바 아이콘이..
<자바스크립트 Javascript> 객체 리터럴 - 자바스크립트에서의 객체 원시 값을 제외한 나머지 모든 것이 객체라고 봐도 무방하다. 또한 원시 타입의 값과 달리 변경 가능한 값(mutable value)이라고 할 수 있다. 객체는 0개 이상의 프로퍼티로 구성되며, 프로퍼티는 키와 값으로 구성되어있다. 프로터피 값이 함수일 경우에는 일반 함수와의 구분을 위해 메서드라 지칭한다. - 객체 생성 C++이나 자바와 달리 자바스크립트의 객체 생성은 클래스와 new 연산자가 필요하지 않다. 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법인 리터럴을 이용하면 된다. 중괄호 내에 이를 표현하는데, 이 때의 중괄호는 코드 블럭이 아니므로 닫는 중괄호 뒤에는 세미콜론을 써주어야 한다. var person = { name : 'Lee',..
<자바스크립트 Javascript> 타입 변환 - 타입 변환 자바스크립트에도 다른 언어들과 마찬가지로 데이터 타입이 존재한다. 그리고 이 데이터 타입을 변경하는 방법으로는 크게 두 가지가 있다. 1) 명시적 타입 변환(explicit coercion) 타입 캐스팅(type casting)이라고도 한다. 개발자의 의도에 따라 타입을 변경하는 것이다. 방법으로는 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하거나, 빌트인 메서드 사용, 그리고 암묵적 타입 변환을 이용하는 것이 있다. 단, 타입 변환 시 타입을 변환한 변수의 '값'의 타입이 변하는 것은 아니다. var x = 10; var str = x.toString(); console.log(typeof str, str) // 결과 // string ..
<CSS> 반응형 웹 디자인 - 메뉴바 (2) 3) 메뉴 바(햄버거) 클릭 시 주메뉴 출현 앞서 가로 너비가 625px 이하일 경우 메뉴 바(햄버거)가 나타나면서 중앙의 주메뉴는 사라지도록 설정하였다. 따라서 이 때에는 메뉴 바(햄버거) 클릭했을 때 주메뉴가 다시 나타날 수 있도록 구현하였다. 코드는 아래와 같다. - CSS 우선 첫 번째로 미디어 쿼리에 관계없이 모두 적용되는 내용이다. 위 사진처럼 주메뉴가 하단에 나타나는 스타일에 클래스로 'hidden'을 주고 display 속성을 none 값으로 설정하였다. 이로써 사용자가 행동을 취하지 않는 한 하단에 나타나는 주메뉴는 나타나지 않는다. 그리고 이 주메뉴의 id명은 minimenu로 설정하였다. 이것은 가로 너비가 625px 이하일 때만 나타나는 부분이므로, 미디어 쿼리의 중단점을 625px..
<자바스크립트 Javascript> 제어문 - 제어문(control flow statement)이란? 조건에 따라 코드 블록을 실행하거나 반복 실행함으로써 기본적인 코드의 실행 순서(위->아래)를 변경한다. 따라서 코드의 실행 흐름을 인위적으로 제어할 수 있다는 특징을 갖는다. 1) 블록문(block statement/compound statement) 중괄호로 묶은 코드가 실행되는 영역을 나타낸다. 보통 종결의 의미로 세미콜론을 사용하지만, 블록문은 그 자체로 코드 블록 내의 실행을 마치면 종결의 의미를 가지므로 세미콜론을 사용하지 않아도 무방하다. 2) 조건문(conditional statement) 조건에 따라 평가하여 실행되는 문이다. 불리언 값으로 평가되는 표현식을 조건식으로 갖는다. - if... else 문 : 조건식을 통해 출력된 ..

티스토리툴바