관리 메뉴

CASSIE'S BLOG

89강 스프링 부트 무작정 따라하기 + 실습 많음 (깃허브에 없음) 본문

PROGRAMMING/슈퍼코딩 강의 정리

89강 스프링 부트 무작정 따라하기 + 실습 많음 (깃허브에 없음)

ITSCASSIE1107 2024. 1. 1. 12:04

 

 

 
11로 다 맞추고... 저기에 다 똑같이 설정 맞춰야한다. 
 
자바11이랑 호환을 맞춰야함.
 
2.7.14
 

 
처음이니까 2개만 선택
 

 

 
build.gradle 가보면 springframework.boot 랑 spring.dependency-management가 두줄 떠있다. 
 
dependencies 어떤 라이브러리 의존성 넣는건데 이 부분 중요함.

 
제일 밑에 spring-boot-starter-test는 기본적으로 들어가는 거임. 신경쓰지말 것
 

 
이거 실행해서 밑에 started 하면 서버 실행된거임.
 
spring application 실행이 된거다. 
 

 
서버가 주도적으로 렌더링을 해서 페이지를 주는 방식

웹에서 주도적으로 렌더링하는거다. 
 

 
th: 
타임리프 약어다.
 

 

 
서버에서 흩뿌려줄 데이터를 SSR 할건데 java 폴더에 가서 dto, controller를 만들어준다. 
 

getMapping부분 중요하고
addAttribute 중요하고
mode.addAttribute("dataList", sampleDataList); 같이 넣어준다 이게 html 아까 dataList임. 
 

 
samplePage.html이름을 return을 해야한다는데 그게 무슨 말일까.
그냥 진짜 이름을 적으라는말임.
html파일명은 적을 필요가 없다함. 

 
 

 

 
 
개웃김
실습하려고 하니까 
Spring Generator 부터 없음
 

 
 
 
아 씨 커뮤니티 버전은 스프링 지원 안된다고 함. 직접만들어줘야한다는데 링크 이거보고 해보기
 
https://yuhe-dogspaw.tistory.com/198

 

[intellij] spring Initializr 안 뜨는 경우, SpringBoot Plug-in 설치가 없는 경우

안녕하세요. 유헤입니다. 오늘은... intellij에서 spring 프로젝트를 만들기 위해, 환경설정을 하던 중 막히던 부분이 있어 기록 하고자 합니다. 강의나 블로그에 보면, spring initializr 로 생성하라는

yuhe-dogspaw.tistory.com

 
그때 대학인증해서 커뮤니티 버전 아닌 걸로 했잖아 windows로 해야함

 

그래도 자바17버전만 이제 지원하네.

 

 

 

com.google 이런 식으로 회사이름 적는다고함. 
근데 그냥 지금 google.github한거임.

 

 

이미 진짜 만들어져있음.

SampleApplication 

 

휴..8080 계속 써 있다해서 쌤이 하라는 버전이랑 똑같이해야함.

 

 

이 버전으로 해야함

 

plugins {
id 'java'
id 'org.springframework.boot' version '2.7.14'
id 'io.spring.dependency-management' version '1.0.15.RELEASE'
}

group = 'com.github'
version = '0.0.1-SNAPSHOT'

java {
sourceCompatibility = '11'
}

repositories {
mavenCentral()
}

dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.named('test') {
useJUnitPlatform()
}

 

서버가 돌아가고있다는거임.

 

main] cohttp://m.github.sample.SampleApplication : Started SampleApplication in 2.497 seconds (JVM running for 3.277)

 

resources>templates>samplePage.html 내가 직접 만듬. 

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Sample Data</h1>
<div>

<!-- Thymeleaf를 사용하여 데이터를 data 렌더링 -->
<div th:each="data: ${dataList}" >
<p th:text="${data.id + ': ' + data.name}"> </p>
</div>
<!-- 데이터가 없는 경우 처리 -->
<div th:if="${dataList.size() == 0}">
<p> NO Data Available.</p>
</div>

</div>
</body>
</html>

 

 

깃허브 말고 내가 한 것

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>sample data</h1>
<div th:each="data: ${dataList}">
<p th:text="${data.id + ': ' + data.name}"></p>
</div>

<div th:if="${dataList.size() == 0}">
<p>No data</p>
</div>

</body>
</html>

이건 한 뒤에 그냥 크롬 누르면 됨

 

each를 넣어주면 for문처럼 돌아간다고함. 
ssr : 서버에서 데이터 받아줄거임. 

 

controller와 dto 패키지만들기 자바로 다시 가서 

 

dto에 sampleData를 만들어줄건데 이거는 samplePage.html에서 다 읽힐거라서 
그래서 samplePage.html에서 있어야하는 데이터를 다 가지고 있어야함. 

 

setter는 따로 안 만들어준다고함.

 

package com.github.sample.dto;

public class SampleData {

private int id;
private String name;

public SampleData(int id, String name) {
this.id = id;
this.name = name;
}

public int getId() {
return id;
}

public String getName() {
return name;
}
}

 

실습하면서 배운 점

 

컴트롤러 어노테이션을 붙이면 Controller가 바로 import가 되는구나..
컨트롤러에 스트링을 반환하는 메소드를 하나 만들 예정
재밌는게 Model를 매개변수에 넣으면 또 자동으로 import됨
     List<SampleData> sampleDataList = new ArrayList<>();
이거 할 때 <SampleData>할 때 dto에 있는 거 import 해오는지 잘 체크해야하고
GetMapping도 중요함
api할 때 앞에 / slash 있음
그리고 SampleData에 좀 넣기
contoller 을 실행해준다..! 
주소창에 lcoalhost:9090/sample 이렇게 치면 끝 


짜잔~~

 

 

 


CSR 도 실습해야함.''

 

아 반환은 List<SampleData> 반환타입 중요 계속 String 이렇게됨

Controller 실행하고 test.html 구글 아이콘으로 클릭하면 됨

 

package com.github.sample.controller;

import com.github.sample.dto.SampleData;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/api")
public class SampleCSRController {

//반환타입이 List<SampleData>
@GetMapping("/sample")
public List<SampleData> getSampleList(){
List<SampleData> sampleDataList = new ArrayList<>();
sampleDataList.add(new SampleData(1, "sample item1"));
sampleDataList.add(new SampleData(2, "sample item2"));
sampleDataList.add(new SampleData(3, "sample item3"));
sampleDataList.add(new SampleData(4, "sample item4"));
sampleDataList.add(new SampleData(5, "sample item5"));

return sampleDataList;
}
}

 

 

<!DOCTYPE html>
<html>
<head>
<title>External Data Example</title>
</head>
<body>
<div id="dataContainer">
<!-- 데이터가 나타날 공간 -->
</div>

<script src="script.js"></script>
</body>
</html>

 

쌤도 CRS 은 CORS 에러나네. CORS UNBLOCK 해서 크롬확장자하면 됨. 

반응형