크롬 요소 소스 보기, MIME, AJAX, 서버와 자바스크립트의 데이터 교환, JSON

하루입니다.

 

 

---

 

 

 

1. 세미 크롬 디버깅

말이 디버깅이지 그냥 요소 소스 보기입니다. 왜 거창한 이름을 붙였냐면 제가 이거로 오류를 고쳐서임.

 

1. 크롬에서 F12 누르기

2. 네트워크 들어가기

3. 파란 동그라미 클릭하기

 

 

 

 

저 네모화살표를 클릭하고 요소에 커서를 올리면 이렇게 뜬다.

 

 

 

 

내가 이거로 오류 찾은 법

1. 다운로드를 누르면 이클립스 콘솔에 boardNo(게시물 번호)가 뜨도록 했음.

2. 0이 떴다. 31이 떠야 하는데.

3. 때마침 숙련된 선생님의 페이지 요소 검사법 알려주기가 있었고

4. no가 아닌 ne로 적힌 걸 알게 되었다.

5. ne를 no로 바꿔주니 정상동작함.

 

 

 

MIME 타입

• 클라이언트에게 전송되는 컨텐츠의 타입을 지정할 때 사용되는 규약이다.
• type/subtype : 타입과 서브타입으로 구성된다.

 

자주 사용되는 MIME 타입

• application/octet-stream : 바이너리 파일 위한 기본값
• text/plain
• text/html
• text/css
• text/javascript
• application/json : JSON 형식으로 작성된 데이터 교환용 텍스트 데이터
• multipart/form-data : 브라우저에서 서버로 폼의 내용을 전송할 때 사용
• application/x-www-form-urlencoded : 브라우저에서 서버로 폼의 내용을 전송할 때 사용

 

 

 

 

우리는 html 컨텐츠, 재요청 url, 첨부파일 교환하는 법 알고 이제 JSON컨텐츠 교환하는 법 배울 것. AJAX를 사용한다. AJAX는 자바스크립트와 서버간의 데이터 교환이며, 이를 배우기 전에 HTTP 통신법을 먼저 알아야 한다.

 

 

 

 

 

 

웹브라우저와 서버의 HTTP 통신

• 웹브라우저가 서버로 요청을 보내고, 서버의 응답을 받는다. 서버가 요청을 처리하는 동안 웹브라우저는 다른 요청을 보낼 수 없다. 요청과 응답이 완료되면 화면 전체가 갱신된다. 동기적 통신이다.
• 요청을 연속해서 보낼 수 없고, 화면의 일부분만 갱신 가능하며, 항상 화면이 리로딩된다는 (단)점이 있다.

 

 

 

 

AJAX XHR을 이용한 서버와의 비동기 통신

• 웹브라우저가 서버에서 요청하고 응답하는 것까지는 같으나, 이벤트가 발생할 때마다 자바스크립트의 이벤트 핸들러 함수가 실행된다. 이벤트 핸들러 함수는 XHR 객체를 생성한다. 요청과 응답을 XHR이 한다. 페이지의 특정 부분만 갱신된다. 요청 순서와 무관하게 처리되어 다른 요청 보낼 때 기다리지 않아도 된다.

예시로는 추천 검색어, 지도, 아이디/이메일 중복검사 등이 있다.

 

 

 

AJAX(Asyncronous JavaScript And XML)

XMLHttpRequest 객체(서버와의 HTTP 통신을 지원)를 활용한 서버와의 비동기식 HTTP 통신

AJAX의 수행절차 (위와 같아용)
1. 사용자와 웹페이지의 상호작용으로 이벤트 발생
2. 자바스크립트로 작성한 이벤트핸들러함수 실행
3. 이벤트핸들러함수에서 XMLHttpRequest 객체 생성
4. XMLHttpRequest객체 초기화 및 서버로 요청 전송
5. XMLHttpRequest객체가 응답을 받으면, 응답데이터 조회
6. 조회된 응답데이터로 HTML 컨텐츠 생성
7. 생성된 HTML 컨텐츠를 웹페이지에 반영

AJAX의 특징

• 서버와 비동기 통신이 가능(요청 보내고, 응답을 기다리지 않고 새 요청 보낼 수 있음)
• 서버와 데이터 교환이 가능
• 서버에서 받아온 데이터로 화면 리로딩없이 화면 일부분을 갱신 가능 

 

 

 

JSON(JavaScript Object Notation)

• 경량의 데이터 교환용 표기법이다.
• 사람이 읽고 쓰기 쉽고, 기계(프로그램)로 분석하고 생성하기 쉽다.
• 이름은 언제나 "   "로 둘러싸인 문자열
• 값은 "문자열", 1, 3.14, null, true, false, Array, Object
• Array 구조
  [값, 값, 값]
• Object 구조
  {"이름":값, "이름":값}
• JSON 형식의 데이터 <---> 자.스 / 자바 객체/배열간의 변환이 가능하다는 것이다. 물론 규칙을 지켜서 적어야 함.

 

 

 

 

~ 오늘의 오류 ~

콘솔 찍어서 값 나오나 확인했는데 에러가 떴다. 뭘 눌러도 에러라 급하게 여쭤봤는데 ... console이 아니라 consol이라고 적어서 찾을 수 없다고 뜬 거였음. 정말 너무 ... 너무 바보같은 실수라 ... 눈물이 났다 ... 하지만 실전에서는 이런 일이 더 빈번할테니 ... 자동완성 주라 줘 ... 그래도 이런 실수 한 번 더 했을 때는 혼자서 찾을 수 있었다. " " 안은 ... 항상 오타를 두번 세번 확인하자 ... 그래도 오타는 있다는 게 흠터레스팅 ... 

 

 

 

---

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!