Spring을 배우면서 무엇을 만들어 볼까 고민하던 중, 위치정보를 기반으로 주변의 음식점 정보를 가져오고, 그중 조건에 부합하는 음식점을 찾아서 제공해주는 웹 서비스를 만들어 보려고 한다.
난생 처음 만들어보는 웹 서비스이기 떄문에 얼마나 걸릴지도 모르고, 중간에 엄청난 문제를 만나서 중단될 수도 있지만, 일단 부딪혀보는게 중요하다 생각해서 시작해 본다.
핵심 기능은, 네이버 지도 API 와 geolocation을 사용하여 사용자의 위치를 특정하여 지도에 찍어주고, 특정 키워드(불고기, 국밥) 등을 검색하면 주변 음식점을 검색하여 거리정보와 리뷰 별점 점수, 리뷰 수 등을 가져와서 최적의 음식점 몇 개를 리스트로 띄워주는 것이 될 것이다.
얼마나 걸릴지는 모르겠지만 일단 시작!
먼저 Spirng boot 를 통해 프로젝트를 생성할 것이다.
start.spring.io/ 이곳에 접속하면
이렇게 스프링 부트 프로젝트를 간편하게 시작할 수 있는 페이지가 나온다. 여기서 여러가지 기본 설정들을 할 수 있다.
적당히 설정해주고 generate를 누르면 프로젝트 생성
이렇게 압축파일에 폴더 형식으로 있는데 이 프로젝트를 IntelliJ에서 Open 해주면 된다.
인텔리제이에서 오픈시 이렇게 기본적인 구조가 다 갖추어져 있다!
HELP.md
.gradle
build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/
### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
bin/
!**/src/main/**/bin/
!**/src/test/**/bin/
### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/
### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/
### VS Code ###
.vscode/
.gitignore 파일도 작성되어 있어서 쓸데없는 파일들이 git에 푸쉬되지 않도록 도와준다.
곧바로 페이지에서 사용할 레이아웃을 짜본다.
페이지는 별거 없이 이런 구성으로 제작하기로 했다. 많은 기능이 있는 서비스도 아니고, 기능의 구현에 초점을 맞춰야 하기 때문에... 나중에 필요하다면 수정하겠지만 지금은 일단 이정도로 만든다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<Title>테스트 타이틀</Title>
</head>
<body>
<div class="wrap">
<!-- HEADER -->
<div class="header">
<span>이곳은 상단 헤더 영역 입니다. 색깔은 주황</span>
</div>
<!-- MIDDLE -->
<div class="middle">
<div class="middle-left">
<span>이곳은 중앙입니다. 색깔은 파랑</span>
</div>
<div class="middle-right">
<span>이곳은 사이드바입니다. 색깔은 파랑</span>
</div>
</div>
<div style="clear:both"></div>
<div class="footer">
<span>이곳은 하단 푸터 영역 입니다. 색깔은 초록</span>
</div>
</div>
</body>
</html>body{
margin: 0;
}
.wrap{
width: 100vw;
height: 100vh;
margin: auto;
background-color: pink;
position: relative;
text-align: center;
}
.header{
height: 15vh;
background: orange;
}
.middle{
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
}
.middle-left{
height: 60vh;
width: 40vw;
background-color: aqua;
margin-right: 1vw;
float: left;
}
.middle-right{
height: 60vh;
width: 10vw;
background-color: blue;
float: left;
}
.footer{
height: 15vh;
width: 100vw;
background: green;
position: absolute;
left: 0;
bottom: 0;
}
html과 css로 기본적인 틀을 만들었다. 각각의 div영역을 구분하기 위해 배경색을 먼저 적용해 주었다. height와 weight 속성은 px로 지정하면 나중에 뭔가 큰 문제가 일어날 것 같아서 vh 와 vw로 지정하여 어느정도(?) 반응형으로 만들었다.
대충 이렇게 만들었다.
이제 이것들을 프로젝트 폴더에 추가한다.
먼저 main/java/com.david.matjipfind 폴더 내에 controller 패키지 생성 후 mainController 를 생성한다.
package com.david.matjipfind.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class mainController {
@GetMapping("/")
public String main(Model model){
return "main";
}
}
내용은 그냥 기본 페이지 접속시 main.html로 연결되도록 설정만 해 둔다.
이제 리소스 폴더 내의 static에 style.css 를 위치해주고, templates 안에 main.html을 위치해주면 된다.
thymeleaf에서는 css를 기본적으로 /resources/static 폴더 내의 경로로 인식한다.
이렇게 해주고 main메소드를 실행시키고 localhost:8080에 접속해보면 성공적으로 레이아웃이 뜬다.
'Projects > matjipfind' 카테고리의 다른 글
| Google 로그인 기능과 DB 제작 (0) | 2021.01.18 |
|---|---|
| 내 위치 직접선택 기능, 최대 검색 거리, 네이버 검색 기능 (0) | 2021.01.16 |
| 키워드 검색기능과 리스트 얻기 기능 (1) | 2021.01.15 |
| 카카오맵 API로 변경, 내위치 가져오기 기능 (0) | 2021.01.14 |
| 네이버 클라우드 플랫폼 가입과 지도 넣기 (0) | 2021.01.13 |
댓글