Day 39. 웹 프론트 7 ( Javascript )

ho_c·2022년 4월 12일

국비교육

목록 보기

39/71

자바스크립트는 총 4단계에 걸쳐서 학습한다.

1) 문법
2) 객체 이후 API
3) Regex
4) Jquery : 동적 요소 생성

막상 배우는 시간은 자바보다 적지만 실제 자바스크립트의 분량은 깊고 넓다.
그래도 자바에서 했던 이해가 밑바탕으로 깔려있으니 한결 편했다.

📝목차

JS 기초

함수

Event

1. JS 기초

앞서 배운 HTML, CSS를 이용하여 화면을 디자인을 할 수 있지만, 그 자체로는 정적인 상태이다. 따라서 생명력을 불어넣어 줘야 하는데, 이는 Javascript를 통해서 한다.

Javascript : 동적 요소를 부여하기 위한 프로그래밍 언어

[ 사용법 ] : CSS처럼 사용법은 3가지로 나뉜다.

inline
internal
external

일단은 internal로 <script> 태그 안에다가 작성한다.

[ 구조 ]

자바스크립의 기본 실행환경은 ‘브라우저’이다. 그리고 브라우저 안에는 JS의 내장 객체들이 들어가 있고, 이는 카테고리에 따라 3가지로 나뉜다.

BOM(Browser Object Model)

브라우저 자체에 대한 객체들을 의미한다.
주소창, 새로고침, 북마크, 브라우저 크기와 같이 브라우저를 구성하는 기능들을 다룬다.

Ex) console – 주로 출력을 담당하는 객체

DOM(Document Object Model)

브라우저 안에서 랜더링되는 문서영역을 통제하기 위한 객체
우리가 사용하는 HTML의 영역에 대해서 접근, 수정 등 다양한 기능을 제공한다.

Ex) document – HTML 상의 요소들에 접근할 수 있다.

JS

배열, 날짜와 같이 위 2개의 포함되지 않는, 자바스크립트 고유 기능이 담긴 객체(함수)

자바스크립트는 이렇게 3가지로 나뉘는데, 이것들을 모두 포괄하는데 Window 객체이다.

[ 변수 ]

프로그래밍 언어이기 때문에, 자바스크립트 역시 변수가 존재한다.
다만 자바와 달리 변수를 선언할 때 자료형을 선언하지 않고, 변수를 의미하는 키워드를 선언한다.

var a // var는 ecma6 이전에 사용한다.
let b // ecma6 이후

자료형을 선언하지 않기에 변수에는 무엇이든 들어갈 수 있다. 그러나 자료형은 존재한다. 즉, 입력값에 따라서 변수의 자료형이 정해진다.

let a = confirm(“js가 처음입니까?”)

이러한 비명시적 자료형은 컴파일타임에서는 딱히 문제가 되진 않지만, 런타임에서 에러가 발생할 수 있는 문제가 있다. 이를 보완하여 나온 게 typescipt이다.

[ 제어문 ]

자바스크립트의 제어문 역시, 자바의 제어문하고 똑같이 사용된다. 다만 조건식의 자료형이 들어갔다면 자바스크립트는 let을 사용한다.

for(let i=0; i<10; i++){
	document.write(“Hello World”);
}

2. 함수

함수는 자바스크립트의 꽃이자 일급객체이다. 그만큼 함수가 자바스크립트에서 굉장히 중요하고 사용방식이 다양하다.

먼저 자바스크립트의 함수는 자바의 메서드와 구조는 비슷하지만 몇 가지 특징이 있다.

함수 생성 시 반환 값을 쓰지 않는다.
함수임을 알려주는 키워드를 사용한다.
선언된 함수는 분석 시점에 가장 첫 라인으로 이동한다.
함수명을 하나의 값으로 사용할 수 있다.

[ 함수 생성 ]

자바스크립트에서 함수를 생성하는 방식은 두 가지가 있는데, 기본적으로 함수를 선언할 때는 function 키워드를 접두사로 붙여준다.

- 기본 : 함수명을 선언한다.

function 함수명(매개변수) {
	return num1 + num2; // 있을 수도 있고 없을 수도 있음
        }

function plus(num1, num2) {
	return num1 + num2;
        }

이렇게 정의된 함수는 스크립트를 분석하는 시점에서 가장 첫 라인으로 이동하기 때문에 어느 곳에 선언하든 함수를 호출 할 수 있다.

- 익명 함수 : 함수명을 선언하지 않는다.

function (매개변수) {
	return num1 + num2; // 있을 수도 있고 없을 수도 있음
        }

let minus = function(num1, num2) {
            return num1 - num2;
        }

뒤에서 설명할 것이지만, 자바스크립트는 함수 자체를 하나의 값으로 사용할 수 있다. 정확히는 함수가 메모리 상에 위치한 주소를 메서드 호출뿐만이 아니라, 다양하게 사용할 수 있다는 것이다.

따라서 위처럼 함수명이 없이 함수를 선언한 뒤 변수에 그 값을 저장하여서 사용할 수 있다. 이 외에도 선언된 그 위치에서 일회성으로 사용하는 기법이 있다.

[ IIFE ]

(function(num3, num4){	
	return num3 - num4;
        }) (10, 20);

[ 함수 포인터 ]

우리가 함수 또는 메서드를 사용하기 위해서는 CPU에서 그에 대한 처리를 해줘야 한다.
그리고 CPU가 처리하기 위해선 우리가 작성한 코드가 메모리에 올라와야 한다. 따라서 우리가 작성한 코드는 메모리에 text(code) 영역에 올라가는데, 이때 바이너리 형태로 올라간다.

그리고 이 이진형태의 코드의 위치를 함수명에 저장하여 사용하는 것이다.
즉, “함수명 = 주소값 = function pointer”이다.

3. Event

이벤트는 브라우저 위에서 하는 모든 행위를 지칭한다.
예를 들어 우리가 브라우저 위에 마우스를 올리는 거, 클릭, 스페이스, 줌인 등 모든 행위가 이벤트이다.

여기서 자바스크립트는 이벤트가 발생하면 특정 동작을 수행하도록 처리하는데, 이를 Callback function 패턴으로 한다.

이벤트 처리를 위해선 다음 세 가지를 알아야 한다.

Event Source : 이벤트가 발생하게 된 그 위치. id를 통해 특정된 HTML 상의 요소를 말한다.
Event Listener : 소스에게 일어날 이벤트를 감시하는 객체. 이벤트가 발생하면 특정 동작을 한다.
Event Handler : 이벤트가 발생했을 때, 실행될 익명 함수
[ 예시 ]

 <button id="btn1"> Pop1! </button>

 <script>
	// html 문서를 확인 후, 해당 버튼의 주소를 가져옴
        let btn1 = document.getElementById("btn1"); 
	
    	//소스.리스너  = 핸들러(익명함수)
        btn1.onclick = function(){ alert("Pop!") };
   
   		// 이것도 가능
   		function callback(){ alert("Pop!") };
   
   		btn1.onclick = callback; // (O) 함수를 호출	
	    btn1.onclick = callback(); // (X) 함수를 호출하여 반환값을 받는 거
   		서로 다름을 주의해야 한다.

</script>

위 예시에서 이벤트 소스는 btn1 이라는 button 요소이다. 이를 script 상에서 사용하기 위해서 getElementById 함수를 통해서 해당 주소를 가져와 변수에 넣어준다.

그리고 이 변수에 .onclick 이라는 리스너를 붙여줘서, 사용자가 버튼을 클릭할 시 리스너는 해당 행동이 발생했을 때 실행된다. 다만 핸들러가 존재하지 않는다면 쉽게 말하면 이벤트가 발생했을 때에 대한 동작이 설정되지 않는다면 아무 일도 일어나지 않는다.

따라서 이벤트 리스너에 핸들러라는 익명 함수를 붙여준다. 그렇게 되면 특정 이벤트 발생 시 리스너가 핸들러를 호출하여 사용한다. 이를 ‘callback function’이라고 한다.

이를 보면 callback 함수는 기존에 개발자가 호출하는 함수와 달리, 시스템에 함수를 정의해두고 특정 상황(필요)에 따라 다른 주체에 의해 호출되는 함수를 의미한다.

이런 콜백함수로 이벤트 처리할 때는 ‘그 시점에 일어날 상황을 정의한다’라는 관점으로 접근해야 한다.

[ 주의 사항 ]

스크립트 실행 시점에 코드 순서상 엘레멘트가 뒤에 있으면 스크립트는 실행되지 않는다.

<script>
	document.getElementById("btn").onclick = function(){ 
            alert("TEST");
        }
</script>

<button id="btn">pop</button>

이미 이벤트 리스너가 감시할 소스가 스크립트 이후에 생성되지 않았기에 속성이 null이라 에러가 발생한다. 따라서 스크립트의 순서를 잘 생각해야 한다.

다만 아래와 같이 window.onload 를 사용하면 가능하다.

<head>
    <script>
        window.onload = function(){
		document.getElementById("btn").onclick = function(){ 
	            alert("TEST");        
		}
        }
    </script>
</head>

<body>
    <button id="btn">pop</button>
</body>

위와 같이 <head> 영역에 작성할 수도 있다. 물론 코드 순서상 모순이 생기지만 window.onload 안에 묶어둔다면, 코드 흐름이 body의 내용이 모두 서버로부터 브라우저에 로딩된 이후 실행된다. 즉, 전역을 대상으로 로딩이 완료할 때, 핸들러가 실행이 되도록 하는 것도 가능하다.