파이썬으로 만드는 개인 포트폴리오 웹사이트: 취업 준비의 필수품 🚀

안녕하세요, 여러분! 오늘은 정말 꿀잼 가득한 주제로 찾아왔어요. 바로 파이썬으로 개인 포트폴리오 웹사이트를 만드는 방법에 대해 알아볼 거예요. 취준생 여러분들, 귀 쫑긋 세우고 들어보세요! 이거 완전 대박 꿀팁이에요. 😎

요즘 취업 시장이 얼마나 치열한지 다들 아시죠? 그래서 우리는 뭔가 특별한 걸 보여줘야 해요. 그 특별한 무언가가 바로 개인 포트폴리오 웹사이트랍니다! 이걸 파이썬으로 직접 만들면 얼마나 멋질까요? 개발 실력도 뽐내고, 자신만의 개성도 보여줄 수 있는 일석이조의 기회라고요! 👍

이 글에서는 파이썬을 사용해 개인 포트폴리오 웹사이트를 만드는 과정을 아주 꼼꼼하게 설명해드릴 거예요. 초보자부터 중급자까지 모두가 이해할 수 있도록 쉽고 재미있게 풀어낼 테니 걱정 마세요. 그리고 혹시 도중에 막히는 부분이 있다면, 재능넷(https://www.jaenung.net)에서 파이썬 고수들의 도움을 받을 수 있다는 것도 잊지 마세요! 재능넷에는 다양한 분야의 전문가들이 여러분의 질문을 기다리고 있답니다. 😉

자, 그럼 이제 본격적으로 시작해볼까요? 파이썬으로 개인 포트폴리오 웹사이트를 만드는 신나는 여정을 함께 떠나봐요! 🚀

1. 왜 파이썬으로 포트폴리오 웹사이트를 만들어야 할까요? 🤔

여러분, 잠깐만요! "왜 하필 파이썬이야?"라고 생각하고 계신 분들 계시죠? 제가 그 이유를 낱낱이 파헤쳐 드릴게요! 😁

쉽고 간결한 문법: 파이썬은 영어 문장 같은 직관적인 문법을 가지고 있어요. 코딩 초보자도 쉽게 배울 수 있답니다. "Hello, World!"를 출력하는 코드 한 줄만 봐도 알 수 있죠!
```
print("Hello, World!")
```
간단하죠? 이렇게 쉬운 문법 덕분에 여러분은 복잡한 문법 대신 아이디어 구현에 집중할 수 있어요.
풍부한 라이브러리: 파이썬은 정말 다양한 라이브러리를 제공해요. 웹 개발을 위한 Django, Flask부터 데이터 분석을 위한 Pandas, 머신러닝을 위한 TensorFlow까지! 여러분의 포트폴리오에 이런 고급 기술을 적용하면 얼마나 멋질까요? 😎
높은 생산성: 파이썬은 다른 언어에 비해 코드 작성 속도가 빠르고, 디버깅도 쉬워요. 그만큼 아이디어를 빠르게 구현하고 테스트할 수 있죠. 시간은 금이라고 하잖아요? 파이썬으로 시간을 절약하세요!
다재다능함: 웹 개발, 데이터 분석, 인공지능, 게임 개발 등 파이썬으로 할 수 없는 게 없어요. 여러분의 포트폴리오에 다양한 프로젝트를 담을 수 있다는 뜻이죠. 다재다능한 개발자로 어필할 수 있는 기회예요! 👨‍💻👩‍💻
커뮤니티 지원: 파이썬 커뮤니티는 정말 크고 활발해요. 문제가 생겼을 때 해결책을 쉽게 찾을 수 있죠. 재능넷 같은 플랫폼에서도 파이썬 관련 질문에 대한 답변을 쉽게 얻을 수 있어요. 여러분 혼자가 아니라는 걸 기억하세요! 💪

이제 파이썬의 매력에 푹 빠지셨나요? 그럼 이제 본격적으로 포트폴리오 웹사이트 제작을 시작해볼까요? 여러분의 창의력을 마음껏 발휘할 준비 되셨나요? Let's go! 🚀

💡 Pro Tip: 파이썬을 처음 접하는 분들은 걱정하지 마세요! 온라인에 무료로 제공되는 파이썬 튜토리얼이 정말 많아요. 코딩에 대한 열정만 있다면 누구나 파이썬 마스터가 될 수 있답니다. 화이팅! 💪

2. 개발 환경 설정: 첫 걸음부터 완벽하게! 🛠️

자, 이제 본격적으로 개발을 시작해볼까요? 그 전에 먼저 개발 환경을 설정해야 해요. 걱정 마세요, 어렵지 않아요! 제가 하나하나 친절하게 설명해드릴게요. 😊

2.1 파이썬 설치하기 🐍

먼저 파이썬을 설치해야겠죠? 파이썬 공식 웹사이트(https://www.python.org)에 가서 최신 버전을 다운로드하세요. 설치 과정은 정말 간단해요. '다음'만 계속 눌러주면 돼요. 근데 잠깐! 'Add Python to PATH' 옵션을 꼭 체크해주세요! 이거 안 하면 나중에 골치 아파질 수 있어요. 😅

2.2 가상 환경 설정하기 🏝️

가상 환경이 뭐냐고요? 쉽게 말해서 프로젝트마다 독립된 작업 공간을 만드는 거예요. 이렇게 하면 프로젝트별로 필요한 라이브러리를 따로 관리할 수 있어서 정말 편리해요. 터미널(맥) 또는 명령 프롬프트(윈도우)를 열고 다음 명령어를 입력해보세요:

python -m venv myportfolio_env

이렇게 하면 'myportfolio_env'라는 가상 환경이 만들어져요. 이제 이 가상 환경을 활성화해볼까요?

윈도우의 경우:

myportfolio_env\Scripts\activate

맥/리눅스의 경우:

source myportfolio_env/bin/activate

터미널 앞에 (myportfolio_env)라고 뜨면 성공이에요! 🎉

2.3 필요한 라이브러리 설치하기 📚

이제 우리 프로젝트에 필요한 라이브러리들을 설치할 거예요. 파이썬에는 pip라는 편리한 패키지 관리자가 있어요. 이걸 이용해서 필요한 라이브러리를 설치할 거예요.

pip install flask
pip install flask-sqlalchemy
pip install pillow

이렇게 하면 Flask(웹 프레임워크), SQLAlchemy(데이터베이스 관리), Pillow(이미지 처리) 라이브러리가 설치돼요. 우리 포트폴리오 웹사이트를 만드는 데 꼭 필요한 녀석들이죠! 😎

2.4 코드 에디터 선택하기 ✏️

마지막으로, 코드를 편집할 에디터가 필요해요. 저는 개인적으로 Visual Studio Code를 추천해요. 무료인데다가 기능도 많고 사용하기 편리하거든요. 하지만 PyCharm, Sublime Text 같은 다른 에디터들도 좋아요. 본인이 가장 편하게 느끼는 걸로 선택하세요!

🔥 Hot Tip: 개발 환경 설정이 어렵게 느껴진다면, 재능넷에서 파이썬 개발 환경 설정에 대한 도움을 요청해보는 것도 좋은 방법이에요. 경험 많은 개발자들이 여러분의 환경에 맞는 최적의 설정 방법을 알려줄 거예요. 망설이지 말고 물어보세요! 🙋‍♂️🙋‍♀️

자, 이제 개발 환경 설정이 끝났어요! 어때요? 생각보다 별거 아니죠? 이제 우리는 진짜 코딩을 시작할 준비가 됐어요. 다음 섹션에서는 Flask를 이용해 웹사이트의 기본 구조를 만들어볼 거예요. 기대되지 않나요? Let's rock! 🤘

3. Flask로 웹사이트 기본 구조 만들기 🏗️

자, 이제 진짜 재미있는 부분이 시작됩니다! Flask를 사용해서 우리 포트폴리오 웹사이트의 뼈대를 만들어볼 거예요. Flask가 뭐냐고요? 간단히 말해서, 파이썬으로 웹사이트를 쉽게 만들 수 있게 해주는 도구예요. 마치 레고 블록처럼 웹사이트의 각 부분을 조립할 수 있게 해준답니다. 😊

3.1 Flask 앱 생성하기 🎈

먼저, 프로젝트 폴더에 'app.py'라는 파일을 만들어주세요. 이 파일이 우리 웹사이트의 심장 역할을 할 거예요. 그리고 다음 코드를 입력해볼까요?

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

if __name__ == '__main__':
    app.run(debug=True)

우와! 벌써 웹사이트의 기본 구조가 만들어졌어요. 이 코드가 하는 일을 간단히 설명해드릴게요:

from flask import Flask, render_template: Flask와 필요한 기능을 가져와요.
app = Flask(__name__): Flask 앱을 생성해요.
@app.route('/'): 웹사이트의 홈페이지 주소를 설정해요.
def home():: 홈페이지에서 실행될 함수를 정의해요.
return render_template('home.html'): 'home.html' 파일을 화면에 보여줘요.
app.run(debug=True): 개발 모드로 앱을 실행해요.

3.2 HTML 템플릿 만들기 🎨

이제 'templates' 폴더를 만들고, 그 안에 'home.html' 파일을 생성해주세요. 이 파일에 우리 웹사이트의 내용을 작성할 거예요. 다음과 같이 기본 구조를 만들어볼까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 포트폴리오</title>
</head>
<body>
    <h1>안녕하세요, 제 포트폴리오에 오신 것을 환영합니다!</h1>
    <p>여기에 자기소개를 적어주세요.</p>
</body>
</html>

짜잔! 🎉 이제 기본적인 웹페이지가 만들어졌어요. 아직은 좀 심심해 보이지만, 걱정 마세요. 이제부터 하나씩 꾸며나갈 거예요!

3.3 웹사이트 실행해보기 🚀

자, 이제 우리가 만든 웹사이트를 실행해볼까요? 터미널에서 다음 명령어를 입력해보세요:

python app.py

그리고 웹 브라우저를 열어 'http://localhost:5000'으로 접속해보세요. 와우! 우리가 만든 웹사이트가 실제로 동작하고 있어요! 어때요, 너무 신기하지 않나요? 😆

💡 Tip: Flask의 debug 모드를 켜놓으면(app.run(debug=True)) 코드를 수정할 때마다 서버를 재시작하지 않아도 변경 사항이 자동으로 적용돼요. 개발할 때 정말 편리하답니다!

3.4 추가 페이지 만들기 📄

포트폴리오 웹사이트니까 여러 페이지가 필요하겠죠? 'projects.html'과 'contact.html' 페이지도 만들어볼까요? 'app.py'에 다음 코드를 추가해주세요:

@app.route('/projects')
def projects():
    return render_template('projects.html')

@app.route('/contact')
def contact():
    return render_template('contact.html')

그리고 'templates' 폴더에 'projects.html'과 'contact.html' 파일을 만들어주세요. 각 파일에 적절한 HTML 코드를 작성하면 돼요. 예를 들어:

<!-- projects.html -->
<h1>내 프로젝트들</h1>
<ul>
    <li>프로젝트 1</li>
    <li>프로젝트 2</li>
    <li>프로젝트 3</li>
</ul>

<!-- contact.html -->
<h1>연락처</h1>
<p>Email: your.email@example.com</p>
<p>GitHub: github.com/yourusername</p>

이제 우리 웹사이트에 여러 페이지가 생겼어요! 🎊

3.5 네비게이션 메뉴 만들기 🧭

페이지 간 이동을 쉽게 하기 위해 네비게이션 메뉴를 만들어볼까요? 'home.html'에 다음과 같은 코드를 추가해주세요:

<nav>
    <ul>
        <li><a href="{{ url_for('home') }}">홈</a></li>
        <li><a href="{{ url_for('projects') }}">프로젝트</a></li>
        <li><a href="{{ url_for('contact') }}">연락처</a></li>
    </ul>
</nav>

이 네비게이션 메뉴를 다른 페이지에도 복사해주세요. 이제 페이지 간 이동이 훨씬 쉬워졌죠? 👍

🌟 Extra Tip: Flask의 템플릿 상속 기능을 사용하면 모든 페이지에 공통으로 들어가는 요소(예: 네비게이션 메뉴)를 더 효율적으로 관리할 수 있어요. 이 기능에 대해 더 알고 싶다면, 재능넷에서 Flask 전문가에게 물어보는 것도 좋은 방법이에요! 🤓

자, 이제 우리 포트폴리오 웹사이트의 기본 구조가 완성됐어요! 어때요? 생각보다 어렵지 않죠? 이제 우리는 웹 개발자의 길로 한 걸음 더 나아갔어요. 👣 다음 섹션에서는 이 웹사이트를 더 멋지게 꾸미는 방법에 대해 알아볼 거예요. CSS와 JavaScript의 마법을 기대해주세요! ✨

4. CSS로 웹사이트 스타일링하기 💅

자, 이제 우리 웹사이트의 뼈대는 만들어졌어요. 하지만 아직 좀 심심해 보이지 않나요? 그래서 준비했습니다! CSS의 마법으로 우리 웹사이트를 화려하게 꾸며볼 거예요. CSS가 뭐냐고요? 간단히 말해서, 웹페이지를 예쁘게 꾸미는 언어예요. 마치 웹사이트의 메이크업 아티스트 같은 존재죠! 💄

4.1 CSS 파일 만들기 📁

먼저, 'static' 폴더를 만들고 그 안에 'style.css' 파일을 생성해주세요. 이 파일에 우리 웹사이트의 스타일을 정의할 거예요. 그리고 HTML 파일의

태그 안에 다음 코드를 추가해주세요:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

이렇게 하면 HTML 파일과 CSS 파일이 연결돼요!

4.2 기본 스타일 설정하기 🎨

'style.css' 파일에 다음과 같은 기본 스타일을 추가해볼까요?

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3 {
    color: #2c3e50;
}

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

.project {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.contact-info {
    background-color: #e8f4f8;
    padding: 15px;
    border-radius: 5px;
}

와우! 이제 우리 웹사이트가 훨씬 세련되어 보이네요. 😎

4.3 반응형 디자인 적용하기 📱

요즘은 스마트폰으로 웹서핑 하는 사람들이 많죠? 그래서 우리 웹사이트도 모바일 친화적으로 만들어야 해요. CSS의 미디어 쿼리를 사용해볼까요?

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    .project {
        padding: 10px;
    }
}

이렇게 하면 화면 크기가 작아졌을 때 레이아웃이 자동으로 조정돼요. 스마트폰에서도 우리 웹사이트가 멋지게 보일 거예요! 📱✨

4.4 애니메이션 효과 추가하기 🎬

조금 더 동적인 느낌을 주고 싶다면 CSS 애니메이션을 사용해볼 수 있어요. 예를 들어, 프로젝트 목록에 마우스를 올렸을 때 살짝 커지는 효과를 넣어볼까요?

.project {
    transition: transform 0.3s ease;
}

.project:hover {
    transform: scale(1.05);
}

짜잔! 이제 프로젝트 목록에 마우스를 올리면 살짝 커지는 효과가 생겼어요. 너무 귀엽지 않나요? 😍

4.5 CSS 변수 사용하기 🎭

웹사이트의 색상 테마를 쉽게 변경하고 싶다면 CSS 변수를 사용해보는 건 어떨까요? CSS 파일 맨 위에 다음과 같이 변수를 정의해볼게요:

:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --background-color: #f9f9f9;
    --text-color:  #333;
}

body {
    color: var(--text-color);
    background-color: var(--background-color);
}

h1, h2, h3 {
    color: var(--secondary-color);
}

a {
    color: var(--primary-color);
}

이렇게 하면 나중에 색상 테마를 변경하고 싶을 때 변수 값만 바꾸면 돼요. 편리하죠? 🎨

💖 Style Tip: CSS는 정말 무궁무진한 가능성을 가진 언어예요. 더 멋진 디자인을 원한다면, 재능넷에서 CSS 전문가의 도움을 받아보는 것도 좋은 방법이에요. 여러분의 포트폴리오를 더욱 돋보이게 만들 수 있을 거예요! ✨

자, 이제 우리 웹사이트가 훨씬 더 멋져졌어요! CSS의 마법으로 단순한 HTML 페이지가 세련된 포트폴리오 사이트로 변신했답니다. 어때요? 생각보다 어렵지 않죠? 다음 섹션에서는 JavaScript를 사용해서 우리 웹사이트에 동적인 기능을 추가해볼 거예요. 기대되지 않나요? Let's keep going! 🚀

5. JavaScript로 동적 기능 추가하기 🎭

CSS로 우리 웹사이트를 예쁘게 꾸몄으니, 이제는 JavaScript의 차례예요! JavaScript는 웹페이지에 생동감을 불어넣는 마법 같은 언어랍니다. 사용자와 상호작용하는 기능을 만들 수 있어요. 재미있는 기능들을 추가해볼까요? 😃

5.1 JavaScript 파일 만들기 📁

먼저, 'static' 폴더 안에 'script.js' 파일을 만들어주세요. 그리고 HTML 파일의

태그 맨 아래에 다음 코드를 추가해주세요:

<script src="{{ url_for('static', filename='script.js') }}"></script>

이렇게 하면 HTML 파일과 JavaScript 파일이 연결돼요!

5.2 동적 타이핑 효과 만들기 ⌨️

홈페이지에 동적 타이핑 효과를 넣어볼까요? 마치 누군가가 실시간으로 타이핑하는 것처럼 보이게 만들 거예요. 'script.js' 파일에 다음 코드를 추가해주세요:

function typeEffect(element, speed) {
    let text = element.innerHTML;
    element.innerHTML = "";
    let i = 0;
    let timer = setInterval(function() {
        if (i < text.length) {
            element.append(text.charAt(i));
            i++;
        } else {
            clearInterval(timer);
        }
    }, speed);
}

// 페이지 로드 시 실행
window.onload = function() {
    let title = document.querySelector('h1');
    typeEffect(title, 100); // 100ms 간격으로 타이핑
}

와우! 이제 페이지가 로드될 때 제목이 타이핑되는 것처럼 보일 거예요. 멋지죠? ✨

5.3 프로젝트 필터링 기능 추가하기 🔍

프로젝트가 많아지면 카테고리별로 필터링하는 기능이 필요할 거예요. 'projects.html' 파일에 다음과 같은 버튼들을 추가해주세요:

<div id="filter-buttons">
    <button class="filter-btn" data-filter="all">All</button>
    <button class="filter-btn" data-filter="web">Web</button>
    <button class="filter-btn" data-filter="app">App</button>
    <button class="filter-btn" data-filter="ai">AI</button>
</div>

그리고 'script.js' 파일에 다음 코드를 추가해주세요:

document.addEventListener('DOMContentLoaded', function() {
    let filterBtns = document.querySelectorAll('.filter-btn');
    let projects = document.querySelectorAll('.project');

    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            let filter = btn.getAttribute('data-filter');
            
            projects.forEach(project => {
                if (filter === 'all' || project.classList.contains(filter)) {
                    project.style.display = 'block';
                } else {
                    project.style.display = 'none';
                }
            });
        });
    });
});

이제 프로젝트를 카테고리별로 필터링할 수 있어요. 정말 편리하죠? 😎

5.4 스크롤 애니메이션 추가하기 🎢

스크롤할 때 요소들이 서서히 나타나는 효과를 넣어볼까요? 'script.js' 파일에 다음 코드를 추가해주세요:

function revealOnScroll() {
    let reveals = document.querySelectorAll('.reveal');
    
    for (let i = 0; i < reveals.length; i++) {
        let windowHeight = window.innerHeight;
        let elementTop = reveals[i].getBoundingClientRect().top;
        let elementVisible = 150;
        
        if (elementTop < windowHeight - elementVisible) {
            reveals[i].classList.add('active');
        } else {
            reveals[i].classList.remove('active');
        }
    }
}

window.addEventListener('scroll', revealOnScroll);

그리고 'style.css' 파일에 다음 스타일을 추가해주세요:

.reveal {
    opacity: 0;
    transition: all 0.5s ease;
}

.reveal.active {
    opacity: 1;
}

이제 '.reveal' 클래스를 가진 요소들이 스크롤에 따라 서서히 나타날 거예요. 정말 멋지죠? 😍

5.5 다크 모드 토글 버튼 만들기 🌓

요즘 트렌드인 다크 모드를 추가해볼까요? HTML 파일에 다음과 같은 버튼을 추가해주세요:

<button id="dark-mode-toggle">🌓 Toggle Dark Mode</button>

그리고 'script.js' 파일에 다음 코드를 추가해주세요:

document.getElementById('dark-mode-toggle').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
});

'style.css' 파일에는 다음 스타일을 추가해주세요:

body.dark-mode {
    background-color: #333;
    color: #f4f4f4;
}

.dark-mode a {
    color: #3498db;
}

.dark-mode .project {
    background-color: #444;
    border-color: #555;
}

이제 버튼을 클릭하면 다크 모드로 전환할 수 있어요. 눈이 편안해지죠? 😌

🌟 Pro Tip: JavaScript는 정말 강력한 언어예요. 더 복잡한 기능을 구현하고 싶다면, 재능넷에서 JavaScript 전문가의 도움을 받아보는 것도 좋아요. 여러분의 포트폴리오를 더욱 인터랙티브하고 독특하게 만들 수 있을 거예요! 💪

자, 이제 우리 웹사이트가 정말 살아 움직이는 것 같지 않나요? JavaScript의 마법으로 단순한 정적 웹사이트가 동적이고 인터랙티브한 포트폴리오로 변신했어요. 어때요? 생각보다 재미있죠? 다음 섹션에서는 데이터베이스를 연결해서 우리 웹사이트를 더욱 똑똑하게 만들어볼 거예요. 준비되셨나요? Let's dive deeper! 🏊‍♂️

6. 데이터베이스 연결하기 🗃️

자, 이제 우리 웹사이트에 데이터베이스를 연결해볼 차례예요! 데이터베이스를 사용하면 프로젝트 정보나 방문자 메시지 등을 효율적으로 저장하고 관리할 수 있어요. 우리는 SQLite를 사용할 건데, 이는 가볍고 설정이 간단해서 초보자에게 딱이랍니다! 😊

6.1 Flask-SQLAlchemy 설치하기 📦

먼저, Flask-SQLAlchemy를 설치해야 해요. 터미널에서 다음 명령어를 실행해주세요:

pip install flask-sqlalchemy

6.2 데이터베이스 설정하기 ⚙️

'app.py' 파일에 다음 코드를 추가해주세요:

from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///portfolio.db'
db = SQLAlchemy(app)

이렇게 하면 SQLite 데이터베이스가 설정돼요.

6.3 모델 정의하기 📊

이제 프로젝트와 메시지를 위한 모델을 정의해볼까요? 'app.py' 파일에 다음 코드를 추가해주세요:

class Project(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text, nullable=False)
    category = db.Column(db.String(20), nullable=False)

class Message(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50), nullable=False)
    email = db.Column(db.String(50), nullable=False)
    message = db.Column(db.Text, nullable=False)

와우! 이제 프로젝트와 메시지를 위한 테이블이 생겼어요. 👏

6.4 데이터베이스 생성하기 🏗️

Python 인터프리터를 실행하고 다음 코드를 입력해주세요:

from app import db
db.create_all()

이렇게 하면 데이터베이스 파일이 생성돼요.

6.5 프로젝트 추가하기 ➕

'app.py' 파일에 다음과 같은 라우트를 추가해볼까요?

@app.route('/add_project', methods=['GET', 'POST'])
def add_project():
    if request.method == 'POST':
        new_project = Project(
            title=request.form['title'],
            description=request.form['description'],
            category=request.form['category']
        )
        db.session.add(new_project)
        db.session.commit()
        return redirect(url_for('projects'))
    return render_template('add_project.html')

그리고 'add_project.html' 템플릿을 만들어주세요:

<form method="POST">
    <input type="text" name="title" placeholder="Project Title" required>
    <textarea name="description" placeholder="Project Description" required></textarea>
    <select name="category" required>
        <option value="web">Web</option>
        <option value="app">App</option>
        <option value="ai">AI</option>
    </select>
    <button type="submit">Add Project</button>
</form>

이제 프로젝트를 쉽게 추가할 수 있어요! 🎉

6.6 프로젝트 표시하기 👀

'app.py' 파일의 projects 라우트를 다음과 같이 수정해주세요:

@app.route('/projects')
def projects():
    projects = Project.query.all()
    return render_template('projects.html', projects=projects)

그리고 'projects.html' 템플릿을 다음과 같이 수정해주세요:

{% for project in projects %}
    <div class="project {{ project.category }}">
        <h3>{{ project.title }}</h3>
        <p>{{ project.description }}</p>
    </div>
{% endfor %}

짜잔! 이제 데이터베이스에 저장된 프로젝트들이 웹페이지에 표시될 거예요. 😄

6.7 메시지 기능 추가하기 💌

'app.py' 파일에 다음과 같은 라우트를 추가해주세요:

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        new_message = Message(
            name=request.form['name'],
            email=request.form['email'],
            message=request.form['message']
        )
        db.session.add(new_message)
        db.session.commit()
        return 'Message sent successfully!'
    return render_template('contact.html')

'contact.html' 템플릿도 수정해주세요:

<form method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>
    <button type="submit">Send Message</button>
</form>

이제 방문자들이 메시지를 보낼 수 있어요! 📨

🔐 Security Tip: 데이터베이스를 다룰 때는 보안에 특히 신경 써야 해요. SQL 인젝션 같은 공격을 방지하기 위해 사용자 입력을 꼭 검증해야 해요. 이런 보안 문제에 대해 더 알고 싶다면, 재능넷에서 웹 보안 전문가의 조언을 구해보는 것도 좋아요! 🛡️

와! 이제 우리 웹사이트가 정말 똑똑해졌어요. 데이터베이스를 연결해서 동적으로 프로젝트를 관리하고, 방문자의 메시지도 저장할 수 있게 됐어요. 이제 우리 포트폴리오 웹사이트가 완전한 모습을 갖추게 된 것 같아요. 어떠세요? 생각보다 재미있죠? 다음 섹션에서는 우리가 만든 웹사이트를 실제로 배포하는 방법에 대해 알아볼 거예요. 준비되셨나요? Let's go live! 🚀

7. 웹사이트 배포하기 🚀

드디어 우리의 포트폴리오 웹사이트가 완성됐어요! 🎉 이제 전 세계 사람들이 볼 수 있도록 인터넷에 올려볼까요? 이 과정을 '배포'라고 해요. 조금 긴장되나요? 걱정 마세요. 제가 단계별로 자세히 설명해드릴게요! 😊

7.1 Heroku 가입하기 📝

우리는 Heroku라는 플랫폼을 사용해서 웹사이트를 배포할 거예요. Heroku는 초보자도 쉽게 사용할 수 있는 클라우드 플랫폼이에요.

먼저 Heroku 웹사이트에 접속해서 회원가입을 해주세요.
가입이 완료되면 대시보드로 이동할 거예요.

7.2 Heroku CLI 설치하기 🛠️

Heroku CLI를 사용하면 터미널에서 직접 Heroku를 제어할 수 있어요.

Heroku CLI 다운로드 페이지에서 운영체제에 맞는 버전을 다운로드하세요.
설치가 완료되면 터미널에서 heroku login 명령어를 입력해 로그인해주세요.

7.3 프로젝트 준비하기 🧰

Heroku에 배포하기 전에 몇 가지 파일을 추가해야 해요.

프로젝트 루트 디렉토리에 'Procfile'이라는 이름의 파일을 만들고 다음 내용을 입력하세요:
```
web: gunicorn app:app
```
'requirements.txt' 파일을 만들어 프로젝트에 필요한 패키지들을 명시해주세요. 터미널에서 다음 명령어를 실행하면 자동으로 생성돼요:
```
pip freeze > requirements.txt
```

7.4 Git 저장소 만들기 📁

Heroku는 Git을 사용해 코드를 관리해요. 아직 Git 저장소를 만들지 않았다면, 다음 단계를 따라해주세요:

git init
git add .
git commit -m "Initial commit"

7.5 Heroku 앱 생성하기 🏗️

이제 Heroku에 새 앱을 만들어볼까요?

heroku create your-app-name

'your-app-name' 부분에는 원하는 앱 이름을 입력하세요. 이 이름은 고유해야 해요!

7.6 데이터베이스 설정하기 🗃️

Heroku에서는 SQLite 대신 PostgreSQL을 사용해야 해요. 다음 명령어로 PostgreSQL을 추가해주세요:

heroku addons:create heroku-postgresql:hobby-dev

그리고 'app.py' 파일의 데이터베이스 설정을 다음과 같이 수정해주세요:

import os

app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL', '').replace('postgres://', 'postgresql://') or 'sqlite:///portfolio.db'

7.7 코드 배포하기 🚀

드디어 코드를 Heroku에 배포할 시간이에요!

git push heroku main

배포가 완료되면 다음 명령어로 데이터베이스를 초기화해주세요:

heroku run python
>>> from app import db
>>> db.create_all()
>>> exit()

7.8 웹사이트 열어보기 🌐

모든 준비가 끝났어요! 이제 우리의 웹사이트를 열어볼까요?

heroku open

와우! 🎉 드디어 우리가 만든 포트폴리오 웹사이트가 인터넷에 공개됐어요. 정말 대단하지 않나요?

🌟 Pro Tip: 배포 과정에서 문제가 생기면 당황하지 마세요! Heroku 로그를 확인해보면 문제의 원인을 찾을 수 있어요. 다음 명령어로 로그를 확인할 수 있답니다:

heroku logs --tail

그래도 해결이 어렵다면, 재능넷에서 클라우드 배포 전문가의 도움을 받아보는 것도 좋은 방법이에요! 🆘

축하드려요! 🎊 이제 여러분은 파이썬으로 포트폴리오 웹사이트를 만들고, 실제로 배포까지 해봤어요. 이 경험은 분명 여러분의 이력서에 빛나는 한 줄이 될 거예요. 앞으로 이 웹사이트를 계속 발전시켜 나가면서, 여러분의 성장 과정을 기록해보는 건 어떨까요? 취업 준비를 하는 여러분에게 이 프로젝트가 큰 도움이 되길 바라요. 여러분의 열정과 노력이 빛나는 결실을 맺길 응원하겠습니다. 화이팅! 💪😄