[부스트코스] 2. DB 연결 웹앱 : WEB UI 개발

강의 : www.edwith.org/boostcourse-web

[부스트코스] 웹 프로그래밍 강좌소개 : edwith

 

---

* Window 객체

• 전역 객체로 많은 메소드들이 존재함 (.으로 부를 수 있고 생략 가능)
• alert : 브라우저에서 경고창을 띄울 때 사용함
• setTimeout : 인자로 함수(콜백함수 : 나중에 실행되는 함수)를 받음
  • 함수 다음으로 나오는 파라미터(밀리세컨드) 이후 첫 번째 파라미터인 함수를 실행한다는 메소드
  • 비동기이므로 다른 것들 먼저 실행하고 있음
  • 스택이 실행되고 나서 비동기가 실행된다!

function run() {
	setTimeout(function() {
    	var msg = "hello world!";
        console.log(msg);
    }, 2000);
    console.log("running ...");
 }
 
 console.log("run start");
 run();
 console.log("run end");
 
 // console
>> run start
>> runnning ...
>> run end
>> hello world!

 

* DOM (Document Object Model)

• 브라우저에서는 HTML 코드를 DOM이라는 객체 형태의 모델로 저장함 -> 저장된 정보 === DOM tree
• Document : 전체 최상위 루트 객체
• 쉽게 찾고 삭제하기 위해서 브라우저는 DOM API 제공 (함수의 묶음 같은 것) 굉장히 많다
• getElementById() : 아이디 정보를 통해 엘리먼트를 찾는 함수
• Element.querySelector() : dom을 찾을 때 유용한 메소드 (아이디로 찾을 때는 #붙여야 함, 클래스는 .)
• querySelectorAll도 있음

 

* Event

• 브라우저에는 많은 이벤트가 발생함 (ex. 브라우저 화면의 크기 조절, 스크롤, 선택 등)
• 이벤트 등록 : addEventListener 함수 사용
  • 두 번째 인수가 함수이므로 이벤트가 발생했을 때 실행하는 함수 (=이벤트핸들러, 이벤트리스너)
  • 이벤트핸들러에 파라미터로 이벤트 정보를 넣을 수 있음
• 이벤트 리스너가 실행될 때 어떤 이벤트에 의해 실행되었는지, 이벤트 객체를 매개변수로 생성 -> 추가적 작업 가능
• 가장 많이 쓰이는 것 = event.target (=== 해당 이벤트가 발생한 엘리먼트)

참고하면 좋을 링크 : https://developer.mozilla.org/en-US/docs/Web/Events

Event reference

 

 

---

 

 

* Ajax(Asynchronous JavaScript and XML, 에이잭스)

• 서버로부터 비동기로 데이터를 받아오는 것
• 풀어서 설명하면, 웹페이지에 데이터를 갱신할 때 새로고침 없이 서버로부터 데이터를 받아오자는 것! (ux의 향상)
• 장점 : 페이지 이동 없이 빠르게 화면을 전환할 수 있음, 수신하는 데이터 양의 감소
• 단점 : 브라우저 호환의 문제, 역으로 서버 부하가 일어날 수 있음, 클라이언트 기능 제한

# ajax 실행 코드
function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

> XMLHttpRequest 객체가 반드시 필요

 

* JSON (JavaScript Object Notation)

• 클라이언트와 서버는 데이터를 주고받는 데 주로 json이라는 파일 형식을 이용함
• 키-값들의 쌍으로 이루어진 데이터 오브젝트를 전달하는 형식임
• 프로그래밍 언어나 플랫폼에 독립적 -> 많은 프로그래밍 언어에서 사용할 수 있음
• 문자열은 항상 큰 따옴표로 묶어주어야 함 (역슬래시 다음에 큰 따옴표가 바로 나올 수 없음)

 

* CORS (Cross-Origin Resource Sharing)

예전에 백엔드와 협업을 했을 때 겪었던 문제였는데 이번 강의에서 cors에 대해 찾아보라는 부분이 있어 추가함.

이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

악의적인 사용을 막기 위해 허용된 오리진에서만 요청이 가능하도록 하는 기술

https://developer.mozilla.org/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS)

 

자바스크립트 디버깅은 보통 브라우저에 많이 이루어짐 -> 개발자도구의 브레이크포인트 이용하기

 

디버깅 컨트롤

• Pause, Continue : 평소에는 Pause 버튼 상태고 breakpoin가 잡힌 상태에선 Continue 버튼이 됨. 다른 브레이크포인트가 잡힐 때까지 코드 진행
• Step over next function call : 코드 라인을 한 스탭 진행, 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수 안의 코드로는 진입하지는 않음
• Step into next function call : 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있음
• Step out of current function : 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아감
• Active/Deactive breakpoint : breakpoint를 끄거나 켤 수 있음
• Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 breakpoint를 잡음

 

 

---