해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 18~21에 해당되는 클로저, 객체지향 프로그래밍, 빌트인 객체, 전역 객체에 대해 알아보겠습니다. 18. 클로저(Closure) 클로저란? JavaScript 고유의 개념이 아닌 함수형 프로그래밍 언어에서 사용 되는 중요한 특성입니다. MDN에서는 “함수와 함수가 선언 됐을 때의 렉시컬 환경과의 조합이다.” 라고 정의되어 있습니다. 렉시컬 환경? 유효범위가 작성된 위치에 따라 결정되는 것 function outer() { var a = 5; function inner() { console.log(a); } return inner; } var func = outer(); func(); //..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 14~17에 해당되는 프로토타입, 스코프, Strict mode, this에 대해 알아보겠습니다. 14. 프로토타입(Prototype) 프로토타입 객체 JavaScript의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 이러한 부모 객체를 Prototype 객체 줄여서 Prototype(프로토타입)이라고 합니다. 해당 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. 객체를 생성할 때 프로토타입은 결정되며, 결정된 프로토타입 객체는 다른 임의의 객체로 변경할 수 있습니다. (동적으로 변경할 수 있음을 의미) 이러한 특징을 활용하..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 12, 13에 해당되는 함수, 타입 체크에 대해 알아보겠습니다. 12. 함수(Function) 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록입니다. 동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적 입니다. JavaScript의 함수는 객체이며, 다른 객체와 구분될 수 있는 특징은 호출할 수 있다는 것 입니다. 함수 정의 함수 선언문 // 함수 선언문 function square(number) { return number * number; } function 키워드와 함수명, 매개변수 목록(()로 감싸고 콤마로 분리)..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 10, 11에 해당되는 객체, 객체와 변경불가성에 대해 알아보겠습니다. 10. 객체(Object) 객체란? JavaScript는 객체 기반의 스크립트 언어이며, 거의 모든 것이 객체로 이루어져 있습니다. JavaScript의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합입니다. 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부릅니다. 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드로 구성된 집합 입니다. 프로퍼티 프로퍼티 키와 프로퍼티 값으로 구성되..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 7~9에 해당되는 연산자, 제어문, 타입 변환에 대해 알아보겠습니다. 연산자(Operator) 표현식과 연산자 표현식(expression)은 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말합니다. // 리터럴 표현식 10 // 식별자 표현식 sum // 연산자 표현식 10 + 20 // 함수/메소드 호출 표현식 square() 결국 하나의 값이 되므로 표현식과 값은 동등한 관계, 즉 동치(Equivalent)가 됩니다. 연산자 표현식은 표현식을 결합해 새로운 값을 만들어 내는 가장 일반적인 표현식 입니다. 이처럼 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있습니다. ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 5, 6에 해당되는 자바스크립트의 기본 문법, 데이터 타입과 변수에 대해 알아보겠습니다. 5. 자바스크립트의 기본 문법(Syntax Basics) 변수(Variable) 변수는 값(value)을 할당(저장)하고, 할당된 값을 참조하기 위해 사용됩니다. 유지(캐싱)할 필요가 있는 값은 변수에 담아 사용합니다. 또, 위치(주소)를 기억하는 저장소인데 여기서 위치란 메모리 상의 주소를 의미합니다. 즉, 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)입니다. 변수를 선언할 때 var 키워드를 사용하며, 할당 연산자 = 은 ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 JavaScript lesson 1~4에 해당되는 프로그래밍 기본 개념, 자바스크립트란?, 개발 환경, 브라우저 동작 원리에 대해 알아보겠습니다. 1. 기본 개념과 동작 원리 이해의 중요성(Programming) 프로그래밍이란? 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 작업물이 코드입니다. 컴퓨터와 사람은 사고와 인지의 방식이 다른데 이 때 필요한 것이 컴퓨터의 관점으로 사고를 하는 Computational thinking 입니다. 이 때 논리적, 수학적 사고가 필요하게 되고, 해결 과제를 작은 단위로 분해하고 패턴화하여 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 19~22의 내용인 반응형 레이아웃, flexbox, 수평/수직 중앙 정렬, image 요소 아래에 패딩된 여분의 공간 제거하기에 대해 알아보겠습니다. 19. 반응형 레이아웃(Responsive Web Design) Responsive Web Design 개요 사용자가 어떤 디바이스로 웹사이트를 방문할 지 알 수 없기 때문에 layout은 방문자의 화면 해상도를 고려해야 합니다. 반응형 웹 디자인은 화면 해상도에 따라 가로폭이나 배치를 변경해 가독성을 높여줍니다. viewport meta tag viewport는 웹페이지의 가시영역을 의미하며 디바이스에 따라 차이가 있습니다. 이를 이용하여 디바이스의..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 15~18의 내용인 애니메이션, 트랜스 폼, 웹 폰트, 레이아웃에 대해 알아보겠습니다. 15. 애니메이션(Animation) HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어집니다. CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있습니다. 그러나 경우에 따라 세밀한 제어를 위해서는 JavaScript를 사용하는 것이 바람직합니다. @keyframes CSS 애..
