블로그 프로젝트 1

Jan 31, 2024
블로그 프로젝트 1

선생님 GIT에서 디자인 코드 가져오기

https://github.com/codingspecialist/springboot-blog-v4

[ GIT 코드 가져오는 법 기억이 안난다면 이쪽 ]

 

application-dev.yml 과 application-prod.yml

notion image
개발을 할 때는 application-dev.yml 설정 파일을 사용하고, 배포를 할 때는 application-prod.yml 설정 파일을 사용한다.
💡
개발을 할 때의 설정과 배포를 할 때의 설정이 다르구나!

[ application-dev.yml ]

notion image
port: 8080 인 것 확인

[ application-prod.yml ]

notion image
prod는 port 5000 으로 바꿔줌
 

[ application.yml 에서 설정 적용하기 ]

notion image
notion image
prod 되어 있는걸 dev로 바꾸면, application-dev.yml 설정 파일이 적용 된다. 이제 스프링이 시작하면 dev.yml에 있는 설정이 작동 될 것!
notion image
notion image
원래는 이쪽에 no active profile set 이 떴었다. 그러나 yml 파일의 설정을 dev로 바꾸자, [ profile is active : "dev" ] 라고 뜨는 것 확인!
notion image
application.yml을 - prod로 바꿨더니 이번엔 포트 5000으로 적용되어 있는거 확인
 

View 파일 우선 살펴보기 (우린 지금 mustache)

notion image
 

 
notion image
우리는 트위터에서 만들어준 css를 사용할 것이기 때문에 이 친구들의 클래스를 공부해야 한다 CDN이 뭐였더라? (링크)
 

[ mustache 문법 ] - Header와 Footer를 고정시키자!

notion image
{{> 폴더/파일명}} 만약, {{> layout/header}} 라고 하자. 그럼 이 문법을 위에 작성한다면, header를 매번 풀로 적지 않아도 헤더 파일을 가져와 적용할 수 있다. {{> layout/header}} 이렇게만 작성했는데, 브라우저를 열어보면 헤더가 자동 적용 되어있음! 고정으로 디자인 시키는 것!
💡
mustache는 뷰 리졸버가 있기 때문에 파일명만 적어도 찾을 수 있다!
 

 
💡
프런트 공부는 w3school ~
 
 
Share article

codingb