Thymeleaf 연습

thymeleaf, jpa, oracledb 프로젝트 연습

프로젝트명 : boot14_thymeleaf2__JPA_H2

http://localhost:8090/ 주소는 기본적으로 templates의 index.html 을 띄워줌

어려움.

dao 자동생성 기법
리턴타입이 Optional<dto>인 sql mapper

한번 연습 필요

특이점 : register 작동시 오류 발생

페이지 이동 흐름 파악

th:href="@{|/users/${user.id}/delete|}" 기법 사용하여 @PathVariables("")로 받는 방법 사용

외부 경로에 있는 이미지 파일 불러오기

디펜던시 : web, devtools

• 추가 jsp용 디펜던시 2개 넣기

프로퍼티 설정

C:\resource 에 있는 이미지 파일을 main.jsp에서 사용할 것임
WebConfig 파일 생성

public class WebConfig implements WebMvcConfigurer{

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		System.out.println("webConfig 실행");
		
		registry.addResourceHandler("/test2/**")
		.addResourceLocations("file:///C:/resource/");
		
		WebMvcConfigurer.super.addResourceHandlers(registry);
	}
}

이미지 사용 html태그

	<h1>main.jsp</h1>
	외부 이미지 로딩<br>
	<img alt="이미지가 없습니다." src="/app/test2/a.jpg" width="100" height="100">

프론트엔드

ECMA_script
기존 자바스크립트의 확장판을 표준화한 것

기본 세팅

VSCodeUserSetup-x64-1.76.2.exe 설치
c:에 ecmascript 폴더 생성, 안에 ecma_stu, prof 생성
vscode에서 파일 -폴더열기 -> ecma_stu 지정
= 이제 작업 폴더를 지정한 것임

extend(확장)탭에서 korean language pack, live server(Ritwick Dey) 설치

html 파일에 아무 문자나 쓰고 우클릭 Open with live Server (단축키 기억하기) 알트+l+o
= 페이지 저장만해도 자동 갱신

백업

프로젝트, 파일 백업 방법 : 단순 복사로 불가능 . 직접 내컴퓨터, 작업폴더까지 가서 백업해야함

vscode 2개의 창 띄우기

stu , prof로 뛰울거임

파일 -> 새창 으로 vscode창 하나 추가
stu처럼 prof로 작업폴더 경로 지정

특이점 : 포트번호 자동 사용해서 포트 충돌날 일이 없음
특이점2 : vscode사이에서는 간단한 파일 복붙이 가능함

ECMA

기존 자바스크립트의 확장판을 표준화한 것

var, let

함수 단위 스코프를 가진 var
블럭 단위 스코프를 가진 let

var

호이스팅 됨
똑같은 변수 중복 선언 가능
함수 단위 스코프

let

호이스팅 안됨
똑같은 변수 중복 선언 안됨
블럭단위 스코프

const

상수 변수
반드시 초기화 필요
let과 나머지 기능이 동일

JSON 객체 리터럴 사용

this는 json obj를 가르킴
한줄복사 단축키 쉬프트+알트+방향키
[]
익명함수
코드보기

    <script>
        //1. 사용자 정의 객체
        let address="서울";
        let my="email";
        var user={
            username:"홍길동",
            age:20,
            address, //변수만 딸랑 넣으면 변수명(키값):변수값(벨류)로 자동 설정
            [my]: "aaa@naver.com", //key 값을 변수로 설정
            ///////
            getName: function(){
                return this.username;   // this == json obj
            },
            getAge: function(){
                return this.age;
            },
            getAddress(){return this.address} //함수를 그대로 넣어도 됨
        }; // end obj


        console.log(user); //한줄복사 단축키 shift + alt + 방향키
        console.log(user.username);
        console.log(user.age);
        console.log(user.address);
        console.log(user.email);
        console.log(user.getName());
        console.log(user.getAge());
        console.log(user.getAddress());
            
    </script>

중첩 표현식

원래는 키값을 쌍따옴표로 묵어야하는데 생략해서 사용해도 된다.

중첩 표현식 사용은 메서드 체인 방식이나 배열 표현 방식으로 사용할 수 있다.

    <script>
        // 11. 사용자 정의 객체
        var person = {
            name: "홍길동",
            "age":20,
            person:{
                name:"홍대감",
                job:"사또"
            }
        }; //end person
        var test = "person";
        console.log(person.person.name);
        console.log(person["person"]["job"]);
        console.log(person[test]['job']);
    </script>

ㄴㅁㅇ

배열을 객체에 분해해서 할당하기

배열로 존재하는 데이터를 -> key/value 형태의 객체로 변환하는 작업
var [n, n2] = [1000, 2000];

    <script>
        //객체 분해 할당 (destructuring)
        //1. 일반적인 배열값 얻기
        let arr = [100, 200];
        var n = arr[0];
        var n2 = arr[1];
        console.log(n, n2);

        //2. 배열 객체 분할 할당
        let arr2 = [100, 200];
        var [n, n2] = arr2;
        var [n, n2] = [1000, 2000];
        console.log(n, n2);

        var [n, n2, n3] = arr2;
        console.log(n, n2, n3); //undefined case

        var [n, n2, n3=0] = arr2;
        console.log(n, n2, n3); // default value case

        var [, , x] = [1,2,3];
        console.log(x); //3

        //3. = 기준으로 양졲 값과 포맷이 일치하면 된다.
        var [n, n2, [n3, n4]]=[1,2,[3,4]];
        console.log(n, n2, n3, n4);

        //4. 갯수 불일치의 경우 ...(rest)연산자 사용
        var [n, n2, ...n3] = [1,2,3,4,5,6];
        console.log(n, n2, n3);

        //5. 분해를 이용한 값의 swap
        var a=1;
        var b=2;
        [a,b]=[b,a];
        console.log(a,b);
    </script>

키 수< 배열의 길이 라면 부족한 값은 undefiend로 채워진다.
키의 기본값을 설정할 수 있다.
...

객체를 배열에 분해해서 할당하기

키값을 일치시켜야 한다.

    <script>
        //객체의 분할 할당
        //1. 일반적인 객체 사용법
        var obj = {x:100, y:200};
        var n = obj.x;
        var n2 = obj['y'];
        console.log(n, n2);

        //2 객체 분해 (이름의 통일)
        var {x, y, z} = {x:1000, y:2000};
        console.log(x, y, z);

        //3. default value
        var {x, y2=0} = {x:1000, y:2000};
        console.log(x, y2);

        //4. 변수범위 변경
        var {x:n, y:n2} = {x:1000, y:2000};
        console.log(n, n2);

    </script>

파라미터 객체분해할당 (중요)

연습필요

    <script>
        //파라미터 객체 분할 할당
        //1. 배열 파라미터
        function a([x,y]){
            console.log("in function : " , x, y);
        }
        a([10, 20]);
        a([10]); // y=undefined

        //2. 배열 파라미터 , default
        function a2([n, n2, n3=0]){
            console.log("in function a2: " , n, n2, n3);
        }
        a2([10, 20]); //10, 20, 0

        //3. 객체 파라미터
        function b({n, n2=0}){
            console.log("in function b: ", n, n2);
        }
        b({n:99, n2:88}); // 99, 88
        b({n:99, n10:88}); // 99, 0
    </script>

template 리터럴

역따옴표(백틱)(1숫자키 옆)을 이용하면 변수를 간편히 삽입하고 문자형식 그대로 유지되어 저장된다.

    <script>
        //template 리터럴
        //1. 문자열 처리 방법
        let s1 = "hello";
        let s2 = "hello";
        let s3 = "hello";
        console.log(s1, s2, s3);

        //2 template 리터럴 용도
        var name = "hello2";
        var s="<table> \
                <tr>\
                    <td>"+name+"</td>\
                </tr>\
                </table>";
        console.log(s);

        // ``백틱 사용시 줄바꿈에 역슬래시 필요 없음
        var s=`<table> 
                <tr>
                    <td>${name}</td>
                </tr>
               </table>`;
        console.log(s);

        let aaa="홍길동";
        let bbb=20;
        let ccc="서울";
        let result = `이름은 :: ${aaa}, 나이는: ${bbb}, 주소는 : ${ccc}`;
        console.log(result);
    </script>

함수

함수의 정의

    <script>
        //함수 작성 방법
        //1. 함수 선언식 (이름있는 함수)
        function func(){
            console.log("func() 호출");
        }
        func();

        //2. 함수 표현식(익명함수)
        var func= function(){
            console.log("func() 호출");
        }
        func();
    </script>

    <script>
        //함수 특징 (일급객체)
        function func(){
            console.log("func()");
        }

        var x= func; //1. 변수에 저장 가능
        x();
        /////////////////
        function func2(){
            return func; //2. 함수의 리턴 값으로 사용 가능
        }
        var x = func2();
        x();
        //////////////////
        function func3(x){ // 3. 함수의 인자값으로 사용 가능
            x();
        }
        funcc3(fun);

        //응용: 콜백함수
        function call(x){
            x();
        }
        function callback(){
            console.log("callback()");
        }
        function callback2(){
            console.log("callback()2");
        }
        call(callback);
        call(callback);
    </script>

함수의 매개변수와 인자

rest 파라미터

rest 매개변수는 맨 마지막에 위치해야한다.

    <script>
        // 다양한 함수 형식

        // 1. 기본함수 특징 -> 인자 갯수가 달라도 됨
        function func(n, n2, n3){
            console.log(n, n2, n3);
        }

        func();
        func(1);
        func(1, 2);
        func(1, 2, 3);
        ////////////////////
        console.log("");
        function func(n=1, n2=2, n3=3){
            console.log(n, n2, n3);
        }

        func();
        func(1);
        func(1, 2);
        func(1, 2, 3);
        //////////////////////
        //3. rest 파라미터
        function func3(n, n2, ...rest){ //rest매개변수는 맨 마지막에 위치해야한다.
            console.log(n, n2, rest);
        }
        func3(1,2,3,4,5)   //1, 2, (3)[3, 4, 5]
    </script>

고급함수

중첩함수의 사용

    <script>
        // 중첩함수의 사용

        // 1. 중첩함수 선언식
        function x(arg){
            function y(n){
                return n*10;
            }
            return y(arg);
        }

        // 외부에서 접근 방법
        var result = x(3);
        console.log(result);
        ////////////
        //2. 중첩함수 표현식
        var a = function(arg){
            var b= function(n){
                return n*100;
            }
            return b(arg);
        }
        var result2 = a(2);
        console.log(result2);

        //////////////////////
        //3. 은닉화
        var k = function(){
            var d=10;
            var k2 = function(){
                return d*2; // 상위 함수 안의 변수 사용 가능
            }
            return k2();
        }
        console.log("k() 호출 : ", k());
    </script>

내부함수에서 상위함수의 변수 사용 가능한 특징이 있다.

람다함수 (arrow함수)

자바스크립트에서의 람다함수(arrow함수) 자세히 정리 : https://velog.io/@bsj2145/자바스크립트에서의-람다함수

arrow 함수는 일반적인 함수 표현식을 function키워드 없이 => 이용하여
표현한 방법.

처리 코드가 한줄인 경우 {}브레이스 생략이 가능
한줄일 경우 return 문은 생략이 가능.

    <script>
        //arrow 함수 / 람다 함수
        //1. 파라미터 없고 리턴값 없는 형식
        function func(){
            console.log("func()호출");
        }
        const x=()=>{console.log("arrow-func()");};
        const x2=()=>console.log("arrow-func()");
        // 처리 코드가 한줄인 경우 {}브레이스 생략이 가능
        x();
        x2();

        //2. 파라미터 있고 이텁값 없는 형식
        function func2(n, n2){
            console.log("func2() ", n, n2);
        }
        const x3=(n, n2) => console.log("arrow-func: ", n, n2);
        x3(1,2);

        //3. 파라미터 없고 리턴값 있는 형식
        // 유심히 보기
        // 자동으로 리턴
        function fuunc(){
            return  100;
        }
        const x4 = () => "arrow-func3 : " + 100;
        //return 생략이 가능
        const x44= ()=>{ return 'aaa'+100;}
        const result = x44();
        console.log(result);
        console.log(x4());
        //////////////////////////////////////
        // 4. 파라미터 있고 리턴값도 있는 경우
        function func4(n, n2){
            return m*n2;
        }
        const x5 = (n, n2) => n*n2;
        console.log("func5 : ", x5(10, 2));
        ////////////////////////////
        // 여러줄일 경우 브레이스{}기 필요.
        function func5(n, n2){
            return m*n2;
        }
        const x6 = (n, n2) => {
            console.log(n, n2);
            return n*n2;
        }
        console.log("func6 : ", x6(1, 2));
        ////////////////////
        // 주의점 : arrow 함수는 this 바인딜이 안된다.
        // arrow 함수에서 this는 window객체다.
        // 따라서 객체의메서드르 생성할 때는
        // 사용하지 않도록 한다.
        var user={
            n:999,
            b:function(){
                console.log(this, this.n); // n = 999
            },
            c:()=> console.log(this, this.n) //window객체, undefined
        }
        user.b();
        user.c();

    </script>

주의해야할 특이 사항
파라미터가 1개면 괄호() 생략 가능
위에서 배운 객체 내에서 this는 해당 객체 내의 값들을 지칭한다.
하지만 객체 내에서 선언된 람다 함수 내에서 사용된 this는 바인딩되지 않고 window객체를 지칭한다.

따라서 arrow 함수 내에서는 this를 쓰지 말자.
또한 json obj안에서 arrow 함수를 쓰지 말자.

클래스 생성

자바에서는 멤버변수 생성이 필요했었음
자바크스립트에서는 필요 없음.(선언하면 에러남)
클래스의 메서드 안에서 멤버변수를 사용할 때 this 생략시 오류 발생함

    <script>
        class Person{
            //var name=0; //에러발생
            //var name2=0; //에러발생
            setName(name){
                this.name = name;
            }
            setAage(age){
                this.age = age;
            }

            getName(){
                return this.name;
            }

            getAge(){
                //return age;  //this 생략시 오류 발생
                return this.age;
            }
        }

        var p = new Person(); //객체 생성, 기본생성자 사용
        p.setName("홍길동");
        p.setAage(10);
        console.log(p.getName());
        console.log(p.getAge());
    </script>