본문 바로가기

WINK-(Web & App)/Spring Boot 스터디

[2025 1학기 스트링 부트 스터디] 고윤정 #2주차

반응형


섹션3 스프링 웹 개발 기초
스터디 시작 ~~~

• 정적 컨텐츠 (Static Content)


사용자가 웹사이트에 요청했을 때, 서버에서 별다른 처리 없이 그대로 전달되는 파일이나 데이터
ex) HTML파일, CSS파일, JavaScript파일, 이미지 파일, 폰트 파일 등

웹 브라우저에서 localhost:8080/hello-static.html을 치면 내장 톰켓 서버가 요청을 받고 스프링에 넘기는데, hello-static 관련 컨트롤러가 없기 때문에 내부에 있는 hello-static.html을 찾아서 반환을 해준다는 내용





실습을 해봅시당

static파일에 hello-static.html파일 생성



웹페이지에 localhost:8080/hello-static.html 입력한 모습





페이지 소스를 확인하면 내용이 동일한 것 확인 가능!









• MVC (Model-View-Controller)


웹 애플리케이션을 구조적으로 나누는 디자인 패턴

- Model : 데이터와 관련된 로직을 담당
→ DB에서 정보를 가져오거나 저장하는 역할
→ 예: 게시글 목록을 가져오는 함수

- View : 사용자에게 보이는 화면
→ HTML 같은 것
→ 예: 사용자가 보는 게시판 페이지

- Controller : 사용자의 요청을 받고, 어떤 로직을 수행할지 결정
→ 모델에서 데이터 가져오고, 뷰에 전달
→ 예: 사용자가 /posts를 요청하면, 게시글 목록을 보여주도록 지시

즉, 사용자가 /posts 페이지 요청 → Controller가 요청을 받음 → 필요한 데이터를 Model에서 가져옴 → 가져온 데이터를 View에 전달해서 화면을 보여줌

요즘은 controller랑 view를 쪼개는게 기본이라고 합니다!



• 템플릿 엔진


HTML 안에 변수나 조건문, 반복문 등을 넣을 수 있게 도와주는 도구
일반 HTML은 내용이 고정되어 있는데 웹사이트는 보통 사용자마다 다른 내용을 보여줘야 하기 때문에 템플릿 엔진을 사용한다.
- 대표적 템플릿 엔진: Jinja2(Flask, Django), EJS(Node.js), Thymeleaf (Spring), Handlebars





실습 Go

hello-mvc 입력


hello-template.html 만들기

파일경로를 복붙해서 열면 이런 화면이 뜬당 페이지소스 확인해보면 역시 동일함


타임리프 템플릿의 장점은 html을 쓰고 파일을 서버없이 열어도 껍데기를 볼 수 있음!




처음에 localhost:8080/hello-mvc만 입력하면 에러가 난다


에러가 나는 이유!
parameter name이 없기 때문



hello-mvc 뒤에 ?name=을 붙여서 다시 입력해주면 제대로 뜬다!!!













• API


서로 다른 프로그램끼리 데이터를 주고받는 방법, 규칙

@ResponseBody

이 한 줄을 추가하는 것이 중요함!!
응답 body부에 데이터를 직접 넣겠다는 것


api 입력하고

localhost:8080/hello-api 열어주면

이렇게 조금 다른 모습이 뜬다 ~~

name은 value로 바로 나온다 엄청 심플함




JSON (JavaScript Object Notation)?

데이터를 키-값 쌍으로 표현하는 방식
Spring Boot는 자동으로 Jackson 라이브러리를 사용해서 객체 → JSON으로 바꿔준다.
@RestController는 내부적으로 @ResponseBody가 포함되어 있어서, return 값을 HTML이 아니라 JSON 응답으로 처리함!

전체적인 흐름은 이렇다

단순 문자인 경우 stringconverter가 동작하고
객체인 경우 jsonconverter가 동작한다고 하는데
가볍게 들어도 된다그래서 흠.. 그렇군 했다


기본으로 쓰는 것은 jackson이라고 해서 한번 찾아보았다.

우리는 자바로 객체를 만들지만, 브라우저나 프론트엔드는 대부분 JSON을 쓰기 때문에
서버가 데이터를 줄 땐 자바 객체 → JSON으로 바꿔줘야 하고, 요청을 받을 땐 JSON → 자바 객체로 바꿔야 하는데

이걸 자동으로 해주는 게 Jackson !!!






이번주 내용은 여기까지 입니다!
감사합니당




반응형