Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS
06. 미니프로젝트-2W

08. SpringFramework , SrpingBoot (v)
09. React JS [Front-end]
10. 중간프로젝트 (1M)
11. Linux 명령어
12. AWS 클라우드
13. DevOps - Docker
14. App - Android
15. 최종프로젝트 (1M)

스프링 부트

Fetch

    var apiGet = document.getElementById("apiGet");
    var apiInfo = document.getElementById("apiInfo");

    apiGet.onclick=function(){
        fetch("api/v1/getData?num=10&name=홍길동")
        .then(function(response){
            return response.json();
        }).then(function(data){
            console.log(data);
        })
    }

    apiInfo.onclick=function(){
        fetch("api/v1/getInfo",{
            method : "post",
            headers:{
                "Content-Type":"application/json"
            },
            body:JSON.stringify({
                num : 10,
                name : '홍길동'
            })
        }).then(function(response){
            return response.json();
        }).then(function(data){
            console.log(data);
        })
    }

SOP(Same-Origin Policy)

동일 출처 정책
동일한 출처에서만 리소스를 공유할 수 있음
Origin : Protocol + Host + Port
프로토콜(ex:http://), 호스트(ex:www.domain.com) , 포트(:3000)이 3가지만 동일하면 동일출처로 판단

교차 출처 리소스 공유 정책
다른 출처의 리소스 공유에 대한 허용/비허용 정책
브라우저의 CORS 기본동작

1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달

기본적으로 웹은 Http프로토콜을 이용해 서버에 요청을 보냄

이떄 브라우저는 요청 헤더에 Origin이라는 필드에 출처를 함께 담아 보냄

2. 서버는 응답헤더에 Access-Controll-ALlow-Origin을 담아 클라이언트로 전달

이후 서버가 이 요청에 대한 응답을 할 때 응답 헤더에 Access-Control-Allow-Origin이라는 필드를 추가하고 값으로 이 리소스를 접급하는 것이 허용된 출처 url을 내려보냄

3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교

이후 응답을 받은 브라우저는 자신이 보넀던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교한 후 차단할지 결정

만약 유효하지 않다면 그 응답을 사용하지 않고 버림(CORS에러

결론 : + CORS에러는 서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 해결됨 @CrossOrigin("*") 태그 사용

REST 6원칙

1. Client-Server

client application과 server application은 반드시 서로간의 의존성 없이 개발되어야 함(client는 오직 URI만 알고있어야함)

이는 확장성을 구축하게 함(분산 서버 구축 - MSA방식)

2. Stateless

서버는 클라이언트가 요청한 HTTP request에 대해서 아무것도 저장해서는 안됨

만약 클라이언트 앱이 stateful application이라면, 요청을 보낼때마다 필요한 정보들을 포함해야함

3. Cacheable

캐싱은 성능향상과 server에 대한 확장성을 증가시키 때문에 데이터나 응답을 가능하다면 캐싱함

캐싱가능한 리소스들은 Cacheable이라고 명시해야 함

캐싱은 server또는 client에서 구현될 수 있음 ex) HTTP Header의 cache-control

4. Uniform Interface

자원들에 대한 api 인터페이스를 결정하고 그것을 충실히 따라야 함

자원은 오직 하나의 논리적 URI를 가져야하고, 관련된 또는 추가적인 데이터를 fetch할 방법을 제공해야 함

모든 자원들은 HTTP GET과 같은 흔한 접근방법으로 일정하게 접근될 수 있어야 함

5. Layered System

계층형 시스템 스타일을 사용하면, 각 구성요소가 상호작용하는 직계 계층 너머를 볼 수 없도록 구성 요소 동작을 제한(캡슐화)하여 아키텍쳐를 계층적으로 구성해야 함

REST는 layered system architecture를 허용하는데, 클라이언트는 end server에 연결되었는지 매게체에 연결되었는지 알 수 없음

6. Code on demand(optional)

대부분은 XML이나 JSON형태로 리소스들에 대한 정적인 표현으로 응답하게 되지만, application의 일부를 지원하기 위해 executable code를 보낼 수 있음 ex) 서버로 부터 받은 javaScript파일을 브라우저에서 실행 가능

Jquery

자바스크립트를 더 간편하게 사용하게 해주는 자바스크립트 라이브러리
태그를 선택자로 한번에 선택하는 강력한 방법 제공
선택자로 선택한 태그를 제어하는 강력한 기능 제공

제이쿼리 선택자

$("#태그 아이디")

$(".태그 클래스")

$("요소[속성=값]") ex) $("a[href=#]")

$(this)

값 확인
태그의 값 확인 : $(선택자).val()

태그의 값 변경 : $(선택자).val(변경값)
$("#apple").val("hello world"); // 값 변경
var result = $("#apple").val(); // 값 얻음

문서 객체 조작
태그의 속성 여부 확인 : $(선택자).attr(속성)

태그의 내부 속성 변경 : $(선택자).attr(속성,변경값)

여러 값 변경 : $(선택자).attr({속성:값, 속성: 값, ...})

특정 값 확인 : $(선택자).css("속성")

특정 값 변경 : $(선택자).css("속성","변경값")

여러 값 변경 : $(선택자).css({속성:값,속성:값 ,.....})
$(".demo1").attr({"src":"img/1.jpg","width":200,"alt":"이미지"});
var result = $(".demo1").attr("src");
console.log(result);

$(".demo2").attr("src","img/2.jpg");
$(".demo2").attr("width",300);
$(".demo2").attr("alt","이미지");
$(".demo > li").css("backgroundColor","red");

var result = $(".demo > li").css("backgroundColor");
console.log(result);
// 한번에 여러디자인 넣기
$(".box").css({display:"inline-block",border:"1px solid #777", height:"100px",width:"100px",backgroundColor:"blue"})

문자 조작
선택자의 값 확인 : $(선택자).html()

선택자의 값 변경 : $(선택자).html("값")

선택자의 값 순수 텍스트로 변경 : $(선택자).html("html코드") ex) $(선택자).html("<h3>텍스트</h3>")
$(".demo").html("<a href='#'>생성된 a태그</a>") // innerHTML대체
            
var result = $(".demo").html(); // innerHTML로 값 얻기

console.log(result);
// 순수한 문자열 형태로 삽입
$(".demo-text").text("<a href='#'>생성된 b태그</a>") 

클래스 조작
선택자에 클래스 추가 : $(선택자).addClass("클래스명")

선택자에 클래스 삭제 : $(선택자).removeClass("클래스명")

선택자에 클래스 토글형식 변환 : $(선택자).toggleClass("클래스명")
$("#btn").addClass("active"); // 클래스 추가하기
if($("#btn").hasClass("active")){ // 있으면 true, 없으면 false
        console.log("active클래스가 존재함");
}
$("#btn").removeClass("active");
// 제이쿼리 이벤트 $(선택자).함수()
$("#btn").click(function(){
    // 이벤트가 동작한 태그 -> 제이쿼리 접근
    $(event.target).toggleClass("active");
})

이웃, 형제 노드 조작

선택자의 최근접 단일부모 탐색 : $(선택자).closest("클래스명")

선택자의 자식요소 탐색 : $(선택자).childeren()

선택자의 첫번째 자식요소 : $(선택자).first()

선택자의 특정 자식요소 탐색 : $(선택자).find("클래스명")

선택자의 다음 형제노드 : $(선택자).next()

선택자의 이전 형제노드 : $(선택자).prev()

제이쿼리 이벤트 함수
페이지 로딩 시 스크립트 실행 : $(document).ready(function(){......})

클릭시 소괄호 안에 익명함수 실행 : $(선택자).click(function(){.....})

이벤트 위임 함수 : $(선택자).on(이벤트, 선택자[없어도 됨],function(){.........})
$("#btn").click(function(){
    console.log("클릭이벤트!");
})
$("#sel").change(function(){
    console.log("체인지이벤트");
})
$("#box").mouseenter(function(){
    console.log("마우스 진입함");
})
$("#box").mouseleave(function(){
    console.log("마우스 떠남");
})
//이벤트 체이닝
$("#tag").on("mouseenter",function(){
    console.log("마우스 진입");
}).on("mouseleave",function(){
    console.log("마우스 떠남");
})

Ajax함수

$.ajax({......})

$("#getAjax").click(function(){
    $.ajax({
        type : "get",
        url : "http://localhost:8181/api/v1/getData?num=10&name=홍길동",
        success:function(data){ // 요청 성공시 실행할 콜백
            console.log(data.mno);
        },
        error:function(err,status){ // 에러시에 동작하는 콜백
            console.log(err,state);
        }
    })
})
$("#postAjax").click(function(){
    $.ajax({
        type:"post",
        url:"http://localhost:8181/api/v1/getInfo",
        data:JSON.stringify({
            num:10,
            name:"홍길동"
        }),
        contentType:"application/json",
        success:function(data){
            console.log(data);
        },
        error:function(err,status){
            console.log(err,status);
        }
    })
})

Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

스프링 부트

Fetch

SOP(Same-Origin Policy)

CORS(Cross-Origin Resource Sharing)

1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달

2. 서버는 응답헤더에 Access-Controll-ALlow-Origin을 담아 클라이언트로 전달

3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교

REST 6원칙

1. Client-Server

2. Stateless

3. Cacheable

4. Uniform Interface

5. Layered System

6. Code on demand(optional)

Jquery

제이쿼리 선택자

값 확인

문서 객체 조작

문자 조작

클래스 조작

이웃, 형제 노드 조작

제이쿼리 이벤트 함수

Ajax함수

2. 서버는 응답헤더에 `Access-Controll-ALlow-Origin`을 담아 클라이언트로 전달