CSS선택자
태그선택자
<h1></h1>
h1{ }
클래스 선택자
<h1 class ="title">
.title{ }
아이디 선택자
<h1 id="title">
#title{ }
HTML에는...
window
-document
-write
document.write("<h1></h1>")
자바에서는
main()->exe파일->실행->로컬프로그램
system.out.println("룰루");--->PC
내컴퓨터에서만 실행이 된다.
클라우드 프로그래밍을 해야한다.
로컬에만 머무르면 안된다.
브라우저에서 실행을 해야한다.
웹 혁명 2.0이다.
-효율적이다. 퍼포먼스중요하다.
브라우저->브라우저객체 API->폰에 내장이 되어있다.
자바를 브라우저에서 쓰려면
JSP문법이 필요하다.
통신-프로토콜이 필요-http, https
프론트앤드 개발은 즉, 브라우저에 쓰기이다.
브라우저는 인터프리터이다.
해석을 해주는 역할을 하고있다.
출력을 원하면 body태그 안에 작성을 해야된다.
document.write는 다 body안에 작성이 된다.
API=application programming interface
api를 잘보는 사람이 코딩을 잘 하는 사람이다.
URL안에 프로토콜이 들어간다.
비상태이다.
상태가 유지되지 않는다.
브라우저는 정적 페이지를 처리한다.
html, css, javascript
개인 pc에 다운로드가 된다. 브라우저의 연결주체는 클라이언트이다. 요청할때만 연결됐다가 끊어진다. 비상태이다.
-시점의 문제
-동기화의 문제
-유지의 문제
-비상태프로토콜이기때문에 상태를 관리해야한다.
-데이터가 자꾸 변한다.
클라이언트 사이드 렌더링---->출력
서버사이드 렌더링--->의사결정(리액트)
-동기-계속변하는 갭
-그걸 메꿔주는것이 쿠키와 세션
쿠키 : String-PC 로컬쪽
세션 : 캐시메모리-서버쪽
상태관리를 잘 하는 개발자가 굿이다.
프로토콜
프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 합니다.
HTTP 개요
HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다.
클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부릅니다.
HTTP는 클라이언트-서버 프로토콜입니다. 요청은 하나의 개체, 사용자 에이전트(또는 그것을 대신하는 프록시)에 의해 전송됩니다. 대부분의 경우, 사용자 에이전트는 브라우저지만, 무엇이든 될 수 있습니다. 예를 들어, 검색 엔진 인덱스를 채워넣고 유지하기 위해 웹을 돌아다니는 로봇이 그러한 경우입니다.
각각의 개별적인 요청들은 서버로 보내지며, 서버는 요청을 처리하고 response라고 불리는 응답을 제공합니다. 이 요청과 응답 사이에는 여러 개체들이 있는데, 예를 들면 다양한 작업을 수행하는 게이트웨이 또는 캐시 역할을 하는 프록시 등이 있습니다.
출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/Overview
쿠키와 세션을 사용하는 이유?
HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다.
HTTP 프로토콜의 특징
1. Connectionless 프로토콜 (비연결 지향)
클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다.
- HTTP 1.1 버전에서 커넥션을 계속 유지하고, 요청(Request)에 재활용하는 기능이 추가되었다. (HTTP Header)에 keep-alive 옵션을 주어 커넥션을 재활용하게 한다. HTTP 1.1 버전에선 디폴트(default) 옵션이다.
- HTTP가 TCP위에서 구현되었기 때문에(TCP : 연결 지향, UDP : 비연결 지향) 연결 지향적이라고 할 수 있다는 얘기가 있어 논란이 있지만, 아직까진 네트워크 관점에서 keep-alive는 옵션으로 두고, 서버 측에서 비연결 지향적인 특성으로 커넥션 관리에 대한 비용을 줄이는 것이 명확한 장점으로 보기 때문에 비연결 지향으로 알아두었다.
2. Stateless 프로토콜(비상태)
커넥션을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.
- 클라이언트와 첫 번째 통신에서 데이터를 주고받았다 해도, 두 번째 통신에서 이전 데이터를 유지하지 않는다.
- 하지만, 실제로는 데이터 유지가 필요한 경우가 많다.
정보가 유지되지 않으면, 매번 페이지를 이동할 때마다 로그인을 다시 하거나,
상품을 선택했는데 구매 페이지에서 선택한 상품의 정보가 없거나 하는 등의 일이 발생할 수 있다.(장바구니 안됨)
→ 따라서, Stateful 경우를 대처하기 위해 쿠키와 세션을 사용한다.
쿠키와 세션의 차이점은 크게 상태 정보의 저장 위치이다.
쿠키는 '클라이언트(=로컬 PC)'에 저장하고, 세션은 '서버'에 저장한다.
서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다.
따라서 서버는 클라이언트가 누구인지 계속 인증을 해줘야 한다. 하지만 그것은 매우 귀찮고 번거로운 일이다.
그런 번거로움을 해결하는 방법이 바로 쿠키와 세션이다.
쿠키(Cookie)
HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우,
그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.
HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다.
- 쿠키 특징
- 이름, 값, 만료일(저장기간), 경로 정보로 구성되어 있다.
- 클라이언트에 총 300개의 쿠키를 저장할 수 있다.
- 하나의 도메인 당 20개의 쿠키를 가질 수 있다.
- 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다.
- 쿠키의 동작 순서
- 클라이언트가 페이지를 요청한다. (사용자가 웹사이트에 접근)
- 웹 서버는 쿠키를 생성한다.
- 생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때, 같이 클라이언트에게 돌려준다.
- 넘겨받은 쿠키는 클라이언트가 가지고 있다가(로컬 PC에 저장) 다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다.
- 동일 사이트 재방문 시 클라이언트의 PC에 해당 쿠키가 있는 경우, 요청 페이지와 함께 쿠키를 전송한다.
세션(Session)
일정 시간 동안 같은 사용자(브라우저)로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 유지시키는 기술이다.
여기서 일정 시간은 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점부터 웹 브라우저를 종료하여 연결을 끝내는 시점을 말한다.
즉, 방문자가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 그것을 세션이라고 한다.
- 세션 특징
- 웹 서버에 웹 컨테이너의 상태를 유지하기 위한 정보를 저장한다.
- 웹 서버의 저장되는 쿠키(=세션 쿠키)
- 브라우저를 닫거나, 서버에서 세션을 삭제했을 때만 삭제가 되므로, 쿠키보다 비교적 보안이 좋다.
- 저장 데이터에 제한이 없다. (서버 용량이 허용하는 한에서)
- 각 클라이언트에 고유 Session ID를 부여한다. Session ID로 클라이언트를 구분해 각 요구에 맞는 서비스를 제공
출처 : https://dev-coco.tistory.com/61#%EC%BF%A-%ED%--%A--Cookie-
html
-id, class, tsg name
css
-선택자
JS
document.getElementByld("id")
document.querySelector()->배열아님->객체
document.querySelectorAll()--->자동으로 배열 나타냄
함수형 프로그래밍이 트렌드이다.
핑크 둘이 트렌드
{ }-객체
[ ]-배열
일급객체
일급함수
함수프로그래밍-문법
OOP(상하관계)
-AOP(수평관계)에 대한 보완적인 부분
-공통된 관심사를 분리해줌(로그, 인증, 커밋, 롤백)
-이런것들을 AOP가 일괄처리해준다.(변수를 사용해서)
- 관점 지향 프로그래밍(AOP, Aspect-Oriented Programming)
- 트랜잭션이나 로깅, 보안과 같이 여러 모듈에서 공통적으로 사용하는 기능의 경우 해당 기능을 분리하여 관리할 수 있다.
html(화면)-css(색상, 위치, 일괄처리)-js(이벤트)
공통점
정적이다.
선택자도 넓은 의미의 변수이다.
일괄적으로 디자인주니까
JS
defer 명심하기!!!
defer가 왜 필요한가?
html이 먼저 렌더링(브라우저) 되어야 하니까.
화면 다 나오고나서 움직임이 감지되어야 하니까.
eventListener
MouseListener
등등
html
-header
-body
--span
--h1
--div
--nav
브라우저안에 객체들이 내장되어있다.
api들이 들어있다.
block, inline->display
배치-position->relative(있으나 마나)
absolute,레이어, z-index
애니메이션
/* 인라인 요소는 기본적으로 가운데 정렬이 되고
만일 block요소를 주면 기본적으로 왼쪽정렬이 됨
이것을 가운데 오게 할때에는 margin에 auto를 줌 */
인라인 요소를 블록요소로 바꿔야지 사이즈 색깔 등등을 지정해줄수있음
display : block;
으로 블록요소로 바꿔줌
프로필 만들기
XX부트캠프
Back-End Developer
VIEW MORE- Visit My Facebook page.
- dodohee1504@gmail.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT사관학교</title>
<script
src="https://kit.fontawesome.com/15ade8f86a.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="연습.css">
</head>
<body class="member1">
<section class="wrap">
<!-- ==============[첫번째 헤더 start]=========-->
<nav class="menu">
<a href="#">
<i class="fas fa-bars"></i>
</a>
<a href="#">
<i class="fas fa-sticky-note"></i>
</a>
</nav>
<!-- ==============[첫번째 헤더 end]=========-->
<!-- ==============[profile start]=========== -->
<article class="profile">
<img src="../images/sample/woman2.png" alt="김도희">
<h1>XX부트캠프</h1>
<p>Back-End Developer</p>
<a href="https://newstartjoah.tistory.com/" class="detailBtn">VIEW MORE</a>
</article>
<!-- =============[profile end] ==============-->
<ul class="contact">
<li>
<i class ="fab fa-facebook-f"></i>
<span>Visit My Facebook page.</span>
</li>
<li>
<i class="fa-solid fa-envelope"></i>
<span>dodohee1504@gmail.com</span>
</li>
</ul>
<nav class="others">
<!-- a[herf="member$.html"]*4 -->
<a href="http://192.168.10.68:5500/week2/13.table%ED%83%9C%EA%B7%B8/member.html"></a>
<a href="http://192.168.10.71:5500/%EB%94%94%EC%9E%90%EC%9D%B83/member1.html"></a>
<a href="http://192.168.10.72:5500/dev_html/%EB%94%94%EC%9E%90%EC%9D%B83/member1.html"></a>
<a href="http://192.168.10.78:5500/html0116/weak3/sample/lecture.html"></a>
</nav>
</section>
</body>
</html>* {
margin: 0; /* 1.4면에 대한 외부여백은 0 */
padding: 0; /* 4면에 대한 내부여백은 0 */
box-sizing: border-box; /* 3:여백으로 포함한 크기계산 */
/* border: 1px solid red; 4.: 여백부분, 스타일을 죽인 부분 */
}
ul {
list-style: none; /* 5 : 구슬 제거목적 */
}
a {
text-decoration: none; /* 6:텍스트 밑줄 제거 */
}
body {
background-color: antiquewhite; /* 7 : 전체문서에 배경색 */
}
/* section태그로 전체를 감쌈 */
.wrap {
width: 340px; /* 가로크기 */
padding: 30px; /* 내부여백크기 */
background-color: aliceblue /* 배경 색상 */;
position: absolute; /* 좌표값에 따른 배치 */
top: 50%; /* y축 중앙 배치-주의 요소의 왼쪽 상단 모서리의 위치 */
left: 50%; /* 13 : x축 중앙배치 */
transform: translate(-50%, -50%); /* 14:요소의 중앙 위치를 잡음 */
}
.warp .menu a {
font-size: 20px;
color: chocolate;
}
/* float속성을 주면 부모가 감싸주던 값이 0 으로 되어 아이콘을 감싸주지 못함
가상 선택자를 선언하여 문제해결 */
.wrap .menu a:nth-of-type(1) {
float: left;
}
.wrap .menu a:nth-of-type(2) {
float: right;
}
.wrap .menu::after {
/* ::두번써줘야한다? */
content: "";
display: block;
clear: both;
}
.wrap .profile {
text-align: center;
width: 100%;
}
.wrap .contact {
margin-bottom: 20px;
text-align: center;
}
.wrap .contact li {
width: 100%;
padding: 10px 0px;
border-bottom: 1px solid gray;
}
.wrap .contact li i {
width: 20%;
text-align: center;
color: brown;
}
.wrap .contact li span {
font: 12px/1 "obitron";
color: black;
letter-spacing: 1px; /* 글자간격 */
}
.wrap .profile img {
/* 이미지일때는 . 찍으면 안된다. */
width: 200px;
height: 200px;
border-radius: 50%; /* 원으로 */
margin-top: 10px;
margin-bottom: 20px;
}
.wrap .profile h1 {
color: rgb(191, 46, 186);
font: bold 22px/1 "arial";
margin-bottom: 5px;
}
.wrap .profile p {
font: bold 12px/1 "arial";
color: rgb(205, 63, 63);
margin-bottom: 25px;
}
/* a태그(인라인요소)를 CSS를 활용해서 버튼으로 바꿔보기
블록요소로 바꿔서 가로세로 크기를 주고 폰트크기 border-ridius를 사용해서 버튼처럼 보이게 */
.wrap .profile .detailBtn {
display: block; /* 블로요소로 바꿔서 사이즈 등등 조정 */
width: 180px;
height: 32px;
margin: 0px auto 20px; /* 시계방향 - top,bottom 0 auto-양옆 */
font: bold 12px/30px "arial";
background-color: rgb(51, 216, 245);
color: black;
text-shadow: 2px 2px 3px rgb(255, 255, 255);
border-radius: 16px;
}
.wrap .others{
text-align: center;
font-size: 0;
}
/* a태그는 크기가 없다. 인라인요소이다. */
.wrap .others a {
display: inline-block;
width: 30px;
height: 30px;
background-color: gray;
margin: 0px 10px; /* 위아래 0 양옆 10px */
border-radius: 50%;
}
.wrap .others a:nth-of-type(1){
/* 임의 순서 붙여주기 위한 가상클래스 부모의 n번째 자식을 선택 */
background-color: aquamarine;
}
.wrap .others a:nth-of-type(2){
background-color: rgb(217, 255, 127);
}
.wrap .others a:nth-of-type(3){
background-color: rgb(165, 127, 255);
}
.wrap .others a:nth-of-type(4){
background-color: rgb(255, 127, 206);
}
/* 인라인 요소는 기본적으로 가운데 정렬이 되고
만일 block요소를 주면 기본적으로 왼쪽정렬이 됨
이것을 가운데 오게 할때에는 margin에 auto를 줌 */
REST란
출처 : https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html
[Network] REST란? REST API란? RESTful이란? - Heee's Development Blog
Step by step goes a long way.
gmlwjd9405.github.io
REST의 정의
“Representational State Transfer” 의 약자
자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.
즉, 자원(resource)의 표현(representation) 에 의한 상태 전달
1. 자원(resource)의 표현(representation)
자원: 해당 소프트웨어가 관리하는 모든 것
-> Ex) 문서, 그림, 데이터, 해당 소프트웨어 자체 등
자원의 표현: 그 자원을 표현하기 위한 이름
-> Ex) DB의 학생 정보가 자원일 때, ‘students’를 자원의 표현으로 정한다.
2. 상태(정보) 전달
데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달한다.
JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.
월드 와이드 웹(www)과 같은 분산(멀티 티어) 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식
REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일이다.
REST는 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이다.
REST의 구체적인 개념
HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.
즉, REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐를 의미한다.
웹 사이트의 이미지, 텍스트, DB 내용 등의 모든 자원에 고유한 ID인 HTTP URI를 부여한다.
CRUD Operation
Create : 생성(POST)
Read : 조회(GET)
Update : 수정(PUT)
Delete : 삭제(DELETE)
HEAD: header 정보 조회(HEAD)
INPUT->듣기(주체 톰캣)
인풋은 메소드 기준으로 파라미터이다.
자원을 갖고있는 것은? join.html
서버의 베이스에는 자바가 깔려있다.
그위에 servlet과 jsp가 있다.
여기까지가 백앤드이다.
JSP는 서블렛과 다르게 뷰까지도 같이 할 수있다.
JAVA-Servlet-JSP
가 있어야 웹 서비스를 제공할 수 있다.
자바로는 웹 서비스를 제공할 수 없다.
자바의 역할을 서블릿이 한다.
서블릿 안에는 http프로토콜의 api가 있다.
진입장벽이 높다... 낯설고 어려울수도?
서블릿이어야 http프로토콜을 누릴 수 있다. 여기있는 메소드나 필드를 호출 할 수 있다.
유일무이해야한다.
아이디는? 사람마다 다르다. 상태가 달라진다.
그때의 데이터를 상태라고 부른다.
상태를 관리하기위한것이 쿠키와 세션이다.
모든타입 모든 변수 다된다.
요청을 주고받는다(request)
받는것(response)
반환값(return)
mark up
상태를 전달할 수 있다.
웹기반으로 서비스를 제공하려면 JSON이 필요하다.
자바 스크립트도 제이슨을 판독할 수 있다.
List 나 Map을 제이슨에서 바로 쓸 수 있는것이 아니다.
구조분해할당 자바스크립트에서 한다.
List나 Map을 문자열로 바꿔야한다.
배열로 만들어 주는것이 parse()가 있다.
parse도 제이슨에 정의된 객체이다?
JSON.stringify() 메서드는
JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer 를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.
JSON.parse()란?
- parse 메소드는 string 객체를 json 객체로 변환시켜줍니다.
JSON.stringify란?
- stringify 메소드는 json 객체를 String 객체로 변환시켜 줍니다.
서버가 분산 되어있다.
하이퍼미디어시스템
유투브같이 영상도 서비스하고 등등 많이하는거...
자바가 인터프리터해서 웹서버로 전달하는데 Json이 필요하다.
body에 전달 - 포스트
REST의 장단점
장점
HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해준다.
HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.-->모든 장치에서 다 사용가능. 범용성
Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
여러가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
서버와 클라이언트의 역할을 명확하게 분리한다.
단점
-일단 잊으세요. 장점 잘 알고 단점 알기
표준이 존재하지 않는다.
사용할 수 있는 메소드가 4가지 밖에 없다.
HTTP Method 형태가 제한적이다.
브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 값이 왠지 더 어렵게 느껴진다.
구형 브라우저가 아직 제대로 지원해주지 못하는 부분이 존재한다.
PUT, DELETE를 사용하지 못하는 점
pushState를 지원하지 않는 점
Stateless(무상태)
HTTP 프로토콜은 Stateless Protocol이므로 REST 역시 무상태성을 갖는다.
Client의 context를 Server에 저장하지 않는다.
즉, 세션과 쿠키와 같은 context 정보를 신경쓰지 않아도 되므로 구현이 단순해진다.
Cacheable(캐시 처리 가능)
웹 표준 HTTP 프로토콜을 그대로 사용하므로 웹에서 사용하는 기존의 인프라를 그대로 활용할 수 있다.
즉, HTTP가 가진 가장 강력한 특징 중 하나인 캐싱 기능을 적용할 수 있다.
HTTP 프로토콜 표준에서 사용하는 Last-Modified 태그나 E-Tag를 이용하면 캐싱 구현이 가능하다.
대량의 요청을 효율적으로 처리하기 위해 캐시가 요구된다.
캐시 사용을 통해 응답시간이 빨라지고 REST Server 트랜잭션이 발생하지 않기 때문에 전체 응답시간, 성능, 서버의 자원 이용률을 향상시킬 수 있다.
RESTful이란
RESTful은 일반적으로 REST라는 아키텍처를 구현하는 웹 서비스를 나타내기 위해 사용되는 용어이다.
‘REST API’를 제공하는 웹 서비스를 ‘RESTful’하다고 할 수 있다.
Fetch API
Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.
기본 개념과 사용 방법
Fetch에는 일반적인 오브젝트로로 Request 와 Response (en-US)가 포함되어 있습니다. 이것들은 service worker이나 Cache API같이 Response와 Request객체를 다루는 API나 독자적으로 리스폰스를 발생시키는 경우에도 사용 가능합니다.
또한 CORS나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어있는 갖가지 행동에대한 정의들을 한곳에 고쳐 쓴 것입니다.
Fetch API로 리소스를 취득하기 위해서 GlobalFetch.fetch (en-US) 메소드를 불러들여야 합니다. 이 메소드는 Window나 WorkerGlobalScope (en-US)와 같은 인터페이스로부터 구현되었습니다.
비동기 통신권장
1. ajax기술-XMLHttpRequest객체-비동기 통신객체
비동기 처리 권장(대부분 업무 적용됨)사항
jquery호황이던 시절에 사용됨
0-> 1-> 2-> 3(요청에대한 응답 다운로드 중 ) ->(응답완료. 다운종료)
상태값의 변화를 추적하는 속성이나 함수 지원 - XMLHttpRequestAPI
상태값이 0에서 시작해서 4가 될때 지속적으로 체크를 하다가
완료되면 그 때 콜백함수를 호출하는 시스템
2. Fetch API-JavaScript(바닐라 스크립트)-순수-후짐, 세련되지못함
다른 이종간의 API를 사용, 라이브러리를 사용-> 연계(연동)->순수함 답임
<!-- Restful API에서 제공않는 메소드 중 하나 get방식
쿼리스트링을 통해 사용자가 입력한 값을 전달함
주소창에 모두 노출됨-보안에 취약함
쿼리스트링을 통해 넘길 수 있는 값에 한계가 있음-브라우저 마다 다름
단위 테스트 가능함
링크를 걸 수 있음-post방식은 불가함
action : 서버쪽으로 전달해서 아해 요청을 처리하는 페이지 URL작성함 -->
form태그 사용자가 입력한 정보를 전송
rest가 권장하는 get방식, post방식 전송가능
단, 전송을 위해서는 submit() 반드시 호출
get방식 요청은 주소창에 사용자가 입력한 정보가
표준은 바뀌면 안된다.
기본으로 get방식을 선택하고 있다.
그래도 method get 생략하지마라.
html파일에 jsp파일을 연결했다.
JSP (JavaServer Pages ) 란 무엇인가?
JSP 란 JavaServer Pages 의 약자이며
HTML 코드에 JAVA 코드를 넣어 동적웹페이지를 생성하는 웹어플리케이션 도구이다.
JSP 가 실행되면 자바 서블릿(Servlet) 으로 변환되며 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행하고
그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답한다.
자바 서블릿(Java Servlet)
서블릿이란 웹페이지를 동적으로 생성하기 위해 서버측 프로그램을 말한다.
이는 자바 언어를 기반으로 만들지며 웹 어플리케이션 서버 ( Web Application Sever ) 위에서 컴파일 되고 동작한다.
톰캣이란(Tomcat)?
톰캣은 아파치 소프트웨어 재단의 웹 어플리케이션 서버(와스)로서,
자바 서블릿을 실행키고 JSP코드가 포함되어 있는 웹 페이지를 만들어준다.
자바 서블랫과 JSP 규격의 '참조용 구현'으로 평가되고 있는 톰캣은, 개발자들의 개방적 협력 작업의 산물로 바이너리 버전과 소스코드 버전 둘 모두를 아파치 웹 사이트에서 얻을 수 있다.
즉, 톰캣은 웹 서버에서 넘어온 동적인 페이지를 읽어들여 프로그램을 실행하고 그 결과를 다시 html로 재구성하여 아파치에게 되돌려 준다.
톰캣은 자체적으로 보유하고 있는 내부 웹 서버와 함께 독립적으로 사용될 수도 있지만 아파치나 넷스케이프 엔터프라이즈 서버, IIS등 다른 웹서버와 함께 사용될 수도 있다. 톰캣을 실행시키기 위해서는 JRE 1.1이상에 부합되는 자바 런타임 환경이 필요하다.
get방식은 보안에 취약하다.
모니터에 요청
브라우저 요청-->Tomcat 서버쪽에서 저장이 되어있는것
다운로드 받아온다. 클라이언트가
브라우저가 번역한다.
화면에 랜더링 한다.
클라이언트 사이드 랜더링이다.
톰캣 안에서 화면이 다 만들어져 있는것이다.
그 결정된 화면이 나간다.
그것이 서버사이드 랜더링이다.
결정되있는것 중에는 데이터도 포함되어있다.
html코드에 자바가 프린트를 해준다.
자바는 자바인데 servlet이다.
왜 서블릿이여야하나?
http프로토콜을 지원해주는 API가 있다.
그 api의 핵심은 요청객체와 응답객체이다.
그것을 지원하는것이 Sevlet이다.
화면을 심는다.
결국 클라이언트쪽에 다운로드가 일어난다.
defer쓰는 이유
해커뉴스에서 해쉬태그 사용하기
Postman이란?
브라우저 없이도 요청과 응답을 보여주는 프로그램
URL로 요청을 넣었다.
Pretty 하게 JSON형식으로 보여준다.
요청에 대한 응답을 코드로 보여준다.(파란 블록 부분)
Hash?
해쉬가 뭐지?
Hash 체인지 이벤트는 같은값에서 #만 바뀌었을때만 페이지가 전환이 된다.
var requestOptions = {
method: "GET",
redirect: "follow",
};
var requestOptions2 = {
method: "GET",
redirect: "follow",
};
const NEWSURL = "https://api.hnpwa.com/v0/news/1.json";
const CONTENTURL = "https://api.hnpwa.com/v0/item/@id.json"; /* 변수로 치환함 */
// 제목을 클릭했을때 보여줄 다중 댓글을 출력하기 위한 div태그 선언
const content = document.createElement("div");
window.addEventListener("hashchange", () => {
const id = this.location.hash.substr(1); /* substr : #떼주는친구 */
fetch(CONTENTURL.replace("@id", id), requestOptions2) /* 변수로 바꿈 */
.then((response) => response.json()) /*json으로 바꾸기 */
.then((result) => {
//<div><h1>제목1</h1><h1>제목2</h1><h1>제목3</h1></div>
const title = this.document.createElement("h1");
title.innerHTML = result.title;
//13 번에서 생성한 div태그에 넣기
content.appendChild(title);
})
.catch((error) => console.log("error", error));
});
fetch(NEWSURL, requestOptions)
.then((response) => response.json())
// .then((result) => console.log(result))
.then((result) => {
const news = result;
const ul = document.createElement("ul");
for (let i = 0; i < 10; i++) {
const div = document.createElement("div");
div.innerHTML = `
<li>
<a href='#${news[i].id}'>
${news[i].title}('350')
</a>
</li>
`;
ul.appendChild(div.firstElementChild);
}
document.getElementById("root").appendChild(ul);
document.getElementById("root").appendChild(content);
})
.catch((error) => console.log("error", error));
json형식으로 예쁘게 보여주는것이다.
그냥 텍스트 형식은 형식이 없어서 보기 불편하기때문이다.
제목을 가져왔다.
'학원수업 > 1월' 카테고리의 다른 글
| 01/30 44회차 수업 HTML, CSS, JS (1) | 2023.01.30 |
|---|---|
| 01/27 국비학원 43회차 JavaScript수업 (DOM모델, This ) (1) | 2023.01.27 |
| 01/26 국비학원 42회차수업 JavaScript (호이스팅, 함수, css) (1) | 2023.01.26 |
| 01/25 국비학원 41회차 JavaScript수업 (nodemon사용하기, 스프레드 연산자) (0) | 2023.01.25 |
| 01/20 국비학원 40회차 수업 MyBatist, Tomcat, Gson (0) | 2023.01.22 |
댓글