🍯 뷰 맛보기 - 첫 번째 뷰 만들어보기

Laravel 뷰가 뭔지 5분만에 체험하고 첫 번째 HTML 페이지 만들어보세요

🍯 뷰 맛보기

목표: 5분 안에 뷰가 뭔지 이해하고 첫 번째 HTML 페이지 만들기!

🤔 뷰(View)가 뭘까요?

실생활 비유

🎨 화가가 그림 그리기
화가(라우트) + 캔버스(뷰) = 완성된 그림(웹페이지)

💻 웹페이지 만들기
라우트(컨트롤러) + 뷰(HTML 템플릿) = 완성된 웹페이지

Laravel 공식 정의

Laravel 공식 문서에 따르면:

뷰는 컨트롤러/애플리케이션 로직과 프레젠테이션 로직을 분리하는 편리한 방법을 제공합니다.

쉽게 말하면:

📄 HTML 텍스트 관리자: HTML 문서의 텍스트를 모아서 쉽게 반환할 수 있는 기능
🎨 디자인 분리: 코드와 디자인을 따로 관리
🔄 재사용 가능: 여러 라우트에서 같은 뷰 사용
⚙️ 템플릿 엔진: .blade.php를 사용해 단순 HTML보다 훨씬 강력한 기능 제공

📁 뷰 파일 위치

모든 뷰 파일은 resources/views 디렉토리에 저장됩니다:

project/
├── resources/
│   └── views/
│       ├── welcome.blade.php     ← 기본 환영 페이지
│       ├── greeting.blade.php    ← 우리가 만들 페이지
│       └── ...

🔧 view() 헬퍼 함수

Laravel에서는 view() 함수로 뷰를 호출합니다:

// resources/views/greeting.blade.php 파일을 호출
return view('greeting');

// 데이터와 함께 뷰 호출
return view('greeting', ['name' => 'James']);

🚀 첫 번째 뷰 만들어보기 (3분 완성!)

1단계: 뷰 파일 생성

resources/views/hello.blade.php 파일을 만들어보세요:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>첫 번째 뷰</title>
    <style>
        body {
            font-family: Arial;
            text-align: center;
            padding: 50px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .container {
            background: rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 내 첫 번째 Laravel 뷰!</h1>
        <p>안녕하세요! 드디어 뷰를 만들었어요!</p>
        <p>현재 시간: </p>
    </div>
</body>
</html>

2단계: 라우트에서 뷰 호출

routes/web.php에 추가:

Route::get('/hello-view', function () {
    return view('hello');
});

3단계: 브라우저에서 확인

주소창에 입력: http://localhost:8000/hello-view

결과: 예쁜 그라디언트 배경의 첫 번째 뷰 완성! 🎉

🎨 뷰에 데이터 전달하기 (2분 추가!)

뷰 파일에 변수 공간 만들기

resources/views/greeting.blade.php:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인사 페이지</title>
    <style>
        body { font-family: Arial; padding: 50px; text-align: center; }
        .greeting { background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px auto; max-width: 400px; }
    </style>
</head>
<body>
    <div class="greeting">
        <h1>👋 님 안녕하세요!</h1>
        <p>나이: 세</p>
        <p>취미: </p>
        <p>오늘은 입니다!</p>
    </div>
</body>
</html>

라우트에서 데이터 전달

Route::get('/greeting/{name}', function ($name) {
    return view('greeting', [
        'name' => $name,
        'age' => 25,
        'hobby' => '코딩',
        'today' => date('Y년 m월 d일')
    ]);
});

테스트: /greeting/김철수 접속해보세요!

🎮 실습 미션 (5분)

미션 1: 나만의 프로필 페이지 만들기

resources/views/profile.blade.php 생성
본인의 정보를 보여주는 예쁜 페이지 만들기
라우트 연결하기

템플릿:

<!DOCTYPE html>
<html>
<head>
    <title>의 프로필</title>
    <style>
        /* 여러분만의 CSS 스타일! */
    </style>
</head>
<body>
    <div class="profile">
        <h1></h1>
        <p></p>
        <!-- 더 많은 정보 추가! -->
    </div>
</body>
</html>

미션 2: 동적 방명록 만들기

Route::get('/guestbook/{message}', function ($message) {
    return view('guestbook', [
        'message' => $message,
        'visitor_ip' => request()->ip(),
        'visit_time' => now()->format('Y-m-d H:i:s')
    ]);
});

도전: /guestbook/안녕하세요 같은 URL로 방문 메시지를 남길 수 있게 만들어보세요!

💡 뷰 vs 직접 HTML 비교

❌ 라우트에서 직접 HTML (나쁜 예)

Route::get('/bad', function () {
    return '<html><head>...</head><body>...</body></html>'; // 😰
});

✅ 뷰 파일 사용 (좋은 예)

Route::get('/good', function () {
    return view('my-page'); // 😊 깔끔!
});

뷰 사용의 장점:

📝 읽기 쉬움: HTML이 별도 파일로 정리
🔄 재사용 가능: 여러 라우트에서 같은 뷰 사용
🎨 디자이너 협업: 개발자와 디자이너가 분업 가능
🛠️ 유지보수 용이: 디자인 변경이 쉬움

🚀 왜 .blade.php를 사용할까요?

HTML vs Blade.php 비교

단순 HTML의 한계:

<!-- static.html -->
<h1>안녕하세요 김철수님!</h1>
<p>오늘은 2024년 11월 19일입니다</p>

❌ 문제점: 이름과 날짜가 고정되어 있어요

Blade 템플릿 엔진의 힘:

<!-- greeting.blade.php -->
<h1>안녕하세요 님!</h1>
<p>오늘은 입니다</p>

✅ 해결: 동적으로 변수를 처리하고 함수를 실행할 수 있어요!

🎯 템플릿 엔진을 통한 기능 확장

1. 변수 출력

    // 안전한 변수 출력
{!! $htmlContent !!}    // HTML 코드 직접 출력

2. 조건문

@if($user->age >= 18)
    <p>성인입니다</p>
@else
    <p>미성년자입니다</p>
@endif

3. 반복문

@foreach($posts as $post)
    <h3></h3>
@endforeach

4. 레이아웃 상속

@extends('layouts.app')
@section('content')
    <h1>페이지 내용</h1>
@endsection

💡 단계별 학습 안내

이것은 맛보기일 뿐입니다! 📚

🍯 지금 단계: 뷰가 뭔지만 이해하면 충분해요 🌱 다음 단계: Blade 문법을 하나씩 배워봐요 🚀 고급 단계: 복잡한 템플릿 시스템까지 마스터!

💬 설명: 뷰를 단순하게 HTML이 아닌 blade.php로 하는 것은 템플릿 엔진을 통하여 기능을 확장할 수 있기 때문입니다. 보다 자세한 것은 나중에 다시 설명합니다.

🏆 축하합니다!

🎉 5분만에 뷰 마스터!

이제 여러분은:

✅ 뷰가 뭔지 알아요
✅ 뷰 파일을 만들 수 있어요
✅ 라우트와 뷰를 연결할 수 있어요
✅ 데이터를 뷰에 전달할 수 있어요

🎯 다음 단계

더 멋진 웹페이지를 만들고 싶다면:

🌱 초급 - 뷰 기초 완전 마스터

다양한 데이터 전달 방법
블레이드 문법 기초
실용적인 웹페이지 만들기

💡 팁: 뷰는 웹 개발의 핵심이에요! HTML을 예쁘게 만드는 것부터 시작해서 점점 복잡한 기능을 추가해보세요! 🚀