BoxLang 종합 프로젝트 – 포트폴리오용 웹 앱 만들기 (20강)
BoxLang 종합 프로젝트 – 포트폴리오용 웹 앱 만들기
웹 개발자로서 자신만의 **포트폴리오 웹 애플리케이션**을 만드는 것은 매우 중요한 일입니다. 이를 통해 자신이 어떤 기술을 사용할 수 있는지, 어떤 프로젝트를 수행했는지 명확히 보여줄 수 있습니다. 이번 강의에서는 **BoxLang**을 활용해 포트폴리오용 웹 애플리케이션을 만드는 과정을 종합적으로 배워보겠습니다.
1. 포트폴리오 웹 앱의 중요성
**포트폴리오 웹 앱**은 자신이 개발한 웹 애플리케이션을 보여주는 중요한 도구입니다. 취업 면접이나 프리랜서 작업을 구할 때, 실제로 만들었던 프로젝트들을 쉽게 확인할 수 있도록 만드는 것이 중요합니다. 이 앱을 통해 자신의 **기술 스택**, **프로그래밍 능력**, **문제 해결 능력** 등을 잘 보여줄 수 있습니다.
이번 강의에서는 **BoxLang**을 사용하여, 간단한 포트폴리오용 웹 애플리케이션을 만들어보겠습니다. 이 앱은 여러 프로젝트와 자신을 소개하는 정보를 포함한 웹 앱이 될 것입니다.
2. 프로젝트 개요
우리는 **BoxLang**을 이용해 간단한 **포트폴리오 웹 애플리케이션**을 만들 것입니다. 이 애플리케이션은 다음과 같은 기능을 제공합니다:
- 소개 페이지: 본인 소개와 이력을 보여주는 페이지
- 프로젝트 목록: 자신이 진행했던 프로젝트와 해당 프로젝트의 설명을 보여주는 페이지
- 연락처: 사용자와 연락을 주고받을 수 있는 간단한 폼
우리는 이 애플리케이션을 통해 **BoxLang**의 **웹 서버**, **템플릿 엔진**, **폼 처리** 등의 기능을 실습할 것입니다.
3. BoxLang 웹 서버 설정
우리가 만들 애플리케이션은 **BoxLang 웹 서버**를 통해 사용자에게 제공됩니다. 웹 서버는 8080 포트에서 실행되며, 각 페이지를 라우팅하여 사용자에게 HTML 페이지를 보여주게 됩니다. 아래는 **BoxLang**으로 웹 서버를 설정하는 코드입니다.
import BoxLang.Web.Server
// 웹 서버 설정
func startServer() {
var server = WebServer.create(8080) // 8080 포트로 웹 서버 시작
// 루트 페이지 (소개 페이지)
server.get("/", func(request, response) {
response.render("index.html") // 소개 페이지 렌더링
})
// 프로젝트 페이지
server.get("/projects", func(request, response) {
response.render("projects.html") // 프로젝트 목록 페이지 렌더링
})
// 연락처 페이지
server.get("/contact", func(request, response) {
response.render("contact.html") // 연락처 페이지 렌더링
})
server.start()
println("포트 8080에서 웹 서버 실행 중...")
}
startServer()
위 코드는 **BoxLang**으로 간단한 웹 서버를 설정하는 예시입니다. 각 라우트는 특정 URL에 대해 HTML 파일을 렌더링합니다. 이 서버를 통해 다양한 페이지를 사용자에게 제공할 수 있습니다.
4. HTML 템플릿 구성
웹 애플리케이션의 **템플릿 엔진**을 사용하면 HTML 파일을 동적으로 렌더링할 수 있습니다. **BoxLang**에서는 HTML 파일을 **템플릿 엔진**을 통해 데이터를 동적으로 삽입할 수 있습니다.
4.1 소개 페이지 (index.html)
소개 페이지는 자신을 소개하는 정보를 담고 있는 페이지입니다. 다음은 **index.html**의 예시입니다.
나의 포트폴리오
안녕하세요! 저는 웹 개발자입니다.
저는 다양한 웹 애플리케이션을 개발해왔으며, 기술적인 문제 해결을 즐깁니다.
저의 최신 프로젝트를 확인해보세요!
프로젝트 목록 보기
위 코드에서는 간단한 **HTML**을 사용해 본인을 소개하고, 프로젝트 페이지로 이동할 수 있는 링크를 제공합니다.
4.2 프로젝트 목록 페이지 (projects.html)
프로젝트 목록 페이지는 자신이 진행한 프로젝트들을 보여주는 페이지입니다. 이 페이지는 각 프로젝트의 설명을 포함하고 있습니다.
내 프로젝트들
내 프로젝트 목록
-
프로젝트 1: BoxLang 기반 웹 애플리케이션 개발
이 프로젝트는 BoxLang을 사용하여 간단한 웹 서버를 구축한 예제입니다.
-
프로젝트 2: 온라인 쇼핑몰 플랫폼
이 프로젝트는 React와 Node.js를 사용하여 온라인 쇼핑몰을 만든 웹 애플리케이션입니다.
연락하기
프로젝트 목록 페이지는 **HTML**을 통해 자신이 진행했던 프로젝트들을 **목록 형식**으로 보여줍니다. 각 프로젝트마다 설명을 추가하여 자신이 어떤 프로젝트를 했는지 상세히 소개합니다.
4.3 연락처 페이지 (contact.html)
연락처 페이지는 사용자가 자신에게 연락할 수 있도록 하는 간단한 폼을 포함합니다. 이 폼은 **이메일 주소**, **메시지** 등의 필드를 포함하며, 사용자가 입력한 정보를 처리하는 기능이 필요합니다.
연락처
저에게 연락 주세요!
연락처 페이지는 **HTML 폼**을 사용해 이메일과 메시지를 입력받습니다. 사용자가 입력한 데이터를 처리하여 관리자에게 전송하거나, 저장하는 기능을 추가할 수 있습니다.
5. 데이터 처리 및 폼 제출
폼을 제출하면 서버에서 데이터를 처리해야 합니다. 예를 들어, 연락처 페이지에서 사용자가 메시지를 제출하면 서버가 이를 받아서 처리하는 과정이 필요합니다. 아래는 **BoxLang**으로 폼 데이터를 처리하는 예시입니다.
server.post("/send-message", func(request, response) {
var email = request.form("email")
var message = request.form("message")
// 데이터 처리 (예: 이메일 전송, 데이터베이스 저장 등)
println("메시지가 접수되었습니다. 이메일: " & email & ", 메시지: " & message)
// 사용자에게 감사 메시지 반환
response.send("메시지가 성공적으로 전송되었습니다.")
})
위 코드는 사용자가 입력한 **이메일**과 **메시지**를 서버에서 처리하는 예시입니다. 이 데이터를 활용하여 **이메일 전송**이나 **데이터베이스 저장** 등의 작업을 할 수 있습니다.
6. 마무리 및 포트폴리오 웹 앱 배포
이번 강의에서는 **BoxLang**을 사용하여 **포트폴리오용 웹 애플리케이션**을 만드는 방법을 배웠습니다. 웹 서버 설정부터 **HTML 템플릿** 구성, **폼 처리**까지의 전반적인 과정을 실습했습니다. 이를 바탕으로 자신만의 포트폴리오 웹 앱을 만들고, **Heroku**나 **AWS**와 같은 클라우드 플랫폼에 배포하여 실제로 사용할 수 있도록 만들 수 있습니다.
**BoxLang**을 활용한 웹 애플리케이션 개발은 매우 직관적이고 효율적입니다. 이를 통해 다양한 프로젝트를 포트폴리오에 추가하고, 개발자로서 자신을 더욱 돋보이게 할 수 있습니다.