부스트코스 강의를 듣고 정리한 내용. 아직까지는 프론트 작업을 위해 자바스크립트 기본 문법을 보는 중

JavaScript

Hoisting

  • 함수 안에 있는 선언들을 모두 끌어올려 해당 함수의 유효 범위의 최상단에 선언하는 것
  • var 변수 선언(할당은 끌어올리지 X)과 함수 선언문에서만 발생. let/const 변수 선언과 함수 표현식에서는 호이스팅 이 발생하지 않는다.

Arguments

  • JS에서 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있는데, 이 때 넘어온 인자를 arguments로 배열의 하나씩 접근할 수 있다.
  • 가변 인자를 받아 처리하는 함수를 만들 때 등에서 arguments 속성을 유용하게 사용할 수 있음
function a() {
	console.log(arguments);
}

a(1,2,3);

WEB UI 개발 - FE

Window 객체 (setTimeout)

브라우저 개발을 하다 보면 window라는 객체가 있다.

window.setTimeout()
setTimeout() // window는 전역 객체이기 때문에 생략 가능

setTimeout()은 window 안의 객체이기 떄문에 window.setTimeout()처럼 호출하는데, window가 전역 객체이므로 생략 가능함.

그럼 setTimeout() 예제를 보자.

function run() {
	setTimeout(function() {
		var msg = "hello world";
		console.log(msg);
	}, 1000);
	console.log("run function end");
}

console.log("start");
run();
console.log("end");

인자로 함수를 받고 있는데, JS는 인자로 함수를 받을 수 있는 특징이 있다. 위의 인자로 준 함수처럼 보통 나중에 실행되는 함수를 callback 함수라고 한다.

위 코드를 돌려 콘솔창에 결과를 확인해보자.

start
run function end
end
(1초 뒤) hello world

setTimeout(funtion, milliseconds)는 두 번째 인자로 준 밀리초 시간이 지난 후에 첫 번째 인자로 준 함수를 실행한다. 이러한 비동기 콜백 함수는 이벤트 큐라는 곳에 보관돼 있다가, 콜 스택이 다 비워지고 나면 마지막에 실행된다.

DOM과 querySelector

DOM (Document Object Model)

브라우저에서는 HTML 코드를 DOM이라는 객체 형태의 모델로 저장하고, 그렇게 저장된 정보를 DOM Tree라고 한다. HTML element는 트리 형태로 저장되는 것이다.

복잡한 DOM 트리를 탐색하기 위해 JS로 탐색 알고리즘을 구현하는 것은 너무 힘들기 때문에, 브라우저에서는 DOM 트리를 찾고 조작하는 것을 도와주는 여러 가지 메서들인 DOM API를 제공하고 있다.

DOM API 내 함수가 엄청 많이 때문에 몇 개만 살펴보자.

  • getElementById(): 특정 엘리먼트를 ID 정보를 통해 찾을 때 사용
  • querySelector(): CSS 스타일을 결정할 떄 사용하던 selector 문법을 사용해 DOM에 접근할 수 있도록 해줌. 자매품으로 다 찾아주는 querySelectorAll()도 있다.

Browser Event, Event Object, Event Handler

Event

브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 마우스로 조절하거나, 스크롤을 하거나, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.

브라우저가 이벤트를 발생시키므로 우리는 그때 어떤 일을 하라고 할 일을 등록할 수 있다.

다시 말해, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다.

Event 등록

이벤트 등록 표준 방법. addEventListener함수를 사용할 수 있다.

var el = document.getElementbyId("outside");
el.addEventListener("click", () => {
	// do something
}, false);

addEventListener 함수의 두 번째 인자는 함수인데, 이는 이벤트가 발생할 때 실행되는 함수로 event handler 또는 event listener라 부른다. 이벤트 리스터 콜백 함수는 이벤트가 발생할 때 실행된다.

Event 객체

이벤트 리스너가 실행될 때 어떤 이벤트에 의해 실행됐는지 등의 정보를 담은 이벤트 객체를 매개변수로 생성한다. 그래서 이벤트 리스터 안에서는 이벤트 객체를 활용해 추가적인 작업을 할 수 있다.

var el = document.getElementbyId("outside");
el.addEventListener("click", () => {
	console.log(evt.target);
	console.log(evt.target.nodeName);
}, false);

가장 많이 쓰이는 것은 event.target인데, 이는 해당 이벤트가 발생한 엘리먼트를 가리킨다. 또한 엘리먼트도 객체이므로 그 안의 클래스 이름이나 엘리먼트가 가진 속성을 사용할 수도 있다.

참고링크: 위키피디아 DOM 설명

참고링크: Introduction to events

참고링크: Event reference

Ajax 통신의 이해

Ajax (XMLHTTPRequest 통신)

웹에서 데이터를 갱신할 때, 브라우저 새로 고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발. 예를 들어 탭 UI에서 상단의 탭을 누를 때마다 컨텐츠가 달라지는데, 누르지 않은 탭의 컨텐츠까지 초기 로딩 시점에 모두 불러온다면 초기 로딩 속도에 영향을 줄 것이다. 동적으로 필요한 시점에 컨텐츠를 받아와 표현한다면 더 좋을 것이다. 이럴 때 Ajax 기술을 사용할 수 있다.

한 마디로 말하자면 비동기로 서버로부터 데이터를 가져오는 것!

그러면 Ajax 기술을 이용할 때 클라이언트와 서버는 데이터를 서로 어떤 데이터를 어떻게 주고 받을까? 약속된 규칙이 있어야 하는데, 전에는 XML으로 정의를 했지만 내용도 커지고 읽기가 어려워서 요즘에는 JSON(JS Object Notation)이 사실상 표준이 되었다.

JSON

JS 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷. 사람이 읽을 수 있는 텍스트를 사용해 key-value pair로 이루어진 데이터 오브젝트를 전달한다. 웹 앱에서 데이터를 전송할 때 일반적으로 사용한다. JS로부터 파생돼 JS 구문 형식을 따르지만 언어 나 플랫폼에 독립적임.

기본 자료형

JS 객체 리터럴 문법을 따르므로 JS 의 기본 데이터 ㄸ타입을 포함한다.

  • Number
  • String: 0개 이상의 유니코드 문자들의 연속. 큰따옴표(")로 구분하며 역슬래시 이스케이프 문법도 지원함.
  • Boolean: true/false
  • Array: 순서가 있는 리스트. 대괄호([])로 나타내며 엘리먼트는 쉼표로 구분
  • Object: set of unordered key-value pairs. 중괄호({})로 나타내며 각 쌍들은 쉼표(,)로 구별
  • key 값이 문자열이다.
  • null

예제

{
	"name":"kyungjin",
	"age":22,
	"student": true,
	"hobbies": ["music", "boardgame", "cycling", "dance"],
	"devices": {"phone": "iphone", "laptop": "samsung"}
}

Debugging

바닐라 JS는 브라우저에서 디버깅을 많이 함. 크롬 개발자도구 ㄱㄱ

  • pause, continue : 첫 번째 버튼은 평소에는 pause 버튼 상태인데, breakpoint가 잡힌 상태에선 continue 버튼이 됨. 다른 breakpoint가 잡힐 때까지 코드를 진행한다.
  • step over next function call : 코드 라인을 한 스탭 진행. 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하되 함수 안의 코드로는 진입하지 않는다. 즉 라인의 함수만 실행.
  • step into next function call : 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 다시 하나씩 라인별로 코드 실행
  • step out of current function : step into로 들어온 함수를 끝까지 실행한 후 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아감
  • active/deactive breakpoint : breakpoint 켜기/끄기
  • pause on exception : JS 예외가 발생하면 해당 위치에 breakpoint 잡아줌