2. 스프링부트( 블로그 만들기) 뷰 연결

윤주헌's avatar
Aug 14, 2024
2. 스프링부트( 블로그 만들기)  뷰 연결

뷰 연결

여기다 뷰 파일 안에 있는 것 넣기
notion image
 
notion image
 
💡
스태틱 폴더에 있는 것을 url에 넣으면 바로 사이트 들어갈 수 있다.

예시

notion image
notion image
notion image
notion image

URL 설명

루프백 주소 ( 내 주소)
192.168.0.991 → ip주소
8080 → 포트 번호
dora.png → 자원 명
 

상세하게 설명

hello(글자를) → 누군가에게 전송하고싶어 appliction프로그램을 만들어야 한다(이걸로 보내기 때문) os위, hw위에 있다.
 
notion image
app과 os사이 통로가 있다. 이거를 바이트 스트림이라한다(ByteStream 1바이트가 흘러가는 개울) 5번 보내가 귀찮음 → 그래서 보내고 싶은 것을 버퍼라는 자료형을 만들어 hello를 적어 보낸다(버퍼크기 마음대로 정할 수 있다) 4바이트 자료형이면 hell까지 꽉 차서 흘러내려감(플러쉬) 이거를 write버퍼
읽어들이는 read버퍼가 있다.
o가 남아서 보내야 하는데 다 안 차서 안 보내짐 hell은 꽉 차서 안 들어감 hell은 os에 내려왔고 o는 강제로 플러쉬 함
notion image
hello를 아주 잘게 쪼갬 → h, e, l, l, o로 5개로 쪼갰음
 
hw에서 목적지 까지 다이랙트로 보내는 것이 아닌 근처 라우터를 통해 통해 보내진다
라우터 없으면 내용 유실된다
 
라우터 → h,e 들어가면 가까운 곳에 양이 너무 많아 트래픽 생기면 우회해서 간다. 결국 목적지의 ip를 알아야 한다 → 192.168.0.991
 
  • 왜 데이터를 쪼개놨을까?
한방에 라우터 통해서 간다면
한 라우터에 a가 1gb 보내고 b가 1byte 보내면 a 보낼 때까지 b는 한참 기다려야 해서 쪼개서 보내야 한다.
쪼갠놈 마다 목적지를 하나 하나 적어둬야 한다
데이터 쪼개서 보내면 he는 잘 갔고 ll은 다른 경로로 갔으면 늦게 보낸 애가 먼저 갈 수 있어서
 
목적지 적고 데이터 마다 순서를 보내준다. → 이거 하나 하나를 ‘패킷’ 이라 한다 h(99, 1번) e(99,2번) 등
notion image
목적지에 카톡도 있고 크롬도 있고 스프링도 있고 여러가지 있는데 누구랑 통신할 것인가?
 
포트 번호가 어플리케이션마다 논리적 번호가 있다.
ip+ 포트번호까지 가면 웹 서버까지 들어가게 된다.
 
‘ / ’ 라는 것은 즉 url을 적는다는 것은 특정 폴더를 참조하겠다 라는 말이다 → static폴더에서 빼갈 수 있게 framework가 알아서 설정해줬다.
 
a.html, b.html 이 있다면 a.html적으면 아파치(웹 서버(브라우저가 이해할 수 있는 확장자들만 모아둔 폴더)) 브라우저는 단순히 해석기다 → 해석해주는 대표적인 것 (html)
브라우저가 이해할 수 있어야 한다(.png, avi, mp4, css, js, html등 가능) 하지만 .java는 이해하지 못한다. 스태틱 파일에 .java파일이 열리는 것이 아니다.
정적 파일들은 다 열린다
java는 실행될 때 바뀌기 때문에 정적 파일이 아니다.
 
/hello 만 적으면 확장자가 없네 하면서 식별자 요청을 한다. URL l이 losction인데 아파치가 톰켓한테 위임한다 → 아파치는 정적 파일만 응답해 주는 역할을 하기 때문이다
 
아파치가 이해 하지 못하는 파일이나 식별자 요청이 오면 톰켓한테 역할을 넘긴다
 
톰켓(자바 관련 요청 들어오면)
hello가 들어왔네? /hello로 매핑되어 있는 자바 파일을 찾기 시작한다(보통 서블릿 파일) → 컴파일 하고 → 실행하고 → 응답한다.
 
따로 아파치/톰켓이라 한다 따로 설치되는 것이고 → 이것을 합쳐서 was라 한다(해석해서 브라우저에게 돌려주려 함)
 
이제는 동적 파일을 응답시켜봐야지 → 이유 → 백 명의 디자인 파일 응답하는 거를 하고 싶다. 만약 톰켓 활용 안 하고 아파치로만 하려면 파일 100개 필요함 너무 비 효율 적이다. 이름이 다르니까 정적 파일은 변하지 않으니까
 
틀만 만들어 두고 속은 비워두고 db에서 내용만 바꾸면 된다 이거를 아까 배웠던 템플릿 메서드 패턴이다!!!
 
이 때 탬플릿 파일이 필요하다, db에서 빼오려면 java코드가 필요하다
 
이 파일을 만들면 장점은 템플릿 파일만 만들어 두고 내용만 바뀌면 된다. 대표적인 것 : jsp(템플릿 엔진이라 한다)
 
템플릿 엔진 → 정적인 파일만 만들고 특정 부분만 java코드로 필요한 것만 바꾸는 것
서버측 ? 브라우저 측에서 완성되나? 서버 측에서 완성된다. 서버에서 다 만들어서 줘서 서버 사이드렌더링이다.
 
서버측에서는 브라우저에 다 해석돼서 읽기 쉽게 html 코드로 준다 이것을 → 서버 사이드 렌더링(SSR)
 

우리는 템플릿 파일

머스테치라는 템플릿 파일을 사용할 거다
 

이제 해보자

 

1. 템플릿에 스태틱 파일 4개 복사해서 넣어주기

notion image

스태틱 파일안에 들어가는 것

💡
스태틱파일 → 정적

템플릿 파일안에 들어가는 것

💡
templates 파일 → 동적 자바파일로 들어감(우리는 .jsp를 사용했음)

2. 확장자 변경

확장자 변경(shift + F6) 머스테치로
notion image

3. 세팅에서 머스테치 install 해주기

notion image
notion image
머스테치는 외부에서 찾을 수 있는 폴더가 아니라는 것임
loaclhost:8080/detail.mustache로 안 찾아짐
 

4. 템플레이트에 보드폴더 만들기

notion image
먼저 템플레이트 폴더에 .keep파일 만들어 준 뒤
템플레이트 폴더 안에 보드 폴더를 만들고 안에 mustache 파일 4개 전부 넣어주기

notion image
notion image
.keep파일 안 만들어 주면 바로 머스테치 파일들을 board폴더에 넣었을 때 templates.board로 파일이 합쳐진다.

5. mian, java, 블로그에 board 패키지 파일 만들어주자

식별자요청으로 찾는 법
notion image
notion image

5.1 패키지 파일 안에 보드컨트롤러 클래스 만들기

notion image
 
board/list는
보드 폴더 안에 list있다고 적어주는 거임
notion image
 
notion image
식별자 요청함
notion image

getMapping 설명

💡
GetMapping(”/board/save-form”) 이게 URL 주소
 
💡
return에 실제 파일 주소 넣기(파일 경로 넣기) 앞에 / 안 해도 템플레이트로 들어가기 때문에
💡
(”/board”) 앞에 / 쓰는 이유는 8080 뒤에 슬래쉬 없기 때문
나머지 3개도 만들어 주자
notion image
 

한글로 바꾸는 방법

notion image
notion image
  • 2번째 것은 무슨 일이 있어도 UTF-8로 인코딩해라

xml 설명

context.xml 웹.xml, servser.xml → 아파치 톰켓 설정 파일인데 아파치 톰켓으로 파일 만들면 성이라 하자

웹.xml

💡
문지기(들어오게 못 들어오게 만드는 (필터링 역할) 어디로 갈지 모르겠으면 어디로 가라 이런 것)

서버.xml

💡
성을 만들 때 어떤 식으로 만들거냐? 위치는 어디고 (서버의 자체 설정 주도 함 context path 같은 것 설정)

context.xml

💡
db설정(내 서버 말고 연결된 애들 설정하는 것)

application.properties

💡
위 xml에서 할 수 있는 것들 모두 할 수 있다 모든 설정을 이 파일 안에서 다 할 수 있게 만든다

결과

notion image
 

반드시 지켜야 할 것 약속들

주소에서는 카멜표기법 안 쓴다. 하이픈을 사용한다, 언더바 안 쓴다
상수는 ++ 안됨
 
저장할 때 자동정렬 해주는 것
notion image
ctrl + alt + L 로 정렬한다
Share article

code-sudal