단독 프론트엔드 프로젝트를 하기 위한 설렘이 시작됐다.
아는 내용이었지만 한 번 더 정리하고자 하는 마음으로 이렇게 글로 정리하도록 한다.
참고로 jsp가 아닌 Thymeleaf를 쓰는 이유는,
그동안 개인플젝에서는 jsp만 써봐서 다른 방식을 써보기 위한 것도 있고
레이아웃을 구성할때 훨씬 명시적이고 쉽기 때문이다.
1. Javascript를 작성하기 위한 프로그램
프론트엔드 프로그램이 무엇이고, 뭘 써야 하는지 궁금해 했었다.
나는 항상 스프링, 스프링부트로 만들었기때문에 그런게 사실 따로 있나? 하기도 했다.
강의나 이것 저것 찾고 질문해보니
Sublime Text를 써도 되고, VS Code를 써도 되는 것 같다.
만약 프론트엔드 프로젝트나 프론트엔드만으로 이뤄진 프로그램을 작성할 거라면
굳이 SpringBoot를 쓰지 않아도 되는데 나는 손에 너무 익어서 이걸 선택했다.
2. Spring Boot 프로젝트 생성하기
이거 하나면 생성이 가능하다.(Jsp 대신에 tymeleaf를 넣으면 된다.)
yulfsong.tistory.com/45?category=797541
[스프링 부트 게시판] Spring Boot Project 생성하기 / View 띄우기
Spring Boot Project 생성하기 / View 띄우기 들어가기 전에 읽어보면 도움될 만한 부분 : https://yulfsong.tistory.com/42 1. 프로젝트 간단히 만들어서 다운받기 Spring Initializr https://start.spring..
yulfsong.tistory.com
아니면 따로 이렇게 디펜던시를 추가
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3. 폴더 구성 및 세팅
3-1. 폴더 구성
src/main/resources
└ static
└ templates
static은 이름 그대로 정적 파일을 관리하는 곳이므로
css, fonts, images, js 폴더를 만들고 넣으면 된다.
templates 위치에 html 파일을 넣으면 된다.
3-2. application.properties 관련설정
spring.thymeleaf.prefix=classpath:templates/ (**템플릿 시작 위치 참조)
spring.thymeleaf.suffix=.html (**템플릿의 확장자 이름 참조)
spring.thymeleaf.check-template-location=true (**해당위치에 파일이 있는지 없는지 체크)
spring.thymeleaf.cache=false(**캐시를 남기지 않는다.)중요한 점 몇 개만 짚고 넘어가자면,
첫번째와 두번째 prefix+ 경로 + suffix가 실제 경로가 된다.
이 말의 의미는 classpath: templates/ + controller return 이름 + .html이 된다는 뜻이다.
적용해보면 templates 안에 page라는 폴더안에 project라는 html 파일을 넣는다고 해도
별다른 설정 없이 return "page/project"만으로 템플릿으로 넘어간다는 뜻이다.
네번째 설정의 의미는
캐시를 남기지 않기 때문에 서버 재시작없이
스프링부트에서 수정하는 것만으로도 바로 html을 띄워서 사용할 수 있다는 의미이다.
설정중에서 정적리소스를 이해하고 조심히(?) 써야할 설정이 있다면 바로 이 줄이다.
spring.mvc.static-path-pattern="/static/**"스프링부트에서 '정적 리소스'라는 건
classpath:/static
classpath:/public
classpath:/resources/
classpath:/META_INF/resources
이 네가지를 뜻하는데, 즉 뷰를 만들어내는 게 아니라 이미 있는 것이다.
src/main/resources
└ static
--test.html
└ templates
localhost:8080/static/test.html 이 아니라
localhost:8080/test.html 으로 요청하면 응답이 온다.
저 설정을 쓰면 static 패턴을 정의하겠다는 의미로,
staitc을 꼭 써주어야 하는 셈이다.
그리고 여기에, 내가 수정할 때마다 새로 로딩된다면 더 편리할 것이므로
pom.xml에 하나를 더 추가해준다.
<!-- 정적 개발시 편한 reload -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>그리고 프로퍼티스에 하나 더 추가
spring.devtools.livereload.enabled=true이렇게 하면 새로고침만으로 바로 바로 반영이 가능하다.
3-3. html파일에 css와 Js파일 붙이기
실제 프로젝트를 할 때 html 파일에 js를 넣어서 수행하는 방법도 있고,
html 파일과 js파일을 별도로 분리해서 사용하는 방법도 있는데
웹표준은 후자라고 한다. 그러니까 별도로 분리해서 html에 붙이는 쪽을 택해보았다.
src/main/resources
└ static
└ css
-- project.css
└ js
-- project.js
└ templates
-- content.html
현재 내가 만들어놓은 폴더 구성이다.
html의 <head> </head> 사이에 이렇게 붙여넣는다.
<link rel="stylesheet" type="text/css" href="/css/project.css">
<script src="/js/project.js" defer></script>
여기까지가 아주 가장 기본적인 세팅이다.
js 파일을 넣을 때 defer 속성을 사용하는 이유는 여기에 자세히 설명되어있다.
tcpschool.com/html-tag-attrs/script-defer
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
*** 정말 생초보를 위한 테스트 부분
// html
<body>
<button type="button" onclick="a()">버튼</button>
</body>
// js
function a() {
console.log("a");
}
// css
@charset "UTF-8";
body {
background-color: lightblue;
}값이 제대로 나오는지, reload가 잘 되는지 등 테스트로 확인
초기세팅2까지 완료한 소스는 여기에서 확인 !
github.com/yulfsong/tistory-code/tree/master/second
yulfsong/tistory-code
Contribute to yulfsong/tistory-code development by creating an account on GitHub.
github.com
'프로그래밍 > 프론트엔드 방랑기' 카테고리의 다른 글
| [ Vanilla JS] 자바스크립트만으로 To do List 만들기 (0) | 2021.01.16 |
|---|---|
| [Thymeleaf] Thymeleaf template layout으로 초기 세팅하기2 (0) | 2021.01.11 |
