재안 IT 공부 일기장

개요[1] 브라우저 렌더링[2] 애니메이션[3] requestAnimationFrame[4] requestAnimationFrame 사용법[5] reference [1] 브라우저 렌더링우선 브라우저 렌더링에 대해 간략하게 알아야한다.아래의 순서대로 순차적으로 모두 진행 후 렌더링이 완료된다. 1. DOM 생성2. CSSOM 생성3. Layout (Reflow)4. Paint (Repaint)5. Composite Layout은 DOM과 CSSOM을 통해 Render Tree를 생성하는 단이다. (화면의 구조를 계산)노드의 추가 및 제거 실행시 Layout이 다시 실행된다.노드의 화면상 위치 및 크기 변경시 다시 실행된다. Paint는 Render Tree의 각 요소들이 픽셀단위로 화면에 그려지는 단계이다..

개요[1] DOM이란?[2] DOM 트리[3] DOM 요소 접근법[4] DOM 노드란?[5] DOM 이벤트[6] DOM 요소 제어[7] DOM 트리 제어[8] HTML DOM이란?[9] document[10] reference  [1] DOM이란?Document Object Modelconnecting web pages to scripts (javascript) by representing the structure of a document as logical treedocument 객체는 DOM에 접근하기 위한 진입점이다.  document를 통한 접근 = document.documentElement = document.body = document.head 브라우저가 를 읽지 못했을 땐, document..

1. 자바 스크립트는 인터프리터에 의해 해석되는 스크립트 언어입니다. 2. 싱글 스레드 기반의 언어지만 비동기 처리를 지원합니다. 3. 자바 스크립트는 함수형 패러다임을 기반으로 하면서 객체지향의 문법을 쓰는 독특한 언어입니다. 이를 통해 자바 스크립트는 멀티 패러다임을 지원합니다. 자바 스크립트는 인터프리터를 사용하는 프로그래밍 언어이지만, 대부분의 웹 브라우저에는 just-in-time 컴파일러가 내장되어 있어 실행 속도가 매우 빠릅니다. 하지만 just-in-time 컴파일이란, 스크립트의 실행과 동시에 소스 코드를 이진 형태로 변환하는 기술입니다. 하지만 컴파일이 미리 처리되는 것이 아니라 런타임에 처리되기 때문에 자바 스크립트는 여전히 인터프리터 언어로 분류됩니다. 자바 스크립트는 싱글 스레드를..

프론트와 백이 통신함에 있어 Ajax라는 것을 사용한다. 우선 Ajax란? 간단히 말하면 비동기 Javascript와 XML을 말한다. XMLHttpRequest 객체를 이용해서 JSON, XML, HTML, TEXT와 같은 데이터를 서버와 주고받는 것이다. Ajax의 가장 큰 장점은 비동기성이라는 것이다. 전체페이지가 아닌 일부분만 업데이트할 수 있게 해준다. Ajax를 바로 사용하며 예제를 통해 알아보겠다. 이번에 사용할 예제로 회원가입할 때 id 중복체크를 Ajax를 통해 시행하겠다. 회원가입할 때 id중복체크한다고 페이지 전체가 업데이트되면 안되기에 서버와 통신그리고 비동기성에대해 설명할 수 있기 때문이다. 우선 회원가입에 사용할 HTML은 아래와 같다. id와 password를 입력받을 2개의 ..

우선 JSON이란 Javascript의 문자열을 기반으로 구조화된 데이터 포맷이다. (XML 대안) JSON은 일반적으로 웹 어플리케이션 통신에 사용되는데 Javascript의 문자열을 기반으로 한다고해서 꼭 Javascript에서만 사용가능한 것은 아니다. 데이터를 송수신할 때 JSON은 문자열의 형태를 띈다. 이는 따로 문자열로 변환해주어야하는 것이다. 하지만 수신된 데이터를 사용할 때는 JSON객체를 사용해서 parse를 해주어야한다. Javascript에서는 stringify(), parse()를 사용해서데이터를 변환한다. JSON -> string => stringify string -> JSON => parse 특별할게 없는 Javascript의 객체이다. Javascript에서는 이렇게 객체..

Spread Spread는 반복가능한 객체(Iterables)에서 요소들을 바로 Key-Value의 형태로 만들어서 사용하게 해주는 문법이다. Iterable의 요소들을에 대한 접근이 훤씬 용이하다. 위의 출력문은 배열의 형태로, 아래의 출력문은 값이 바로 출력된 것을 알 수 있다. ...arr 이 짧은 코드가 arr의 요소들을 Key-Value의 형태로 바꾸어서 요소들에 바로 접근한 것이다. 원래 배열의 요소에 접근하려면 인덱스를 사용해야하지만 인덱스를 사용하지 않고도 바로 접근할 수 있는 것이다. 배열(반복 가능 객체)의 모든 요소들에 대한 Key-Value의 쌍을 만드니 배열을 모든 요소를 배열에서 꺼낸것과 같이 사용할 수 있다. 요소에 대한 직접적인(?) 접근이 가능하니 활용할 수 있는 방법이 많..

Destructuring Object Destructuring, Array Destructuring, Function Destructuring에 대해 알아보기 전에 정리해야하는 개념이 하나 있다. 여기서 Desturcturing의 의미는 Desturctive와 조금 다르게 이해해야한다는 것이다. Destructurize(분해)와 Desturctive(파괴)의 차이점을 알고 공부하는 것이 좋겠다. Object를 파괴하는 것이 아니라 Object를 복사해서 분해하는 것이다. 이렇게 접근하면 훨씬 이해가 쉽다. Destructuring은 여러가지 데이터 집합에서 (object, array) 어떠한 부분만 가져오는 것이 목적이다. 물론 다른 목적들도 있지만 다른 목적들은 잠시후에서 알아보겠다. 가장 간단한 예제..

자바스크립트에 백틱이라는 기능이있는데 이는 파이썬의 f-string과도 비슷하다. 파이썬의 f-stirng에도 { 중괄호 }를 통해 해당 문자열에 값을 바로 삽입 할 수 있었던 것처럼 자바스크립트에도 문자열 내부에 값을 바로 삽입 할 수 있다. 자바스크립스에서는 아래와 같은 문법을 사용한다. 백틱 백틱 사이에 ${ }를 사용해서 expression을 넣는다. 이때 ${ }는 place holder 라고 한다. 이것 외에도 백틱만 가능한 기능도 있다. 백틱을 사용하면 이렇게 입력시 엔터를 사용할 수 있다. 매우 편리하다. single quote와 double quote는 안된다. 이는 아래 예제에서 활용된다. 이처럼 실제 HTML을 작성하는 것 처럼 할 수 있다. 그리고 또 신기한 기능이 하나 더 있다. ..

함수 함수의 개념 자체는 다른 언어의 함수와 같다. 자바스크립트에서 함수는 아래와 같이 생겼다. 전체적인 틀에선 매개변수와 리턴값이 존재한다. 보통 함수를 정의하는 것처럼 함수명, 매개변수, 리턴값, 실행문, 범위로 구성된다. 또한 함수의 매개변수에 기본 값을 정해줄 수도 있다. 아래는 익명함수라는 것인데 말그대로 이름이 없는 함수이다. 이때 noName은 변수명이지 함수명이 아니다. 함수 리터럴을 만들고 함수 리터럴의 주소 값을 변수에 저장하여 사용하는 방법이다. 추가적으로 익명함수에는 기본 값을 설정 할 수 없다. 함수 정의와 익명함수는 호이스팅에서 갈린다. 함수 정의는 자바스크립트 실행 시 최상단으로 끌여올리지는데 익명함수는 그렇지 못한다. 두 함수 모두 정의되기 전에 호출을 했는데 console...

자바 스크립트에서도 다른 프로그래밍 언어와 같이 반복문을 사용하여 특정한 명령의 실행을 반복시킬 수 있다. for, while과 같은 키워드를 사용하는 것은 동일하다. for문부터 바로 예제를 통해 알아보겠다. 기존에 알고있던 for문과 특히 다를 것이 없다. 변수(i)에 대한 조건식으로 반복횟수를 정하는 방법이다. 자바스크립트에선 다른 형태의 for문도 있다. for in for of 다음으로 for in 문에 대해 알아보겠다. for in문은 하나의 변수를 통해서 객체를 순회(iterate)한다. 임의의 변수와 순회할 객체(enumerable)를 인자로 받는다. 아래의 예제를 통해 설명하겠다. 분명 for in은 객체를 순회한다고 했다. 코드의 의도는 array의 각 요소들의 출력이였다. 그런데 콘솔..