이 WAS 서버는 Spring 기반 프로젝트를 대상으로 올리는 WAS 서버입니다.

보통 실제 프로젝트는 Web Was DB 3티어지만 여기서는 싱글티어로 설정합니다 참고 바랍니다.

1.가상 OS에 CentOS 7 iso 삽입

소프트웨어 선택 -> 기본 웹 서버 설치

비밀번호 설정 후 기다려줍니다.

2.IP 세팅

보통 기본으로 DHCP로 되어있습니다. IP를 정적으로 바꿔줍시다

vi /etc/sysconfig/network-scripts/ifcfg-ens랜덤숫자 (os마다 끝에 숫자가 다르다) 

vi 에디터를 모르시는 분들은 vi 에디터 사용법 먼저 숙지하셔야 됩니다.

편하게 복붙용

BOOTPROTO="static"
IPADDR="172.10.0.35"
GATEWAY="172.10.0.1"
DNS1="8.8.8.8" //구글 DNS

최종 IP 세팅

3.SSH 설치 (기본 웹서버로 설치하면 설치 돼있으므로 패스)

4.JDK 설치 (여기서는 openjdk로 설치하겠습니다.)

(복붙하기 쉽게 코드블럭)

//yum list java*jdk-devel 설치 가능 java 버전들 확인
sudo yum install java-1.8.0-openjdk java-1.8.0-openjdk-devel
//설치 중간에 y 눌러줘야 한다.

//설치 확인
rpm -qa java*jdk-devel

javac 경로 확인
which javac //이건 심볼릭 링크 주소

java -version 확인
readlink -f /usr/bin/javac 명령어 //심볼링 링크의 원본 주소를 알려주는 명령어

설치를 하고나면 기본 경로는 /usr/lib/jvm/java-1.8.0-openjdk-~......가 된다

일단 이름이 너무 길고 경로도 통일 해주기 위해 이름과 경로를 변경한다.

cd /usr/lib/jvm/
mv java-1.8.0-openjdk-1.8.0.222.b10-1.el7_7.x86_64/ openjdk-1.8
mv openjdk-1.8/ /usr/local/

5.apache-tomcat 설치 (tomcat 파일은 공식 톰캣 홈페이지에서 받을 수 있다.)

먼저 다운로드 받은 톰캣.tar 파일 FTP(FileZilla 사용)로 WAS 서버에 파일을 보낸다.

WAS 터미널에서 압축 풀기

tar -zxvf tomcatFileName.tar

gunzip //압축이 바로 안풀릴경우 이 명령어 실행
// 압축 풀기 후 이름 및 경로 설정
mv apache-tomcat-8.5.34 apache-tomcat
mv apache-tomcat /usr/local/

환경변수 설정

vi /etc/profile

export JAVA_HOME=/usr/local/openjdk-1.8
export CLASSPATH=$JAVA_HOME/jre/lib/ext:$JAVA_HOME/lib/tools.jar
export CATALINA_HOME=/usr/local/apache-tomcat
export PATH=$PATH:$JAVA_HOME/bin:$CATALINA_HOME/bin

:wq

source /etc/profile //파일변경 후 적용 명령어 꼭 해줘야한다.

//환경 변수 확인
echo $JAVA_HOME
echo $CATALINA_HOME

방화벽 설정

//방화벽 포트 허용
firewall-cmd --permanent --zone=public --add-port=8080/tcp //tomcat
firewall-cmd --permanent --zone=public --add-port=80/tcp //web
firewall-cmd --permanent --zone=public --add-port=3306/tcp //mysql
firewall-cmd --permanent --zone=public --add-port=443/tcp // https

firewall-cmd --reload
firewall-cmd --list-all

톰캣 실행 테스트

/usr/local/apache-tomcat/bin/startup.sh

ifconfig //자기 서버의 IP 알아내기

인터넷 브라우저 URL에 자기 IP 검색

이렇게 고양이가 나오면 정상적으로 실행이 된것이다.

하지만 저 뒤에 붙는 :8080이 거슬린다 (실제 서비스 URL에도 보면 :8080 붙은 페이지는 없다)

vi /usr/local/apache-tomcat/conf/server.xml

<Connector port="80" protocol="HTTP/1.1" // port를 8080-> 80 으로 변경
               URIEncoding="UTF-8" // 인코딩 추가
               connectionTimeout="20000"
               redirectPort="8443" />
               
/usr/local/apache-tomcat/bin/shutdown.sh
/usr/local/apache-tomcat/bin/startup.sh

그리고 다시 아이피를 입력해서 들어가면 8080 없이도 잘된다.

톰캣 자동실행 서비스 등록

WAS 서버가 갑자기 재부팅 되더라도 톰캣이 저절로 실행될 수 있게 자동실행 서비스를 등록한다.

/usr/local/apache-tomcat/bin/shutdown.sh //기존 실행 중이던 톰캣 종료

//vi /usr/lib/systemd/system/서비스이름.service
//저는 was01-tomcat이라고 하겠습니다.

vi /usr/lib/systemd/system/was01-tomcat.service

[Unit]
Description=tomcat8
After=network.target syslog.target
[Service]
Type=forking
Environment=JAVA_HOME=/usr/local/openjdk-1.8
User=root
Group=root
ExecStart=/usr/local/apache-tomcat/bin/startup.sh
ExecStop=/usr/local/apache-tomcat/bin/shutdown.sh
UMask=0007
RestartSec=10
Restart=always

SuccessExitStatus=143
[Install]
WantedBy=multi-user.target

서비스 관리

systemctl enable was01-tomcat.service //서비스 등록
systemctl start was01-tomcat.service //서비스 시작
ps -ef | grep was01-tomcat //확인
reboot //재부팅(팅김 상황 테스트)
ps -ef | grep was01-tomcat //재부팅후 서비스가 올라왔나 확인

WAR 파일(웹 프로젝트 파일) 올리기

먼저 FTP로 WAR 파일을 WAS 서버로 전송

이때 WAR 파일 이름을 ROOT.war로 저장한다.

mv ROOT.war /usr/local/apache-tomcat/webapps/

6.MariaDB 설치

yum install mariaDB 로 설치해도 되지만 버젼이 5.5이다.

MariaDB.repo 파일을 생성해주자

vi /etc/yum.repos.d/MariaDB.repo

# http://mariadb.org/mariadb/repositories/
[mariadb]
name = MariaDB
		
#64비트인경우
baseurl = http://yum.mariadb.org/10.1/centos7-amd64
	
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1

//저장 후

yum remove mariadb-server mariadb-libs -y //기존에 설치되어있는 MariaDB 서버 라이브러리 삭제

yum install MariaDB-server MariaDB-client MariaDB-common -y

설치 후 인코딩 설정

vi /etc/my.cnf

[mysqld]
character-set-server=utf8

//저장

mysql MaridDB 들어가보기

systemctl start mariadb // 실행
systemctl enable mariadb // 서비스 자동실행 등록

mysql -u root -p 
Enter password: //처음에 설치했을땐 패스워드가 없기 때문에 그냥 엔터

//root 비밀번호 설정

show databases;
use mysql;
update user set password=password('새 비밀번호') where user = 'root';

flush privileges; // 적용

select user,password from user; // 확인

이로써 최~~~~~~~~~~~~소한의 WAS 서버가 완성됐다.

최종 정리

Centos 7 Server
openjdk 1.8.0
apache-tomcat 8.5.34
MariaDB 10.1

절대 정답이 아니며 , 회사마다 사람마다 쓰는 네이밍은 다릅니다 참고만 해주시면 감사하겠습니다.

네이밍( Naming ) 종류

1.camelCase(캐멀, 단봉낙타 표기법)

각 단어의 첫 단어를 대문자로 표기하고 붙여 쓰되, 맨 처음 단어는 소문자로 표기함

띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식

예시: backgroundColor, typeName, iPhone

2.PascalCase(파스칼, 쌍봉낙타 표기법) or Upper Camel Case

첫 단어를 대문자로 시작하는 표기법

예시: BackgroundColor, TypeName, PowerPoint

3.Hungarian notation(헝가리 언)

접두어를 사용하는 표기법

형식은 camelCase와 같지만, 맨 앞의 단어가 자료형을 나타내는 접두어임

예시: strName, bBusy, szName

3-1.헝가리 언 표기법

3-2. 헝가리 언 표기법 OOP ( Object Oriented Programming, 객체 지향 프로그래밍 )

출처: [명우니닷컴]

4.snake_case (스네이크) or under_scores (언더 스코프) 

단어를 밑줄 문자(_)로 구분하는 표기법

예시: background_color, type_name

5.UPPER_SNAKE_CASE(대문자 스네이크)

단어를 밑줄문자(_)로 구분하고 문자 전부 대문자로 기입하는 표기법 

주 사용 : Bash 변수, Java 상수(staic final)

예시 : MAX_PARTICIPANTS , MIN_PARTICIPANTS

static final int MAX_PARTICIPANTS = 10;

6.kebab-case (케밥)

하이픈(-)으로 단어를 연결하는 표기법

주 사용 : HTML  id, class, CSS

예시 : kebab-case, spinal-case, Train-Case, Lisp-case

출처:제타 위키

1.Java

예약어와 동일한 이름은 절대 금지

https://java119.tistory.com/21

1-1. 패키지 ( package  )

인터넷 도메인 주소의 역순을 많이 사용

자바 기본 라이브러리에서 사용 중인 java와 javax의 이름 사용은 제한

패키지명으로는 가급적 한 단어의 명사를 사용한다.

[com].[회사명].[프로젝트명].[최상위패키지명].[하위패키지명]…

예시 : package com.tistory.kakao.object;

1-2. 클래스 ( Class )

Java Class : PascalCase 

예시 : ClassName, Calc01, JqueryController

1-3. 인터페이스 ( interface  )

Java interface : PascalCase

택 1.

1. 인터페이스가 구현 클래스에 정보를 제공하는 경우 형용사 이름 사용 (~able, ~ible)

2. 일반 인터페이스 명사 사용

예시 1 : interface Serializable {...}

예시 2 : interface Controoler {...}

1-4. 메서드

Java Method : camel case, snake_case   

JavaScript function : camel case, snake_case 

예시 : getValue, get_Value

1-5. 변수( Variable )

Java Variable : camel case, snake_case   

소문자의 명사

예시 : int age; String name; int myAge; String myName;

1-6. 상수 ( Constant )

Java Constant : UPPER_SNAKE_CASE

모두 대문자로 사용

예시 : public static final int MAX_NUM = 100;

1-7. Enum

Enum 이름은 클래스 이름 규약을 따름, 세부 항목의 이름은 모두 대문자를 사용.

enum Season {SPRING, SUMMER, FALL, WINTER}

2.HTML

2-1.id/class

id : camel case

예시 : id="boardView", id="boardTB"

class : snake_case 

예시 : class="link_view"

반의어 모음

– get/set

– add/remove

– create/destroy

– start/stop

– insert/delete

– increment/decrement

– old/new

– begin/end

– first/last

– up/down

– min/max

– next/previous

– open/close

– show/hide

– suspend/resume

– parent/child

Java Collections Framework(JCF)

Java에서 컬렉션(Collection)이란 데이터의 집합, 그룹을 의미하며 

JCF(Java Collections Framework)는 이러한 데이터, 자료구조인 컬렌션과 이를 구현하는 클래스를 정의하는 인터페이스를 제공한다.

다음은 Java 컬렌션 프레임워크의 상속구조를 나타낸다.

상위 인터페이스 크게 세 분류

List

Set

Queue

그리고 Map 같은 경우는 Collection 인터페이스를 상속 받고 있지 않지만 Collection 으로 분류됨

1. Set 인터페이스

순서를 유지하지 않는 데이터의 집합으로 데이터의 중복을 허용하지 않는다.

• HashSet
  - 가장빠른 임의 접근 속도
  - 순서를 예측할 수 없음

문법(복붙용)

import java.util.HashSet;

public class CollectionTemp {

	public static void main(String[] args) {
		
			HashSet<String> hs = new HashSet<String>(); // HashSet 선언
		
			hs.add("홍길동");
			hs.add("아기장수 우투리");
			hs.add("홍길동");
			hs.add("춘향");

			System.out.println(hs);

			
	}

}

//결과 [홍길동,춘향,아기장수 우투리]
// 홍길동을 두번 넣었음에도 한번만 값이 넣어져있다. (HashSet의 특성인 중복값 무시)

• TreeSet
  - 정렬방법을 지정할 수 있음

import java.util.TreeSet;

public class CollectionTemp {

	public static void main(String[] args) {
		
			TreeSet<String> ts = new TreeSet<String>();
			
			   	ts.add("apple");
		        ts.add("airplane");
		        ts.add("alien");
		        ts.add("disc");
		        ts.add("dance");
		        
		        System.out.println(ts.headSet("b"));
		        System.out.println(ts.subSet("a", "al"));
		        System.out.println(ts.tailSet("c"));
			
	}

}
//결과 : [airplane,alien,apple] ts.headSet("b") 시작이 b 보다 작은 a로 시작하는 데이터들
//		 [airplane]  ts.subSet("a", "al") a ~ al 사이에 있는 데이터 from ~ to 
//		 [dance,disc] ts.tailSet("c") headSet의 반대 시작이 c 보다 큰 d부터 시작하는 데이터들

HashSet vs TreeSet 

HashSet과 TreeSet 모두 중복을 허용하지 않고 순서가 없는 컬렉션

1. 구현 방식
 - HashSet은 해싱을 이용하여 구현
 - TreeSet은 이진탐색트리를 이용하여 구현

2. 속도 비교
 - HashSet > TreeSet
 - 해싱이 이진탐색트리보다 빠르다

3. 정렬 기능
 - HashSet < TreeSet
 - 이진탐색트리를 이용했기 때문에 데이터 정렬이 가능 (Comparator 이용)

성능

HashSet > TreeSet > LinkedHashSet

예시) 이런 상황을 가정해보겠습니다.

어떤 웹 사이트에서 하루에 접속하는 사람들 수를 구하고자 합니다.

접속하는 IP를 세면 되겠죠.

근데 한사람이 여러번 접속하면 한 IP가 여러번 찍힐 것입니다.

이건 한번으로 카운트 해줘야 제대로 된 접속자 수를 구할 수 있습니다.

이럴 때 쓰는게 Set입니다.

그냥 수학에서 집합 이라고 보시면 됩니다.

2. List 인터페이스

순서가 있는 데이터의 집합으로 데이터의 중복을 허용한다.

• LinkedList
  - 양방향 포인터 구조로 데이터의 삽입, 삭제가 빈번할 경우 데이터의 위치정보만 수정하면 되기에 유용
  - 스택, 큐, 양방향 큐 등을 만들기 위한 용도로 쓰임
• Vector
  - 과거에 대용량 처리를 위해 사용했으며, 내부에서 자동으로 동기화처리가 일어나 비교적 성능이 좋지 않고 무거워 잘 쓰이지 않음
• ArrayList
  - 단방향 포인터 구조로 각 데이터에 대한 인덱스를 가지고 있어 조회 기능에 성능이 뛰어남

3. Map 인터페이스

키(Key), 값(Value)의 쌍으로 이루어진 데이터으 집합으로,

순서는 유지되지 않으며 키(Key)의 중복을 허용하지 않으나 값(Value)의 중복은 허용한다.

• Hashtable
  - HashMap보다는 느리지만 동기화 지원
  - null불가
• HashMap
  - 중복과 순서가 허용되지 않으며 null값이 올 수 있다.
• TreeMap
  - 정렬된 순서대로 키(Key)와 값(Value)을 저장하여 검색이 빠름

IDE(Integrated Development Environment) : Eclipse Juno 4.10.0

이클립스의 기본 템플릿을 열면 EUC-KR로 charset이 설정되어있음

파일 인코딩 설정

Window - Preferences 클릭

검색창에 Encoding 검색

Content Types -> Text 클릭 후-> Default encoding : UTF-8 - Update 클릭

Text file encoding UTF-8로 설정

Web -> JSP Files -> Encoding 변경

Web -> CSS Files -> Encoding 변경

Web -> HTML Files -> Encoding 변경

XML -> XML Files -> Encoding 변경

General → Editors → Text Editors → Spelling에서 Encoding을 MS949에서 UTF-8로 변경

이미 생성된 프로젝트 인코딩 바꾸기

만들어진 프로젝트 우클릭 - Properties 클릭

Resource -> UTF-8로 변경

정리

이로써 거의 모든 인코딩을 UTF-8로 변경했습니다

제가 모르고 있는게 있다면 덧글로 피드백 주시면 감사하겠습니다.

TMI

설정 후 NEW FILE를 만들게 되면 아래 사진처럼 UTF-8로 기본 인코딩이 변경된 것을 알 수 있다.

주의 : 이미 다른 인코딩형식으로 파일을 만들었다가 UTF-8로 변경하면 기존에 써놨던 한글이 다 깨져버리기 때문에

백업하고 변경하도록 해야한다.

AJAX 요청을 보내는 방법

1.XMLHttpRequest(XHR) 사용

2.jQuery를 이용한 ajax 사용

1.XMLHttpRequest(XHR) 사용 방법

문법

var xhr = new XMLHttpRequest(); // 선언
xhr.onreadystatechange = function() { // 요청에 대한 콜백
  if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
    if (xhr.status === 200 || xhr.status === 201) {  
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};
xhr.open('GET', '/ajax/ajaxController'); // 메소드와 주소 설정
xhr.send(); // 요청 전송 
// xhr.abort(); // 전송된 요청 취소

코드 설명

xhr.open : open(방식(GET, POST, PUT, PATCH, DELETE, HEAD), "보낼 서버 주소")이라는 메소드 실행

xhr.send : open이 요청을 열어줬다면 send로 요청을 전송해준다.

onreadystatechange : 요청에 대한 응답을 받는 이벤트 리스너 

readyState : 요청 시 xhr 객체(코드의 첫 줄) 각 상태별로 readyState가 변경됨 

readyState 상태 순서 

0(xhr.UNSENT, 보내지 않음) -> open() 메소드 실행
1(xhr.OPENED)로 변경 -> send() 메소드 실행
2(xhr.HEADERS_RECEIVED)로 변경
3(xhr.LOADING) 로딩중...
4(xhr.DONE) 요청이 완료됨

if (xhr.readyState === xhr.DONE)  줄 해석

여기서 말하는 DONE이 readyState의 4번 DONE를 가리킴

요청이 완료되면 무~조~건 HTTP 상태 코드가 생깁니다.

if (xhr.status === 200 || xhr.status === 201) 줄 해석

여기서 200 || 201이란? 

HTTP 상태 코드를 말한다 

HTTP 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다

위 1번 방식을 사용하게 되면 엄청 복잡하고 코드도 길어진다.

내가 알던 ajax 문법과 다르다?라고 하시는 분들이 계실 겁니다.

그것은 바로 대중적으로 알려진 jQuery를 이용한 ajax입니다.

2.jQuery를 이용한 ajax 사용

문법

Client (request , 요청)

 <!-- 이렇게 함으로써 외부의 CDN 서버에서 가장 최신의 jQuery 배포판을 불러 올 수 있습니다. //-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <script>
    function jqueryAJAX(){
    
    $.ajax({
   
    data : { type1 : type1, // data 옵션
    		 type2 : type2,
    },	// 끝에 컴마(,)를 주의해야됨
    url : "/ajax/ajaxController", // url 필수
    success:function(data){ // success option
    console.log(data.length);
    }
    
    })
    
    }
    
    
    </script>

Server (response , 응답 Spring MVC 프레임워크 기준)

@Controller
@RequestMapping("ajax/*")
public class JqueryController {

@RequestMapping("ajax/ajaxController")
	public @ResponseBody List<serverData> getServerData(String type1,String type2) {
		List<serverData> result = menuservice.getServerData(type1,type2);
		return result;
	}

}

Client 코드 설명

$. ajax({}) : ajax 선언

data : server로 보낼 데이터 정의

url (필수) : server로 보낼 url

success : function(data) : 요청이 성공했을 때 (HTTP (2xx)) 실행되는 메서드 (data)는 server에서 보낸 리턴 값

Server 코드 설명(Spring mvc에 대한 설명이며 , 다른 언어, 프레임워크는 다를 수 있습니다)

@Controller : 해당 Class를 Controller로 지정하는 어노테이션

@RequestMapping : 해당 Class의 유입 경로는 ajax로 시작하는 url만 받겠다는 어노테이션 예시처럼

                                       ajax/ajaxController로 ajax로 보냈으니 거기에 해당하는 놈이 받는다는 뜻

@RequestBody : 값이 View로 가는 게 아니라 HTTP Response Body로 직접 쓰임 ajax로 데이터 받을 땐 필수

jquery ajax 문법 옵션 정리

url (필수) : 서버(Server)로 보낼 URL

url : "/ajax/ajaxController"

data (선택) : 서버(Server)로 보낼 데이터

//일반
data : { type1 : type1, 
    	 type2 : type2 }
          
//JSON 데이터로 보내기
data : JSON.stringify({ 
	  type1 : type1, 
    	  type2 : type2})

dataType (선택) 종류 : 통신의 결과로 넘어올 데이터의 종류를 지정

dataType : "json" - JSON 형식의 데이터로 배열,객체를 포함하는 문자열(권장)

dataType : "text" - 일반적인 문자열

dataType : "html" - HTML을 포함한 문자열

dataType : "script" - 새로운 스크립트

dataType : "jsonp" - 다른 도메인으로 부터 전송되는 JSON 데이터

dataType : "xml" -  XML 형식의 데이터

기본 값 : MIME 유형

type (선택) 종류 : GET, POST , DELETE , PUT 통신 방식 지정

type : 'GET' - GET 방식으로 서버(Server)에 전송 [조회]

type : 'POST' - POST 방식으로 서버(Server)에 전송 [생성]

type : 'DELETE' - DELETE 방식으로 서버(Server)에 전송 [삭제]

type : 'PUT' - PUT 방식으로 서버(Server)에 전송 [갱신]

기본 값 : 'GET'

timeout (선택) : 1000 - 요청에 대한 응답 제한 시간으로 단위는 millisecond 

timeout : 1000 ( 단위 : millisecond ) 즉, 1000당 1초 

contentType (선택) :  - 서버에 데이터를 보낼 때 형식을 지정

contentType : "application/json" - 서버에 데이터를 보낼 때 형식을 JSON 형식으로 보냄

기본 값 : "application/x-www-form-urlencoded"

beforeSend (선택) : function() {}, - HTTP 요청 전에 발생하는 이벤트 핸들러

beforeSend : function() {
	alert("ajax 호출 시작 시 실행");
}

success (선택) : function(data) {}, - HTTP 요청 성공 시 이벤트 핸들러

success : function(data) {
	alert(data);
}

data : 서버에서 응답한 return 값

error (선택) : function(request, status, error) {}, - HTTP 요청 실패 시 이벤트 핸들러

error : function(request,status,error) {
	
}

request : 
status : HTTP 상태 코드
error : 에러 메시지

complete (선택) : function() {} -  HTTP 요청 완료 시 이벤트 핸들러 (success는 요청 성공 시 , complete는 요청 완료 시)

complete : function() {
	alert("ajax 호출 완료 시 실행");
}

개념

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 JavaScript 라이브러리 중 하나이며,

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술

출처 : 위키백과

저 말중에 비동기적인 웹 애플리케이션 제작 이란 말이 눈에 들어온다

웹 애플리케이션 제작은 알겠는데 비동기? 동기?

비동기와 동기의 개념과 차이점

동기(synchronous)

말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속입니다.

바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다.

비동기(Asynchronous)

동시에 일어나지 않는다는 뜻입니다. 요청과 결과가 동시에 일어나지 않을 거라는 약속입니다. 

사용 이유

페이지 새로고침 없이 데이터 전환/변경

동작 방식

1. XMLHttpRequest Object 생성

2. callback function 생성

3. Java (Server) request

4. JSP,JavaScript (Client) response 

장점

1.데이터 전환/변경이 필요한 부분만 새로고침 하여 부하를 덜어줌으로써 속도가 향상된다.

단점

1.Internet Explorer 일부 버전에선 문제가 있어 별도의 설정을 해야 한다.

2. 히스토리가 남지 않는다.

3. 비동기 방식의 무차별 요구로 인한 서버 다운

비동기적인 웹 애플리케이션 제작

동기 : Client(request) -> Server(response) 이처럼 동기 방식의 웹을  

비동기 : Client(request)  Client(request) -> Server(response) -> Client(request) -> Server(response) -> Server(response)

이렇게 비동기식으로 요청하는 개발 기법을 말한다.

한 줄 정리 

비동기 : 요청 요청 응답 요청 응답 응답

동기 : 요청 응답 요청 응답 요청 응답

문법은 다음 시간에..