[블로그 만들기] 2. View 연결

템플릿 엔진 사용하여 View 만들기

mmmmmm02

Aug 21, 2024

Contents

2. View 연결

html 파일들을 mustache 템플릿 엔진을 사용하여 컨트롤러에 연결해보자.

2-1. static 폴더에 html 파일 넣기

html 파일을 다운 받아서 사용하자.

view 압축 풀어서 파일만 붙여넣는다.

만들어진 blog 프로젝트의 main > resources > static 에 다운받은 view 파일들 붙여넣기.

브라우저에서 잘나오는지 전체 확인.

외부에 파일 전달 방법

💡

IP 주소:포트번호/파일명

ex. 누군가가 ‘도라에몽 사진 하나 주세요’ 하면 도라에몽 사진 static 폴더에 넣고,

url 을 전달해주면 된다.

http://192.168.0.99:8080/dora.png

통신

ex. App 에서 ‘hello’ 를 OS 로 전송하려고 한다. 이 때, 존재하는 통로의 이름이 Byte Stream 이다.

‘hello’ 를 Byte Stream 을 통해 내려보내려면, 다섯 번을 보내야 한다..

그래서 우리는 Buffer 를 사용하는데, 버퍼는 정해진 크기 만큼 WriteBuffer 가 써서 내려보내고, ReadBuffer 가 받아서 읽는다.

flush() 는 버퍼가 꽉 차면 흘러내려가는 것으로, Write 버퍼에 남아있는 ‘o’ 는 버퍼가 꽉 찰 때까지 내려가지 않기 때문에 직접 flush() 해줘야 한다.

그렇게 내려온 ‘h e l l o’ 는 패킷(데이터당 번호가 있는 것)에 담겨, 라우터로 목적지 IP 까지 이동하게 된다. (라우터가 없으면 데이터가 유실된다. 라우터는 스위칭 역할도 해주기 때문에, 트래픽 문제가 생기면 우회해서 가기도 함.)

데이터를 쪼개야 같이 보낼 수 있다. 안쪼개면 같이 보낼 수 없음.

네트워크 주소인 목적지 IP 에 도착했다면, 통신을 위한 번호인 포트번호(애플리케이션 번호)도 필요하다. (ex. app 카톡 5000 / 크롬 2000 / 스프링 8080)

스프링 포트번호는 8080 이다.

💡

192.***.*.**:8080/

이것은 특정 폴더를 참조하겠다는 뜻으로,

static 폴더까지 설정이 되어있음(프레임워크라서^^)

그렇게 static 폴더에 넣은 html 파일들을 브라우저에서 볼 수 있게 됨.

정적파일

브라우저만 이해할 수 있는 확장자들만 모아둔 폴더를 웹 서버라 하고, 아파치(Apache)는 웹 서버이다.

브라우저는 단순 해석기이다.

브라우저가 이해 할 수 있는 대표적인게 html 로,

html 해석기로, 예쁘게 해석해주는 브라우저라고 생각하면 된다.

a.html 안에 있는 코드를 해석해서 이쁘게 보여주는 것이다.

아파치(웹 서버)가 읽어들이려면, 브라우저가 이해 할 수 있는 확장자 형태여야 하며(avi, html…),

.java 는 브라우저가 이해 할 수 없다.(이거는 javac, jdk … 필요)

정적 파일(변하지 않는 파일)들은 다 열리지만,

자바는 코드에서 실행되어 변하는 파일이기 때문에 안됨.

ex. /hello (식별자) 로 확장자가 없이 웹 서버로 들어오는 경우,

아파치는 정적 파일만 응답해주는 역할을 하기 때문에 톰캣에 위임한다.

아파치가 이해하지 못하는 파일이나(.java), 식별자 같은게 들어오면 톰캣에 위임하는 것.

템플릿 파일 (템플릿 엔진 Mustache)

이제 동적파일을 응답해보자.

ex. 100 명의 회원정보를 응답시키고 싶음

→ 아파치로만 하려면 html 파일이 100개가 필요하다. 정적파일의 단점이 변하지 않는다는 것.

템플릿 엔진이 있다면 템플릿 하나만 있으면 만사 오케이.

템플릿을 만들어주고 DB 에서 내용만 들고오면 된다.

DB 에서 조회하려면(SELECT) 자바 코드가 들어가야 한다.

대표적 템플릿 파일이 jsp 이고, 템플릿 파일은 템플릿 엔진으로 만든다.

jsp 는 템플릿 엔진으로, 추상클래스처럼 템플릿 만들어놓고 필요한거만 쏙쏙 사용 할 수 있음.

우리는 Mustache 라는 다른 템플릿 엔진을 사용해보자!^^

💡

템플릿 엔진

: 정적인 틀(html, css)을 만들어주고, 동적인 부분을 java 코드를 통해 실행하게 하는 것

자바 코드를 브라우저가 해석 할 수 없음, 서버측에 요청했을 때 WAS 는 모든 해석이 끝나서 브라우저에 전달할때는 순수 html 로 변환되어서 와야한다.

서버측에서 렌더링되어서 와야함. 서버사이드 렌더링(서버에서 다 만들어서 준다는 의미)

2-2. mustache 확장자 변경

static 폴더 안에 넣었던 html 파일 전체 그대로 복사해서 tampelates 폴더 안에 붙여 넣기.

Plugins 에서 mustache 가 설치 되어 있는지 확인, 아니면 Install 하기.

board 이름의 디렉토리 만들고,

.keep 이라는 file 을 만든 다음에

board 폴더 안에 넣으면 모양새가 깨지지 않는다.

board 안의 파일들은 확장자명 mustache 로 전체 변경하기

2-3. 컨트롤러 Controller <> view 연결

shop.mtcoding.blog 패키지 안에 board 패키지 만들고 거기에 BoardController 클래스 만들기

클래스명 위에 @Controller 어노테이션을 붙여야 식별자 요청을 받을 수 있다.

get은 select 할 때 파일 읽어올 때의 메서드, post 는 insert, delete, update 요청 할 때의 메서드이다.

지금은 식별자 요청 했을 때 파일을 읽어오기만 하면 되니까

@GetMapping 어노테이션을 붙이고, list 메서드를 만들어서 브라우저에서 확인해보자.

식별자 요청을 하니까 톰캣이 이 주소랑 동일한 애들을 찾아서 호출한다.

인코딩 문제 발생.

인코딩

application.properties

인코딩 문제가 생기면, application.properties 에 가서

아래와 같이 넣어주면 해결된다.

컨벤션(약속)

자바에서는 기호인 ‘-’ 하이픈(hyphen) 을 쓰면 안되기 때문에, 카멜표기법을 사용한다.


@GetMapping()
    public String saveForm() { // 자바에는 -하이픈 쓰면 안됨, 카멜표기법 사용 
        return "board/save-form";
    }

주소에서는 ‘_ ‘ 언더바 쓰지 않는다.

주소에서는 카멜표기법 쓰지 않는다.(자바에서만 카멜표기법 사용)

주소에서는 ‘-’ 하이픈(hyphen)을 사용한다. /board-form

이것은 전 세계 개발자들과의 약속 같은 것.. (ex. 클래스명 대문자, final 값 = NUM 대문자 등)

위의 컨벤션을 지키면서 view 연결을 위한 메서드를 만든다.

2-4. Actions on Save 기능 설정

저장 할 때마다 코드가 자동으로 정리되게 하는 기능이니, 세팅에서 설정 해주기

See more posts

[블로그 만들기] 2. View 연결

2. View 연결

2-1. static 폴더에 html 파일 넣기

외부에 파일 전달 방법

통신

정적파일

템플릿 파일 (템플릿 엔진 Mustache)

2-2. mustache 확장자 변경

2-3. 컨트롤러 Controller <> view 연결

인코딩

컨벤션(약속)

2-4. Actions on Save 기능 설정

More articles

[블로그 만들기] 4. 테이블 생성

[블로그 만들기] 3. Template Include 설정

[블로그 만들기] 1. 프로젝트 세팅

동적 바인딩과 추상화