JS(JavaScript)와 Web UI 개발

오늘은 웹 페이지를 구현하는 데 있어 복잡한 사용자의 요구사항을 충족시켜 줄 수 있는 javascript언어의 기초에 대해 배우고 Web UI 개발에 필요한 개념들에 배웠다.

 

오늘 배운 JS에 대한 것 중 정리하고 싶은 내용은 함수이다.

다른 언어도 함수를 선언하여 특정 기능을 구현하는 것이 존재한다.

JS도 마찬가지로 함수를 선언하는 방법이 존재하는데 기본적인 함수선언문은 아래와 같다.

function 함수이름(파라미터1, 파라미터2, ..) {
    기능 코드
}

 

JS에서 함수를 배울 때 처음으로 배운 개념은 호이스팅(hoisting)이다.

코드를 통해 설명해보면

function test(){
    console.log(printName());
    var printName = function() {
        return 'straw';
    }
}

test();

test() 함수를 호출했을 때 결과는 어떻게 될까?

결과를 먼저 말하면 TypeError(printName이라는 함수가 선언되지 않았음)가 나오게 된다.

그 이유를 단순히 JS는 코드를 실행할 때 라인 별로 실행하니까 printName()을 콘솔에 띄우기 전에 printName()함수가 선언이 안되어 있으니까 typeerror가 뜨겠지라고 생각할 수 있다.

하지만 조금 더 전문적이고 올바른 이유를 설명하면 hoisting에 의해 TypeError결과가 나온 것이다.

호이스팅(hoisting)이란 함수가 실행되기 전제 함수 안에 필요한 변수값들을 미리 다 모아서 선언하는 것이다.

즉, 함수를 우리가 선언했을 때는 위의 코드처럼 했지만 실제로 코드를 실행하면 아래와 같이 변수값들이 모아져서 선언된다.

function test(){
    var printName
    console.log(printName());
    printName = function() {
        return 'straw';
    }
}

test();

이렇게 되기 때문에 printName은 console.log()로 호출되기 전에 함수로 선언되지 않았으므로 TypeError가 발생하는 것이다.

 

다음으로 Web UI개발에서 배운 내용은 DOM(Document Object Model)이 있다.

DOM은 간단히 말해서 우리가 웹 페이지를 구현하기 위해 작성한 HTML을 브라우저에서 해석하여 정보를 저장하고 있는 객체형태의 모델이다.

그러면 DOM은 왜 나온 것일까?

우리가 블로그 글을 보고 댓글을 달거나 상품에 대해 리뷰를 단 경험이 있을 것이다.

이 때, 웹 페이지에서는 새로고침없이 바로 화면에 추가되는 것을 볼 수 있을 것이다.

이러한 것을 구현하기 위해서는 HTML 내의 구조와 데이터가 변경되어야하는데 이를 JavaScript로 변경시킬 수도 있다.

이렇게 HTML을 변경시키위해서는 브라우저에서 HTML을 일정한 형태로 저장해놓으면 변경하기 쉽게 될 것이고 이를 위해서 DOM이라는 것이 나오게 되었고 정보를 트리형태로 저장하는 방식을 사용하게 된 것이다.

출처: https://poiemaweb.com/js-dom

 

다음으로 배운 내용는 Ajax이다.

Ajax는 Asynchronous Javascript And Xml 의 약어로 JavaScript의 라이브러리중 하나이다.

Ajax는 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 웹 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

예를 들어, 아래의 네이버 웹 페이지를 보면 현재는 레시피 탭이 선택되어 그림이나 글이 보이지만 과학 탭을 누르면 새로운 내용이 새로고침없이 나오는 것을 볼 수 있다.

이러한 것을 구현하기 위해 사용하는 것이 Ajax이다.