개발환경 : 인텔리제이 / Springboot2 / maven

Spring boot2 Jsp css 안뜨던 문제 해결

• src는 무조건 resources > static 을 바라본다
• resources > static > css 폴더를 만들어서 거기에 넣어두면 해결된다
  
• 기존엔 이렇게 webapp > WEB-INF > jsp > resources 에 넣었기 때문에 css와 img 파일이 불러와지지 않았다.

• 위와같이 resources 안에 static 폴더를 만들어서 css,img,js 파일을 저장하면 잘 연동되는 것을 확인 할 수 있다.

OAuth2.0 (간편로그인) 이란?

• 구글, 네이버, 카카오 등에서 제공하는 간편로그인 기능도 OAuth2.0 프로토콜 기반이다.

• 구글 OAuth2.0은 아래 링크를 참고
  구글 OAuth2.0

• OAuth2.0 프로토콜에 관련해서는 아래 블로그에서 잘 정리되어있다.
  OAuth2.0에 관련된 설명

파라메터 (Model)

@Controller
public class TestController {

    @GetMapping
    @RequestMapping("/test")
        public String test(Model model, @RequestParam Map<String, String> param){
            String invite  = param.get("invite");
            String userid  = param.get("userid");
        String passwd  = param.get("passwd");

        model.addAllAttributes(param);


        //model.addAttribute("invite", invite);
        return "dir/test";
    }

    @GetMapping
    @RequestMapping("/test2")
    public String test2(){
        return "test";
    }

}

관련 참고할만한 내용 : Controller에서 view로 데이터 전송요청

GET POST 차이

출처 : [네트워크]get과 post의 차이

GET

• url?name=value&name2=value2 ~~ 이런 방식 (쿼리스트링 query string)

GET 특징

• 캐시 가능 / get으로 서버에 리소스를 요청할 떄 웹캐시가 요청을 가로채 서버로부터 리소스를 다운로드 하게 하는 대신 리소스 복사본을 반환함. HTTP헤더에서 cache-control 헤더를 통해 캐시 옵션 지정 가능
• 브라우저 히스토리에 남음 , 파라메터에 노출이 됨 --> 중요한 정보 다루면 안됨
• 길이 제한이 있음
• 데이터 요청 시에만 사용

POST

• 클라이언트에서 서버로 리소스 생성하거나 업데이트 하기 위해 데이터 보낼 때 사용
• HTTP 메시지를 body부분에 담아서 서버로 보냄 (body 타입은 Content-Type 헤더에 따라 결정)
• query string 부분이 body에 담겨서 보내짐
• 길이제한이 없음
• 큰 데이터 보낼때 or 데이터가 외부적으로 드러나지 않아야 할 때
• 암호화 안하면 결국 데이터를 볼 수 있는건 똑같다.

POST 특징

• 캐시되지 않는다.
• 브라우저 히스토리에 남지 않는다.
• 북마크 안됨
• 길이제한 없음

JavaScript Ajax?

비동기 자바스크립트와 XML(Asychronous JavaScript And XML)을 말함.
서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것
JSON,XML,HTML 일반 텍스트 형식 등 다양한 포맷을 주고 받을 수 있음.
페이지 전체를 리프레쉬 하지 않고 수행되는 "비동기성"이 강점

• 테이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행

JSON?

Javascript 객체 문법을 따르는 문자 기반 데이터 포맷
네트워크 통해 전송할때 유용
데이터에 엑세스 하기 위해서는 네이티브 json 객체로 변환할 필요 있음
문자열에서 네이티브 객체로 변환하는 것을 파싱Parsing 이라고 한다.
네트워크를 통해 전달할 수 있게 문자열로 변환 하는 것을 문자열화 Stringifcation 이라고 함
출처 : JSON으로 작업하기

Ajax를 활용한 로그인페이지

ajax 부분을 다음과 같이 코딩하고 jsp에 연결해둔다.

$ajax = {
    ajax: function (url, param, type, callBack, errCallBack) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () { // 요청에 대한 콜백함수
            if (xhr.readyState === xhr.DONE) { // 요청이 완료되면 실행
                if (xhr.status === 200 || xhr.status === 201) { // 응답 코드가 200 혹은 201
                    callBack(xhr.responseText);
                } else {
                    errCallBack(xhr.reponseText);
                }
            }
        };
        xhr.open(type, url); // http 메서드와 URL설정
        xhr.setRequestHeader('Content-Type', 'application/json'); // 콘텐츠 타입을 json으로
        xhr.send(JSON.stringify(param)); // 요청 전송
    },

    get: function (url, param, callBack, errCallBack) {
        $ajax.ajax(url, param, 'GET', callBack, errCallBack);
    },

    post: function (url, param, callBack, errCallBack) {
        $ajax.ajax(url, param, 'POST', callBack, errCallBack);
    }


}

로그인 버튼을 onclick 했을 때 다음 login 함수가 실행된다

$login = {
            baseUrl: 'localhost:8081/api',
            login: function () {
                var userid = document.getElementById('userid').value;
                var passwd = document.getElementById('passwd').value;
        if (userid == '') {
            alert("아이디를 입력해주세요");
            return;
        }

        if (passwd == '') {
            alert("비밀번호를 입력해주세요");
            return;
        }

        var url = '/api/members/member';
        var param = {
            userid: userid,
            passwd: passwd
        }
        $ajax.post(url, param, $login.callBack, $login.errCallBack);
    },

    callBack: function (response) {
        var json = JSON.parse(response);
        if (json['rtnCd'] == 0) {
            //todo success
            var rtnObj = json['rtnObj'];
            var idx = rtnObj['idx'];
            var stat = rtnObj['stat'];

            document.getElementById('idx').value = idx;
            document.getElementById('stat').value = stat;
            document.getElementById('login').submit();
        } else {
            alert(json['rtnMsg'])
        }
    },

    errCallBack: function (response) {
        alert("시스템 오류입니다.");
    }

}

동기와 비동기

• 동기(ex.java): 하나 끝나면 하나 하는 순차적으로 결과를 내는 방식
• 비동기(ex.javascript): 결과가 나오기 전에 다른 작업도 진행하는 방식
• 동기는 설계가 간단하고 직관적이지만, 결과 나오기 전까지 아무것도 못하고 대기해야한다.
• 비동기는 동기보다 복잡하고 오류를 찾기 힘들지만, 결과가 주어지는데 시간이 걸려도 그동안 다른 작업을 할 수 있어서 자원을 효율적으로 사용할 수 있다.

JavaScript Promise

• 비동기 처리를 도와주는 자바스크립트 내장 객체
• 자바스크립트는 비동기적 작업을 처리하기 위해서 콜백을 사용할 때, 순차적으로 실행할 필요가 있을 때 이것을 중첩시켜서 표현해서 에러, 예외 처리가 어렵고 중첩으로인해 복잡도가 증가함.
• 이러한 단점을 해결하는게 promise
• then 을 사용해서 비동기 코드를 동기로 실행되는 것 처럼 보이게 하면서
• catch를 사용해서 에러처리 좀 더 수월하게 해줌

Spring 5 WebFlux

출처 : [Spring]WebFlux란?

• 동기프로그래밍인 자바를 비동기처럼 사용할 수 있게 해주는 모듈
• client, server에서 reactive 스타일의 어플리케이션을 도와줌
• 동기에서는 블로킹 콜은 콜러를 기다리게하는 형태인데, 논블로킹 코드에서는 빠른 생산자가 목적지를 앞지르지 않게 이벤트 속도를 제어하는 것이 중요함
• reactive stream은 비동기성 컴포넌트 간의 상호작용에 정의된 작은스펙
• reactive stream의 주 목적은 subscriber가 publisher가 생산하는 데이터 속도를 제어하는 것