onload, fetch, promise, ... 웹 용어 기본 개념 분석중..

C# 개발자 4년차이지만 요새 회사에서 웹 프로젝트를 시작해서 거기에 갑작스럽게 투여

웹에 대해서는 기초부터 차근차근 시작하고 있는 웹린이 개발자입니다.

 

 

 

웹 개발자 분이 팀에 한분 들어오셔서 그 분한테 많이 물어보고 도움을 받고 있어요

그 분이 짠 코드를 보면서 제가 모르는 기능들이나 용어를 정리해봤습니다.

혹시 틀린 내용이 있으면 댓글 남겨주세요. 

 

 

window.onload

window.onload = () => {}

=> window.onload 메소드는 자바 스크립트가 나중에 실행되어야 하는데 코드를 앞에 쓰고 싶을때!

그럴 때 사용하는 코드입니다. 웹 브라우저의 모든 요소가 준비된 후에 실행된다고 하네요

{ } 내에 코드를 작성해주시면 해당 메소드를 오버라이딩할 수 있습니다.

 

fetch()

fetch(`/api/events/${id}`, {
        method: 'DELETE',
        headers: {'Content-Type': 'application/json'},

    }).then(response => {
        if (!response.ok) {
            throw new Error('Request failed...');
        }

        alert('삭제되었습니다.');
        goList();

    }).catch(error => {
        alert('오류가 발생하였습니다.');
    });

=> fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다.

(Promise 타입도 나에게는 너무 생소함... )

반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.

 

 

.then()

 

=> 비동기 처리가 끝난 후에 then의 인자에 들어가있는 함수가 실행됩니다.

 

done()

=> 형태를 보면 거의 유사하다는 것을 알 수 있는데 success는 jQuery에서 성공 콜백의 기본 이름으로, ajax 호출 옵션으로 정의됩니다.

그러나 $.Deferreds와 더 정교한 콜백의 구현 이후, done은 어떤 deferred에서도 호출될 수 있기 때문에 성공 콜백을 구현하는 데 선호되는 방법입니다. deferred는 뭔지 아직은 잘 모르겠지만... 

또한 promises 패턴인 .done()이 좀 더 깔끔하다.

 

Promise

=> 여기서 의문. Promise 타입은 뭐지..? 그래서 또 구글링해보았습니다.

Promise는 현재에는 당장 얻을 수는 없지만 가까운 미래에는 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공합니다. 당장 원하는 데이터를 얻을 수 없다는 것은 데이터를 얻는데까지 지연 시간(delay, latency)이 발생하는 경우를 말합니다. I/O나 Network를 통해서 데이터를 얻는 경우가 대표적인데, CPU에 의해서 실행되는 코드 입장에서는 엄청나게 긴 지연 시간으로 여겨지기 때문에 Non-blocking 코드를 지향하는 자바스크립트에서는 비동기 처리가 필수적입니다.

 

설명을 열심히 읽어보긴 하는데.. 설명하는 단어들이 너무 어려워서 꼬리에 꼬리를 물고 찾아보게 되네요 

 

Non-blocking

 

=> Non - blocking과 blocking, 동기와 비동기를 비교해놓은 사이트들이 많더군요

Non - blocking과 blocking은 호출되는 함수가 바로 return하느냐 마느냐가 중요하고 동기와 비동기는 호출되는 함수의 작업 완료 여부를 누가 신경쓰느냐가 중요하다고 합니다.

즉 호출된 함수가 바로 return해서 호출한 함수에게 제어권을 넘겨주고 호출한 함수가 다른 일을 할 수 있는 기회를 줄 수 있으면 non-blocking, 호출된 함수가 자신의 작업을 모두 마칠 때까지 호출한 함수에게 제어권을 넘겨주지 않고 대기하게 만든다면 blocking이구요

호출되는 함수에게 callback을 전달해서 호출되는 함수의 작업이 완료되면 호출되는 함수가 전달받은 callback을 실행하고, 호출한 함수는 작업 완료 여부를 신경쓰지 않는다면 비동기, 호출하는 함수가 호출되는 함수의 작업 완료 후 return을 기다리거나 호출되는 함수로부터 바로 return 받더라도 작업 완료 여부를 호출한 함수 스스로 확인하며 신경 쓴다면 동기입니다.

요게 가장 많이 나오는 그림

 

JSON.stringify({})

 

=> JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다

 

ajax

 

=> 자바스크립트를 이용한 비동기식으로 XML 이용하여 서버와 통신하는 방식입니다.
최근에는 XML보다 Json을 더 많이 사용하죠. Json은 C#하면서도 많이 사용해봤어요 

주로 화면 전체를 전환시키지 않고 부분적으로 처리할 때 사용합니다.
페이지 일부분에만 새로운 콘텐츠를 로드하는 기능은 사용자의 전체적인 사용 경험을 향상시켜줍니다.

SPA(Sinlge Page Application, 브라우저에서 실행되지만 마치 소프트웨어 애플리케이션 같은 느낌을 주는 웹 기반 도구)가 등장하는 계기가 되기도 했습니다. 

 

alert

alert('게시글 정보를 찾을 수 없습니다.');

=> 메시지 창 띄우기