TIL : 82번째- 230403 [4-1-월]

※ Keep in mind

 본 내용은 웹개발과정의 강의 중 내용을 복습을 위해서 메모한 것에 불과한 것입니다. 이러한 연유로 강의내용을 오인한 나머지 오기재 및 불기재가 있을 수 있으니 '참고'만 해주시길 바랍니다. 저의 경우에도 본 내용을 단순히 읽은 것이 결코 저의 것이라고 생각하지 않습니다. 본 내용은 복습을 위한 초기 내지 중간 과정에 불과한 것이고, 이후에 내용을 보충 후 인출 및 설명하기 과정이 있어야 비로소 복습의 단추가 어느 정도 마무리되어간다고 볼 수 있습니다.
 따라서 당초에 본 내용은 비공개였습니다. 그럼에도 불구하고 본 내용을 공개한 점은 함께 공부하는 동료들과 나눔을 바탕으로 배움과 성장의 공진화라는 소기의 목적을 달성에 어느 정도 도움이 될 수 있기 때문이라고 생각합니다.

I. Vue.js

1.  들어가며

(1) API 개념

1)

우리가 다루는 API는 options, global  그리고 directive 밖에없어

options API는 createAPP() 할 때 전달하는 options로 API를 전달하는거야

 

생김새가 함수에서 전달하는 인자가 전달한다고 해서 option형태의 API라고 하는거야

 

어플리케이션에서 전역적으로 handling하는거도 있고,

함께 섞어서 쓰는 방법이 있어

 

우리가 알아야하는건 options API에서 options를 알아야해

 

2. 메뉴를 저장하고,  다시 출력 바인딩하기

(1) 방향성

1)

data가 server로 전송됐었어 data를 받아서 service로 add했던게 기억이 나?

insert 다음에 어떻게 해야해? 우선 insert한 data가 여기에 뿌려져야해

data를 client에 반영하는걸 해야해 어떻게 할까?

 

<첫번째>는 insert가 정상적으로 됐다는거만 자바에서 return 에 하면 돼

"OK" 되면 client가 화면 갱신해야해 다시 요청해서 목록을 다시 갱신하는거야!

-> 즉 성공(OK)시, 목록 다시가져오고(load())

(불필요 요청필요도 없고, 일반요청 그대로 잘 이용가능 다만 비효율, 유저의 요구 등의 경우 2,3번으로 감)

 

<두번째>는 insert가 잘 됐으니까 현재 insert하는 녀석을 다시 얻어오는거야

lastMenu()를 얻어와! 얻어오고 id를 받아와

id 가지고 하나만 다시 서버에 요청해 목록만 요청하는게 아니라, 하나만 요청해서 지금 떠있는 곳에 넣는거야

 

<세번째>는 가장 최근에 등록한 last menu하면 menu를 반환해서 화면에대가 대체하는거야

 

 

(2) 첫번째 방법

1)

일단 첫번째 방법부터해보자! 입력을 하고나서 새로고침 하면 출력되게끔하자!

<select id="findviewAll" resultMap="menuViewResultMap"> 
<!-- resultType이 무엇이냐 modle을 넣어주자 -->
    select *
    from menu_view
    <trim prefix="WHERE" prefixOverrides="AND |OR ">

        <if test="query != null">
        name like '%${query}%'
        </if>

        <if test="price != null">	  		
        and price > #{price}
        </if>

        <if test="categoryId != null">	
        and category_id=#{categoryId}
        </if>

    </trim>
    <if test="orderField != null">
    order by ${orderField} ${orderDir}
    </if>
    <if test="size != null">
    limit #{size} offset #{offset}
    </if>
</select>

마이바티스 설정하고

@Override
public List<MenuView> getViewList(int page, Integer categoryId, String query) {
    System.out.println(5);
    // TODO Auto-generated method stub
    int size = 9;
    int offset = (page - 1) * size ; // 1(page)->0(offset) , 2->10, 3->20

    String orderField = "reg_date";
    String order = "desc";

    List<MenuView> Viewlist = repository.findviewAll(offset ,size, query,categoryId,null,orderField, order);

    return Viewlist;
}

입력 후 출력을 하는데, 최근 추가한 순으로 기준으로 내림차순으로 보이게끔하였다.

 

2)

@PostMapping
public String insert(@RequestBody Menu menu) {
    menu.setCategoryId(1);
    service.add(menu);

    System.out.println(menu.getName());
//		return "{result : \"OK\"}";
    return "OK";

};

그리고 OK를 return해주면

menuSaveHandler(e){
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");

    var raw = JSON.stringify(this.menu)

    var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
    };

    fetch("http://localhost:8080/menus?", requestOptions)
    .then(response => response.text())
    .then(result => {
        if(result === "OK")
            this.load();
        // console.log(result);
        // result;
        })
    .catch(error => console.log('error', error));

}

여기서 받아서 load() 를 한다.

 

(3) 나누기

1)

Thymeleaf로 이미 detail에서 만들어도 vue.js로 다시 만들수 있어

삭제버튼 누르면 삭제도 할 수있어야해!

 

목록을 가져올 때! 화면에 보이는거라 해서 한번에 가져오는게 바람직하나? 바람직할수도 아닐수도있어

 

일단은 다루어야할 범위가 크면 안좋아 프로그램은 큰것을 작게 만들어야해

작게 여러번만드는 방식으로 해야해 그래야 프로그램을 복잡하게 안만들어

화면 데이터 한번에 가져오려면 어쩌면 내가 잘못바라보고 있는거 아닌가 하면서 나눠서 작업할 수있어야해

 

리스트 전체가 아니라 나누는 안목도 가지고 있어야해

나눈다고하면 몇개로 나누어서 각각 만들생각을 할까? 화면을 봤을 때 어떻게 나누면 좋을까? 즉 카테고리나, 신규 메뉴는 Vue.js로 안되고 있어

한페이지가 한번에가 아니라 전체로 보면 볼거도 생각할거도 영향받을것도 코드도 복잡해지게돼

프로그램은 이렇게 만드는게 아냐 어떻게든 내가 부담안되게 작게만들고 그거만 바라보게끔 해야해

 

어떻게 부분을 나누어서 만들고 싶어?

3개로 나눌 때에는 고립화가 이루어져야해 그러면 고립화와 나누는 방법을 알아보자

 

2) 코드 나누기의 이점

나누면 무조건 '3가지 이점'이있어

 

1. 크기가 작어서 부담이 덜하다 (코드 크기)

2. 집중화라는 개념이 들어갈 수있다 (작게 나눈도구가 한번이라도 더 사용되면 집중화라는 관점을 가지게 돼)

이 경우 집중화와 재사용 차이?

'집중화'란 동시대 만들어진 컴포넌트에다가 수정이 한번에 이루어지는것

'재사용'은 다른시대에 다시 사용

결국 재사용은 집중화될 필요가 꼭 없어 다음 페이지가 아니라 다음 Version에서!

3. 협업 

 

3)

재사용이든 집중화든 협업이든 내가 지금 만든게 쟤한테 영향을 주면안돼 즉 서로 영향을 주지않는 고립화가 완전히 이루어질 수있어야해

커피목록을 나누어 만든다고 하자! 위에있는 카테고리도 나누어서 만든다고 보자

서로에 영향을 주면서 고립화하는게 있는가? 컴포넌트라는 개념이다

 

 

4)

Thymeleaf 빼고 Vue.js 를 하자! branch 새로만들기! 이제는 file명.html 로 해야해

그전에는 server에서 받아왔어 이 방식은 페이지 만들어주는 MVC Controller에서 만들어줬어

그러나 .html은 서버에서 페이지 만들지 말라는 의미야

그러면 어떡하라고? 난 API로 만들자라는 의미야

 

이렇게 되면 SSR은 없어지고, server는 data만 주는거야!

심지어 index.html 페이지 외에는 내가 더이상 페이지 요구할 길이 없어

이제 SPA라고 해

 

그러면 API가 아닌 controller들은 지워야할까? 헷갈려!

그리고 기존 템플릿의 파일들도 지워야해

 

II. Node.js

1. 들어가며

지금까지 JS 실행환경에서 콘솔창이없어서 브라우저 띄어서 했어! 이제 콘솔이 있어서 콘솔로 출력이 가능해

이제부터 브라우저 없어도 돼 이렇게 콘솔실행을 만든것을 nodeJS라고 해! (자바 같은 런타임 환경)

 

 

2. JS 실행환경

이게 가능해진 이유가 구글 때문이야

원래 크롬만들 때 크롬이 안쪽에 있는 엔진이 자사엔진이 아니었어

구글이 V8엔진 사용하면서 플러그인으로 만들었어 즉 브라우저에서 뗄수도 있어

 

뗄수 있다면 콘솔을 붙일 수 있지않을까?

 

JS는 브라우저에서 제공하는 DOM만 조작이 가능한데, 콘솔에서 시작하면 브라우저를 넘어설 수있어

실행환경이 콘솔로 바뀐게 아니라, 다른 언어에서 사용하던 OS기능을 쓸수있게 돼 바로 NODE.js 때문에!

이제 file도 소켓도 다룰 수 있게 돼

 

JS로 가지고 node에서 동작하면서 가능해졌어

 

3. node 실행환경 세팅

home brew로 설치하고, 권장되는 버전을 사용하자 (node@18)

DOM사용하는 플랫폼과 네트워크 파일 등을 쓰는 플랫폼이 생겨

DOM쓰는 플랫폼에서는 윈도우 플랫폼으로 만들고

파일은 서버에서 만들면 돼!

그래서 JS가지고도 백엔드 만들 수있어!

 

 

 

4. node 사용하기

(1) 이해하기

1)

자바와 비슷하지만 차이는 컴파일러가 없어 그러나 컴파일러 대신하고자 하는 것이 많아

 

2)

Node.js 가장 강력한 힘은 node 모듈을 쉽게 만들고 공유할 수있다는 점이야

npm에서 쉽게 다운로드 받아서 적용시킬 수있어

언제든지 가입해서 업로드 다운로드 가능해

 

3)

위는 메모장 아래는 콘솔로 해서 모듈 시스템 사용하자

module을 NPM에서 들고온거야

 

모듈 쓸 수있어야하는데 두가지 방법이 있어

모듈은 ES6에서 사용해봤어 스크립트가 다른스크립트  load하고 싶은 이런 문제가 생겼어

 

기본적으로는 common js 로 쓸 수있어! 이게 기본은 아니라서 추가 설정을 해야해

 

4)

ES6 방식과 달라.  (ES6 : export default 방식으로)

exports.sum 으로 노출하는거야!

 

콘솔로 실행할수있으면서 개발환경(런타임환경)을 지원해주는거야

npm에서 라이브러리 말고도 필요한 tool도 다 가져올 수도있어

프로젝트관련 기본템플릿도 올릴 수있어서 여기있는 내용은 툴인지 라이브러리인지 생각하면서 받아야해

 

5)

vue.js 도 마찬가지야

Vue.js 받기

npm에서 latest로 최신버전이 가능해

 

json으로 내가 이용했던게 저장이 가능해

 

 

(2) vue 실행하기

1)

2)

package.json 에서

scripts 로 start 를 하면 실행이 가능해

 

3)

이제 header footer 분리할 수있는데,

이렇게 되는 순간 각각은 component라고 해!

 

분리되는 모처를 layout이라고 불러

header footer는 공통분모이기 때문에 컴포넌트라 부를거야! 컴포넌트가 세밀해져서 컴포넌트가 다시 컴포넌트 나눌수있어

얘들은 조합형이야

 

컴포넌트가 교체되는거지 페이지가 바뀌는건 아냐 페이지 로딩이없어

이렇게 되면 싸이월드 배경음악이 가능해

layout에다가 음악을 깔아주면 끊길일이 없었어

---

1. 보충

(1) node 이용한 vue 와 이전방식의 차이점

이전 방식은 stand alone 방식이다. 이 방식은 HTML 태그사이에 넣는 방식이다.

이제는 런타임으로 이용가능한 방식이다 

 

node.js 하는 방법은 SPA방식으로 이해할 수있다.

역동적인 상호작용이나 깊은 세션깊이, 중요한 상태로직에 대한 프론트 엔드를 요구하는 경우 필요한것이다.

이 경우는 페이지를 리로드할 필요가없다.

 

 

 

 

 

2. 회고 

1) 갑자기 node.js로 들어갔다. 나는 노드가 단순히 백엔드 프레임웍인지 알았는데, 이거는 하나의 런타임환경이라는것을 알게되었고, 반쪽짜리 불편한 JS가 날개가 달린것같이 편하게 보이기시작했다.

무언가 이거를 배우게 되면 나는 더욱더 프론트엔드에 관심이 커질것같다.