그럼에도 불구하고

오늘은 noopener / noreferrer에 대해 알아보자 우선 noopenner와 noreferrer에 대해 살펴보기 전에 a 태그의 target 속성을 살펴봐야 한다. [ target ] a 태그의 속성 중에는 target이라는 속성이 있다. Value Description target = "_self " 연결할 페이지의 URL 클릭 시 현재의 탭에서 연결 target = "_blank " 연결할 페이지의 URL 클릭 시 새 탭에서 연결 즉, target은 "href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?"를 지정하기 위한 속성이다. target = "_self " _self의 경우 연결한 웹 페이지를 현재의 탭에서 연다. _self는 기본 설정이므로 target 속성을 생략하..

오늘은 스코프(scope)에 대해 알아보자 [ 스코프(scope) ] 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 하지만, 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다. 그리고 var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다. 아래의 예시를 보자. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.l..

오늘은 display 프로퍼티 / block / inline / inline - block 레벨 요소를 배워보자 [ display 프로퍼티 ] display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 프로퍼티값 키워드 설명 block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는..

오늘은 CSS의 프로퍼티 값의 단위에 대해 알아보자 [ CSS 프로퍼티 ] CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. [ 키워드 ] 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 자세한 내용은 각각의 프로퍼티를 참조하기 바란다. [ 크기 단위 ] cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, % 이다. px은 절댓값이고 em, % 는 상대 값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 ..

오늘은 Viewport 단위에 대해 알아보자 [ Viewport ] 반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다. Viewport 단위는 상대적인 단위로 Viewport를 기준으로 한 상대적 사이즈를 의미한다. 단위 Description vw viewport 너비의 1/100 vh viewport 높이의 1/100 vmin viewport 너비 또는 높이 중 작은 쪽의 1/100 vmax viewport 너비 또는 높이 중 큰 쪽의 1/100 예를 들어 viewport 너비가 1000px, 높이가 600px인 경우, 1vw : viewport 너비 1000px의 1%인 10px 1vh : v..

제곱 함수를 구하는 코드를 짜 보자 조건 1. prompt로 입력받는 두 개의 값 중 하나라도 1보다 작은 값을 받을 경우 다시 받는다. 2. 두 개의 값을 받을 때 함수를 사용한다. 3. 1 이상의 자연수를 받았다면 최종적으로 구하는 제곱 함수를 alert로 띄워준다. code 결과: HTML 삽입 미리보기할 수 없는 소스 개선점 1 checkNum() 함수는 오로지 파라미터 값이 1 이상인 자연수를 판단하는 기능을 하는 것만이 아닌, 새롭게 값을 받고 있다. ( 함수는 하나의 기능만 수행하게 바꾸기 위해 새로운 함수를 사용한다. ) code 결과 HTML 삽입 미리보기할 수 없는 소스 개선점 2 위의 코드는 함수 선언문으로 함수를 정의했다. 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가..

오늘은 Immutability와 mutable에 대해 알아보자 [ Immutability(변경 불가성)] Immutability(변경 불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 객체는 참조(reference) 형태로 전달하고 전달받는다. 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이는 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 모든 장소에서 그 영향을 받기 때문인데 이것이 의도한 동작이 아니라면 참조를 가지고 있는 다른 장소에 변경 사실을 통지하고 대처하는 추가 대응이 필요하다. 의도하지 않은 객체의 변경이..

오늘은 Pass by Reference와 Pass by Value에 대해 알아보자 [ Pass by Reference ] object type을 객체 타입 또는 참조 타입이라고 한다. 참조 타입이란 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다. 따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다. 이에 반해 원시 타입은 값(value)으로 전달된다. 즉, 복사되어 전달되..

오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임 워크이자 기술이다. [ HTML5에서의 시맨틱 웹 ] HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었다. 예를 들어 기존에는 내용 로만 나타낼 수 있던 머리 부분을 내용 로 쉽게 더 의미론 적으로 나타낼 수 있게 되었다. 이는 div와 id = h..

오늘은 여러 가지 선택자에 대해 알아보자 [ 연결 선택자 ] 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. [ 하위 선택자 ] 하위 선택자(descendant selector)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택 자라고도한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다. 상위요소 하위요소 [ 자식 선택자 ] 자식 선택자(child selector)는 하위 선택자와 ..

기존의 day / night mode의 코드를 업그레이드해보자 기존 코드 day mode / night mode 기존 코드는 기능 수행을 하는 데 있어 문제는 없지만 아쉬운 점이 있다. 바로 아래와 같은 문장이 반복된다는 것이다. // body.style.backgroundColor // body.style.color 지금은 코드가 짧아 간단하지만, 만약 엄청나게 긴 문장을 갖고 있었다면 유지 보수하기 어렵다. 그래서 객체를 만들고, 객체 안 메서드로 배경색과 글자 색을 바꿀 수 있게 만들기로 했다. 그리고 기존의 방식처럼 setAttrubute 메서드를 사용하지 않고, button을 onclick 했을 때 toggle 메서드 안에 this를 넣었다. 그 후 script구문 안 toggle메서드에 파라미..

오늘은 단축 평가에 대해 알아보자 [ 논리 연산자를 사용한 단축 평가 ] 논리 합 (| |) 또는 논리 곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 다음 예제를 살펴보자 'Orange' && 'Grape' // -> "Grape" 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 첫 번째 피연산자 'Orange'는 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다. 논리곱(&&) 연산자에서는 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 ..