안녕하세요 후르륵짭짭 입니다.
2020/10/12 - [Vapor] - Vapor ) Vapor와 Leaf로 웹 사이트 만들어보자 1부
Vapor ) Vapor와 Leaf로 웹 사이트 만들어보자 1부
안녕하세요 후르륵짭짭 입니다. 오늘은 Vapor에 대해서 알아보도록 하겠습니다. 내용이 기니깐 스크롤 압박 조심하세요!!! www.youtube.com/watch?v=pSgWwyj1gX4&t=3181s 일단 이분의 강의를 보고 어느 정도 따
hururuek-chapchap.tistory.com
이전에 Vapor에 Leaf를 의존성에 추가하는 방법과 간단한 웹사이트 출력 까지 해봤습니다.
이번에는 Leaf를 좀 더 세세하게 다루는 방법을 해보도록 하겠습니다.
** 동적인 웹 사이트를 만들어 보자 **
우리는 내용을 동적으로 보여줘야하는데, 이전에 배운대로 한다면 정적인 웹사이트 밖에 안 됩니다.
그래서 위에 이미지 처럼 매번 정보가 바뀔 수 있도록 구현 해야하기 때문에서 서버에서 템플릿 언어로 정보를 보내줘야합니다.
그럼 이전에 우리가 했던 "home.leaf" 파일을 수정 해보도록 하겠습니다.
app.get { req -> EventLoopFuture<View> in
print("publicDirectory : ", app.directory.publicDirectory)
let name : String = "ChapChap"
return req.view.render("home", ["name": name])
}일단 이렇게 새로운 변수 name을 만들고 거기에 원하는 문자열을 넣어주세요.
그리고 req.view.render("home", 딕셔너리 형태로 정보 송신)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, World</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
<h1>I'm Vapor & #(name)</h1>
</body>
</html>그리고 이렇게 HTML 을 만들어주면 웹 사이트에 name 변수에 들어간 것이 나올 것 입니다.
Vapor -> 템플릿으로 정보를 송신 할 때 #(변수 이름) 이렇게 해주면 됩니다.
따라서 Vapor에서 딕셔너리 형태로 정보를 템플릿으로 송신하게 되는 겁니다!!!
그러면 좀 더 심도 있는 내용을 다뤄보도록 하겠습니다.
Struct를 사용해서 다양한 정보를 템플릿으로 전송 하고 싶을 때는, 쫌 더 복잡한 과정을 거쳐야합니다.
일단 위에서 했던거 처럼 req.view.render("home", ["name" : 보낼정보 ]) 이렇게 할 수가 없습니다.
왜냐하면 Leaf 4.0 버전에서는 Encodable을 이용해서 압축해서 보내주도록 변경 됐습니다.
//Model.swift
struct CupCake : Content {
let id : Int?
let name : String
let description : String
let price : Int
}
struct Context: Content {
var name : String
var items : [CupCake]
}
일단 Model.swift를 App 폴더 밑에 만들어 주세요!! 그리고 위에 처럼 만들어주세요!
템플릿에 구조체 정보를 보내기 위해서는 Codable 형식을 가져야합니다. 따라서 Vapor에서 제공하는 Content를 상속 받도록 했습니다.
그러면 저 구조체를 보면 Context는 이름과 CupCake 자료형을 가지는 item 변수가 있는 것을 확인 할 수 있습니다.
따라서 Context 안에 CupCake를 포함 되어 있고 Context를 보내주면 되는 겁니다!
//routes.swift
app.get("cupcake") { (req) -> EventLoopFuture<View> in
let context = Context(
name : "ChapChap",
items: [
CupCake(id: 1, name: "Vanila", description: "Good", price: 3),
CupCake(id: 2, name: "Cocolate", description: "Not Bad", price: 1),
CupCake(id: 3, name: "Cheez", description: "Good", price: 5)
]
)
return req.view.render("cupcake", context)
}그리고 이제 이렇게 정보를 넣어줘서 req.view.render("cupcake", context)를 보내주면 됩니다!!
그런데 context로 보내줬는데 어떻게 leaf가 읽는지 궁금해 할 수 있는데, 이유는 Context 구조체가 Content(Codable)로 해독 되기 때문 입니다. 그래서 결국 JSON과 같은 딕셔너리 형태로 변형이 되게 되는 겁니다!
이제 Leaf 코드를 보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CupeCake Info</title>
</head>
<body>
<h1>#(name) : CupeCake Here</h1>
<ul>
#for(item in items):
<li>
#(item.name)
#if(item.price < 2):
<p> #(item.price) is cheap</p>
#elseif(item.price > 3):
<p> #(item.price) is 안좋다</p>
#else:
<p> #(item.price) is good</p>
#endif
#if(item.description == "Good"):
<p> good~ </p>
#endif
</li>
#endfor
</ul>
</body>
</html>
이렇게 되면 위에 처럼 결과가 잘 나오게 될 것 입니다!
그럼 하나씩 알아보도록 하겠습니다.
이 Leaf 코드에서는 조건문(if ellse) 와 반복문(for)가 사용 되었습니다.
그럼 일단 For문 부터 보도록 하겠습니다.
( Leaf 4.0은 Leaf 3.0이랑 코드 작성이 달라져서 엄청 고생 했습니다 ㅠㅠ )
#for(요소 in 배열):
#endfor
이렇게 해줘야합니다.
그래서 요소에는 그냥 아무 변수나 넣어주고 배열에는 Context 밑에 있는 items 랑 똑같은 이름으로 보내주면 됩니다!
그럼 IF ELSE 문을 보도록 하겠습니다.
#if(조건):
#elseif(조건):
#else:
#endif이렇게 해줘야 합니다. 조건에는 일반적인 코드 조건이랑 같습니다!
자세한 정보는 아래 링크를 참고 해주세요~~!!
theswiftdev.com/how-to-create-your-first-website-using-vapor-4-and-leaf/
How to create your first website using Vapor 4 and Leaf? - The.Swift.Dev.
Let's build a web page in Swift. Learn how to use the brand new template engine of the most popular server side Swift framework.
theswiftdev.com
지금까지 Leaf의 아주 기본적인 문법을 공부했습니다. 나중에 좀 더 깊게 공부하면 Leaf 언어에 대해 좀더 세세하게 다뤄보도록 하겠습니다.
그럼 이제는 Leaf에서 이미지 파일과 CSS 파일을 읽어 오는 것을 알아보도록 하겠습니다.
1편에서 Public 폴더와 images , styles 폴더를 생성 했습니다.
그리고 이미지는 images 폴더에 넣고 styles 폴더에는 css 파일을 넣어줍니다.
이렇게 넣어주세요!!!
그리고 leaf에서 이미지를 불러 오기 위해서는
<img align="right" width="204" height="153" src="images/test.png" alt="photo">이렇게 <img src="images/파일명"> 이렇게 해줍니다!!
(제가 HTML을 공부는 해봤지만 ㅎㅎㅎㅎ 미숙한 부분이 많습니다)
만약에 css 파일을 불러오고 싶다면
<link rel="stylesheet" type="text/css" href="styles/style.css" />이렇게 link를 사용해서 불러 올 수 있습니다.
nasn.tistory.com/66?category=764553
[HTML / CSS] CSS 기초 1. Style과 CSS
Style Style은 html의 태그들에 디자인을 입히는 과정으로, html 태그들이 틀을 담당했다면, style은 그 태그들을 꾸미는 작업을 한다. 앞으로의 글들에서 소개할 Style 속성으로 Web을 꾸밀 것이다. style��
nasn.tistory.com
(자세한 설명은 링크에 있습니다.)
//style.css
h1 {
color: blue;
}저는 이렇게 해줬습니다!!!
그러면 아래 처럼 이미지가 나오게 되고 h1 태그를 가진 것은 파랑색이 됩니다!!
지금까지 Leaf로 간단한 웹사이트를 만드는 방법에 대해서 알아 봤습니다!
다음에는 POST와 데이터 베이스를 저장하는 법에 대해 알아보도록 하겠습니다!!
'Server > Vapor - ServerSide' 카테고리의 다른 글
| Vapor) Heroku를 사용해서 웹 사이트를 만들어보자 (0) | 2020.10.26 |
|---|---|
| Vapor ) Vapor과 PostgreSQL을 이용해서 READ를 구현하자! (0) | 2020.10.16 |
| Vapor ) Postgresql을 사용해서 DataBase를 구축하자! (0) | 2020.10.13 |
| Vapor ) Vapor와 Leaf로 웹 사이트 만들어보자 1부 (0) | 2020.10.12 |
| Vapor ) Vapor - Swift의 ServerSide 언어 (0) | 2020.10.08 |
댓글