클라이언트 <------------------> 서버
예를 들어, 클라이언트 아이피 주소를 111.111.111.111 포트 번호를 111번이고, 서버의 아이피 주소는 222.222.222.222 포트 번호를 80번이라고 가정하자.
이때, 클라이언트는 웹브라우저(크롬, 엣지)를 통해서 접속하기 때문에 클라이언트 포트 번호 111번에서 웹프라우저 프로그램이 실행되는 것이다.
＊포트 번호를 쓰는 이유 : 하나의 컴퓨터에서 실행 중인 N개의 프로그램을 구분하기 위해서 포트 번호마다 특정 프로그램이 실행됨
0. 클라이언트 웹브라우저에는 어떠한 html 혹은 자바 파일이 존재하지 않음. 모든 html css js Java 파일은 서버에 존재한다.
정적 컨텐츠 : html css(실행 결과가 항상 동일)
동적 컨텐츠 : js(실행 결과가 그때 그때 달라짐)
1. 클라이언트가 웹브라우저에 www.naver.com을 입력하는 순간
www.naver.com -> 222.222.222.222 서버의 아이피 주소로 변환이 된다. 해당 서버에 html 문서를 로딩해주라는 GET요청이 보내진다.
그럼 패킷이 생성되고 네트워크를 통해 서버 주소로 전달된다.
패킷에는 보내는 사람의 IP랑 포트, 받는 사람의 IP와 포트가 적혀 있다.
서버 측 포트 번호는
(http : 80, https : 443 ,로컬 호스트에서 테스트용 8080)
택배를 보내는 것과 유사함
2. 위의 GET 요청(request)이 서버의 아이피 주소를 찾아 도착하고 서버의 포트 번호에 맞게 도착한다.
3. WAS(웹 서버 ,자바의 경우 톰캣)가 해당 요청을 도착하면 인식한다.
4. 톰캣은 요청 URL에 맞는 html 파일을 body에 담아서 요청한 클라이언트로 전송(response)한다.
5. 웹브라우저는 서버에서 응답으로 온 body에서 html을 화면에 그린다.
6. 웹브라우저에서 해당 html에 적힌 자바스크립트 <script> 영역이 실행된다. ajax 요청이 있는 경우에 서버에 한 번 더 데이터를 달라고 요청을 한다.
*이때, 클라이언트에서 요청할 때 필요 시 GET요청의 경우에는 URL에 데이터를 담고, POST는 body에 데이터를 담는다.
GET : www.naver.com?id=3 혹은 www.naver.com/3
POST : body안에 json으로 { id : 3 }
request response 헤더에는 보내는 사람 받는 사람 IP 주소, 포트번호
Method(Get인지 Post인지 Put인지 Delete인지) 쿠키 정보 등등이 담김
JSON을 사용하는 이유 : 클라이언트와 서버는 서로 프로그래밍 언어가 다르기 때문에 이해할 수 없다. 그래서 클라이언트는 클라이언트에서 쓰는 프로그래밍 언어 -> json으로 변환 후 보내고 서버는 json -> 서버에서 쓰는 프로그래밍 언어로 변환한다. JSONObject 라이브러리 사용
7. 서버에서 받은 요청에 맞는 URL을 찾아가 서블릿(자바 코드)이 실행된다.
＊참고로 JSP에 존재하는 자바 코드도 서블릿이라고 생각하면 된다.
8. 요청 URL에 맞는 해당 서블릿이 실행된다. 해당 서블릿 내에 DAO 함수를 실행하여 통해 데이터베이스와 Connection이 연결되고 SQL을 수행한다.
9. DAO함수의 요청 결과를 return 받아서 케이스를 나눠서 처리한다.
예를 들면, 로그인이 성공하는 경우, 실패하는 경우 서버가 클라이언트에게 보내는 응답이 다르다. 일반적으로 헤더에 Response Code(응답코드)를 설정해서 보낸다. 흔히 사용하는 것이 404 에러 200 Ok 500 서버오류 등등
10. 서블릿에서 DAO결과 케이스에 맞게 Response 응답을 다르게 세팅 해준다. 데이터를 요청한 경우에 Body에 json 타입으로 변환 후 담아 보낸다.
11. 웹브라우저는 자바스크립트 ajax 요청의 결과로 response로 오는 결과를 읽는다.
12. body에 json 데이터가 존재하는 경우(게시글 불러오기 등) 자바스크립트에서 json 데이터에 맞게 html 태그의 텍스트 이미지 등 알맞게 넣어준다.
이러면 www.naver.com에 페이지가 로딩되고 안에 데이터까지 사용자에게 보인다.
------------------------------------------------
클라이언트 사이드 랜더링과 서버 사이드 랜더링 차이
클라이언트 사이드 랜더링
html css js는 클라이언트 측에서 데이터(게시글)를 로딩한다.
html css 먼저 불러오고, js로 한 번 더 요청해서 게시글 목록을 받음
서버사이드 랜더링
JSP는 클라이언트가 로딩하면 서버 측에서 자바 코드가 실행되고 JSP에 자바 변수에 설정된 데이터로 html에 값을 넣고 전부 다 세팅된 결과만 보내줌. 즉, 클라이언트 사이드 랜더링과 달리 js로 데이터를 달라고 재요청을 하지 않음
------------------------------------
쿠키와 세션의 차이
쿠키는 웹브라우저에 데이터를 Key : Value 형태로 저장하는 것임
(클라이언트 측에서 자바스크립트를 통해서 쿠키 값을 저장 or 조회 가능)
이때, 서버가 클라이언트에게 너의 웹브라우저에 이러한 쿠키를 저장하라고 지시할 수 있음(서버측에서 setCookie 후 응답해주는 경우)
즉, 클라이언트 측 웹브라우저에 데이터를 저장하는 방식으로 서버에는 데이터가 저장되지 않음
세션은 서버 측에서 데이터를 Key Value로 저장한다.
예를 들어 setAttribute(“userId” , “1234”) 세션에 값이 설정되면 로그인이 유지된 상태라고 볼 수 있다.
이때, 서버는 N명의 클라이언트 요청을 받고 로그인 상태를 유지하는데 유저 식별을 어떻게 하느냐?
세션에 값이 설정되면 response 응답에 setCookie(“세션ID”,“%AD3@E@EAD@Qdadw3”) 를 하라고 클라이언트에게 지시를 내린다.
그러면 클라이언트는 세션 ID를 웹브라우저에 저장해준다.
그리고 회원 정보 페이지를 로딩한다고 생각해보자.
html를 로딩하면서 동시에 위의 쿠키 정보를 담아서 서버에 보낸다.
그러면 서버는 1차적으로 쿠키에 담긴 세션ID로 먼저 식별을 하고
해당 세션ID로 세팅된 세션 값을 조회한다. getAttribute(“userId”)
데이터가 존재하면 로그인이 유지 중인 상태라고 보고 필요한 데이터를 클라이언트로 보낸다.(회원 정보 데이터)
클라이언트가 서버의 세션을 통해 발급받은 쿠키(세션 ID)를 통해 서버에서 인증이 이뤄지고 이 쿠키 정보를 통해서 서버는 N명의 사용자를 식별하는 것이다. 세션 ID를 통해서 N명의 로그인 상태가 전부 독립적으로 관리가 됨