JavaScript는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다.
웹 브라우저가 HTML문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다.
요약
HTML문서에서 JavaScript를 사용하려면 <script> 태그를 사용
JavaScript 코드는 HTML 파일 안에 두거나, 외부 JavaScript 파일을 HTML문서 안에 포함.
<script> 태그는 HTML 문서의 어느 위치에서나 선언 가능하며, 일반적으로 <head>, <body>내부에 위치
웹 브라우저가 HTML문서를 순차적으로 해석(parsing)하므로, script 위치에 따라 로드와 실행 시점이 달라진다.
ECMAScript6부터는 let과 const 키워드가 추가
| 구분 | 선언위치 | 재선언 | |
| var | 변수 | 전역 스코프 | 가능 |
| let | 변수 | 해당 스코프 | 불가능 |
| const | 상수 | 해당 스코프 | 불가능 |
JavaScript는 동적타입(Dynamic / Weak Type)언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 >> 같은 변수에 여러 타입의 값을 할당 가능
JavaScript에서 함수 정의 시 매개변수에 대한 타입은 명시하지 않는다.
함수를 호출할 때 정의된 매개변수와 전달인자의 개수가 일치하지 않더라도 호출 가능하다.
JavaScript는 Java나 C++등과 같은 언어와는 달리 자료형에 대해 매우 느슨한 규칙이 적용.
어떤 자료형이든 전달할 수 있고, 그 값을 필요에 따라 변환 가능
서로 다른 자료형의 연산이 가능
변수 호이스팅(Variable Hoisting), 함수 호이스팅
var 키워드를 사용한 변수는 중복해서 선언이 가능
호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성. 즉, Javscript는 모든 선언문이 선언되기 이전에 참조가 가능
js는 동적으로 타입이 할당이되니까 타입하고 값까지 다 동일해야 === true 값만 같으면 == true
비교연산자 ==, ===의 차이점은 자료형까지 비교하는지 아닌지의 여부
callback함수
콜백 함수(Callback function)는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말함.
일반적으로 콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행됨.
콜백 함수는 주로 비동기식 처리 모델에서 사용됨 >> 처리가 종료되면 호출될 함수(콜백함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수를 호출.
요약
Javascript의 변수는 var를 사용하여 선언하며 타입이 없다.(let, const)
자료형은 원시타입(Primitive Type)과 객체타입(Object Type)으로 분류
함수는 일급객체(First-class Object)로 변수에 저장하거나 함수의 전달인자 또는 반환 값으로 사용
객체는 이름과 값으로 구성된 프로퍼티의 집합이며 프로퍼티를 동적으로 조작 가능
window 객체의 open() 함수를 사용하면 새 창을 열 수 있다. close() 함수로 현재 창을 닫을 수 있다.
window 객체의 opener 속성을 이용하면 부모 창(새 창을 연 창)을 컨트롤 가능
- 부모 창에 값 전달
- 부모 창을 새로 고침 하거나 페이지 이동
opener 객체는 부모 창의 window 객체
location 객체를 이용하여 현재 페이지 주소(URL)와 관련 된 정보들을 알 수 있다.
location.href - 프로퍼티에 값을 할당하지 않으면 현재 URL을 조회하고 값을 할당하면 할당 된 URL로 페이지 이동.
location.reload() - 현재 페이지를 새로고침
history 객체는 브라우저의 페이지 이력을 담는 객체
history.back() / history.forward() - 브라우저의 뒤로 가기/앞으로 가기 버튼과 같은 동작
window객체는 생략가능 alert confirm prompt 등
window 객체는 웹 브라우저에서 작동하는 javascript의 최상위 전역객체이다. BOM(Browser Object Model)으로 불리기도 함.
form (html)
사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용
사용자의 요청에 따라 서버는 HTML form을 전달(회원가입양식, 검색 양식 등)
사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송. 이를 submit이라 함.
서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환.
이벤트(Event)
웹 페이지에서 여러 종류의 상호작용이 있을때 마다 이벤트가 발생
JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행
이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행
이벤트 핸들러(Handler) 또는 이벤트 리스너(Listener)라 하며 이 함수에 이벤트 발생시 실행해야 하는 코드 작성
폼(Form) 이벤트
Form 관련 이벤트는 웹 초기부터 지원되어 여러 웹 브라우저에서 가장 안정적으로 동작하는 이벤트.
자주 사용되는 이벤트로 form이 전송될 때에는 submit 이벤트가 발생
Form을 초기화할 때는 reset 이벤트가 발생
submit과 reset은 이벤트 핸들러에서 취소할 수 있다.
요약
DOM에서 발생되는 이벤트에 대한 핸들러(리스너)를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다.
핸들러 등록은 HTML태그의 on 속성에 명시하는 방법과 JavaScript에서 DOM 검색 후 등록하는 방법이 있다.
Web Storage - localStorage
데이터를 사용자 로컬에 보존하는 방식
데이트를 저장, 덮어쓰기, 삭제 등 조작 가능
자바스크립트로만 조작
모바일에서도 사용 가능
쿠키(Cookie)와의 차이점
유효 기간이 없고 영구적으로 이용 가능
5MB까지 사용 가능 (쿠키는 4KB까지, 브라우저에 따라 다를 수 있음)
쿠키와는 다르게 네트워크 요청 시 서버로 전송되지 않음
서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음
웹스토리지는 origin(프로토콜, 도메인, 포트)이 다르면 접근 불가.
기본 구성
키(Key)와 값(value)을 하나의 세트로 저장
도메인과 브라우저별로 저장
값은 반드시 문자열로 저장됨
SessionStorage과 차이점
localStorage - 세션이 끊겨도 사용 가능
sessionStorage - 같은 세션만 사용 가능
sessionStorage의 경우에는 동일한 세션에서만 사용 가능하지만 localStorage는 세션이 끊기거나 동일한 세션이 아니더라도 사용 가능.
AJAX 통신
Ajax (Asynchronous Javascript and XML)는 언어나 프레임워크가 아닌 구현하는 방식을 의미
Ajax는 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법을 의미
JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달받고 비동기 방식으로 결과를 조회
화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡
일반 요청에 대한 응답
- data를 입력 후 event 발생
- Ajax를 적용하지 않은 요청은 서버에서 data를 이용 하여 logic처리
- logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면 전환이 일어남)
Ajax 요청에 대한 응답
- data를 입력 후 event 발생
- Ajax를 적용하면 event 발생시 서버에서 요청을 처리한후 Text, XML 또는 JSON으로 응답
- client(Browser)에서는 이 응답 data를 이용하여 화면 전환없이 현재 페이지에서 동적으로 화면을 재구성
서버와 클라이언트의 상호작용
웹 화면을 구성하는 방식은 서버 중심의 상호작용 방식과 클라이언트 중심의 상호작용 방식으로 구분
서버 중심의 개발방식은 화면 구성이 서버에서 이루어 진다.(프리젠티이션 영역의 JSP나 PHP, ASP 등)
클라이언트 중심의 개발방식은 클라이언트(웹 브라우저)에서 화면을 구성한다. (주로 JavaScript)
Ajax는 클라이언트 중심의 개발 방식이며 비동기 요청보다는 동적 화면구성이 관건임.
ajax는 xmlhttprequest를 통해서 통신
JavaScript AJAX
XMLHttpRequest는 자바스크립트가 Ajax 방식으로 통신할 때 사용하는 객체
XMLHttpRequest 객체는 Ajax 통신 시 전송 방식, 경로, 서버로 전송할 data등 전송정보를 담는 역할
실제 서버와의 통신은 브라우저의 Ajax 엔진에서 수행
직접 자바스크립트로 Ajax를 프로그래밍할 경우 브라우저 별로 통신방식이 달라 코드가 복잡해진다.
httpRequest의 속성값
readyState
| 값 | 의미 | 설명 |
| 0 | Uninitialize | 객체만 생성 (open 메소드 호출 전) |
| 1 | Loading | open 메소드 호출 |
| 2 | Loaded | send 메소드 호출. status의 헤더가 아직 도착되기 전 상태 |
| 3 | Interactive | 데이터 일부를 받은 상태 |
| 4 | Completed | 데이터 전부를 받은 상태 |
status
| 값 | 텍스트(status Text) | 설명 |
| 200 | OK | 요청 성공 |
| 403 | Forbidden | 접근 거부 |
| 404 | Not Found | 페이지 없음 |
| 500 | Internal Server Error | 서버 오류 발생 |
jQuery AJAX 함수 - $.ajax()
$.ajax() 함수는 jQuery에서 Ajax 기능을 제공하는 가장 기본적인 함수
다른 함수들에 비하여 옵션을 다양하게 지정할 수 있으며 실무에서 가장 많이 사용
함수의 옵션은 다양하지만 대부분 자동으로 지정하므로 생략 가능
$.get(), $.post() 함수는 $.ajax()의 옵션 속성 중 type 옵션이 미리 지정된 함수
지정된 HTTP Method로 Ajax 통신을 하며 get()은 GET 방식을, post()는 POST 방식을 사용
GET 방식의 특징
- URL에 변수(데이터)를 포함시켜 요청한다.
- 데이터를 Header(헤더)에 포함하여 전송한다.
- URL에 데이터가 노출되어 보안에 취약하다.
- 전송하는 길이에 제한이 있다
- 캐싱할 수 있다. (캐싱이란 한번 접근 후, 또 요청할 시 빠르게 접근하기 위해 레지스터에 데이터를 저장시켜 놓는 것)
POST 방식의 특징
- URL에 변수(데이터)를 노출하지 않고 요청한다.
- 데이터를 Body(바디)에 포함시킨다.
- URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.
- 전송하는 길이에 제한이 없다.
- 캐싱할 수 없다.
form의 속성
method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
속성값 : GET : 주소 표시줄에 사용자가 입력한 내용이 표시. 256 ~ 2048 bytes(길이제한)의 데이터만 서버로 전송
POST : HTTP 메시지의 Body에 담아서 전송하기 때문에 전송 내용의 길이에 제한이 없다. 사용자가 입력한 내용이 표시되지 않는다.
action : <form> 태그 안의 내용들을 처리해 줄 서버상의 프로그램 지정. (URL)
'개발 > 기타' 카테고리의 다른 글
| [TIL] JSP (Java Server Page) (0) | 2022.04.05 |
|---|---|
| [TIL] 서블릿 (Servlet) (0) | 2022.04.05 |
| [TIL] MVC Pattern Model1, Model2 - (MVC 패턴 모델1, 모델2) (0) | 2022.03.28 |
| [TIL] FrontEnd 관련 이것저것 3 (jQuery, Bootstrap) (0) | 2022.03.25 |
| [TIL] FrontEnd 관련 이것저것 1 (HTML, CSS) (0) | 2022.03.23 |