본문 바로가기

전체 글178

JS 공부는 다다익선 - 7. prototype 1. 프로토타입 객체 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 **Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다. ※ Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. 2. [[Prototype]] vs prototype 프로퍼티 모든 객체는 자신의 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯(internal slot) 을 갖으며 상속을 위해 사용된다. 함수도 객체이므로 [[Prototype]] 가지면서 함수 객체는.. 2023. 9. 21.
JS 공부는 다다익선 - 6. 타입 체크 자바스크립트는 동적 타입(dynamic typed) 언어이므로 변수에 어떤 값이 할당될 지 예측하기 어렵기 때문에 자바스크립트는 타입 체크가 필요하다. 1. typeof 타입 연산자(Type Operator) typeof는 피연산자의 데이터 타입을 문자열로 반환한다. ※ typeof 연산자는 null과 배열의 경우 object, 함수의 경우 function를 반환하고, Date, RegExp, 사용자 정의 객체 등 거의 모든 객체의 경우, object를 반환한다. 객체의 종류까지 구분할 수 없다. typeof ''; // string typeof 1; // number typeof NaN; // number typeof true; // boolean typeof []; // object typeof {}.. 2023. 9. 21.
JS 공부는 다다익선 - 5. 함수(Function) 1. 함수 정의 함수를 정의하는 방식은 3가지가 있다. 함수 선언문 함수 표현식 Function 생성자 함수 1.1 함수 선언문 기본적인 함수 형태로 함수 선언문(Function declaration) 방식으로 정의한 함수는 function 키워드와 이하의 내용으로 구성된다. 함수명: 함수 선언문의 경우, 함수명은 생략할 수 없다. 함수명은 함수 몸체에서 자신을 재귀적(recursive) 호출하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자이다. 매개변수 목록: 0개 이상의 목록으로 괄호로 감싸고 콤마로 분리한다. 다른 언어와의 차이점은 매개변수의 타입을 기술하지 않는다는 것이다. 이 때문에 함수 몸체 내에서 매개변수의 타입 체크가 필요할 수 있다. 함수 몸체: 함수가 호출되었을 때 실행되.. 2023. 9. 21.
JS 공부는 다다익선 - 4. 객체(Object) 1. 객체(Object)란? 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있으므로 프로퍼티 값으로 함수를 사용할 수도 있다. 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 프로토타입(prototype)이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 .. 2023. 9. 20.
JS 공부는 다다익선 - 3. 변수 1. 원시 타입 (primitive data type) 원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다. 1.1 number 64비트 부동소수점 형(double-precision 64-bit floating-point format : -(2^53^ -1) 와 2^53^ -1 사이의 숫자값) 을 따른다. 정수만을 위한 타입이 없고 모든 수를 실수를 처리한다. 정수로 표시된다해도 사실은 실수다. ※ 프로그래밍 언어에서 실수는 일반적으로 소수를 가리킨다. 2진수, 8진수, 16진수 리터럴은 메모리에 동일한 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 자바스크립트는 2진수, 8진수, 16진수 데이터 타입을 제공하지 않기 때문에 이들.. 2023. 9. 20.
JS 공부는 다다익선 - 2. 브라우저 동작 원리 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 제어 권한을 넘겨 .. 2023. 9. 20.
JS 공부는 다다익선 - 1. 자바스크립트 이해 1. 자바스크립트의 탄생 1995년 당시 넷스케이프 커뮤니케이션즈가 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 만들기 위해 브렌던 아이크(Brendan Eich)가 자바스크립트를 개발했다. 2. 자바스크립트의 파편화와 표준화 1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 "JScript"를 Internet Explorer 3.0에 탑재하였다. 그런데 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것이다. 이후 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작하며 브라우저에 따라 웹 페이지가 정상 동작하지 않는 크로스 브라우징 이슈로 인해 모든 브라우저에서 동작하는 웹 페이지를 개발에 어려움이 생겼다. 이에 자바스크립트의 파편화를.. 2023. 9. 19.
CSS 이론 채워 넣기 - 10. flex box 1. flex-box Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. 2. Flexbox container 속성 2.1 flex-direction flex 컨테이너안의 flex item 들의 배치 방향을 설정한다. 기본값은 row 이다. 속성 설명 flex-direction: row; 좌에서 우로(ltr) 수평 배치된다. flex-direction 속성의 기본값이다. flex-direction: row-reverse; 우에서 좌로(rtl) 수평 배치된다. fl.. 2023. 9. 19.
CSS 이론 채워 넣기 - 9. 반응형 웹 디자인(Responsive Web Design) 1. 반응형 웹 디자인이란? 반응형 웹디자인(Responsive Web Design) 은 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다. 2. viewport meta tag viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공한다. meta tag에서는 px단위를 사용하며 단위 표현은 생략한다. 복수개의 프로퍼티를 사용할 때는 쉼표(,)로 구분한다. 일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다. 프로퍼티 Description 사용예 width viewport 너비(px). 기본값: 980px width=240 height viewport 높이(px) height=800 initial-scale view.. 2023. 9. 19.
CSS 이론 채워 넣기 - 8. 트랜스폼(Transform) 1. 트랜스폼이란? 트랜스폼(Transform) 은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다. 2. 2D 트랜스폼 (2D Transform) transform function 설명 단위 translate(x,y) 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다. px, %, em 등 translateX(n) 요소의 위치를 X축으로 x만큼 이동시킨다. px, %, em.. 2023. 9. 18.
CSS 이론 채워 넣기 - 7. 애니메이션 1. 애니메이션이란? 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다. transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다. 즉 transition 프로퍼티는 단순히.. 2023. 9. 18.
CSS 이론 채워 넣기 - 6. 트랜지션 (transition) 1. 트랜지션 (transition) 이란? 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 따라 CSS 프로퍼티가 변경되면 프로퍼티 변경에 따른 표시의 변화(transition)는 지체없이 즉시 발생한다. ※ 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다. div 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동한다. 하지만 div:hover 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)는 트랜지션이 발동하지만 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 .. 2023. 9. 18.

티스토리툴바