3일차. 내가 만들고 싶은 사이트 만들기

api 먼저!

 

우클릭해서 open git bash here

 

창뜨면 cursor . (한 칸 띄우기!)

 

 

* 문서-demo파일에서 모든 파일! 다 ! src 파일 복사하고 내가 만든 api 파일에 붙여넣기! 

 

원자/ 분자

더이상 쪼갤 수 없는 지점

 

이렇게 두개 나눠짐

 

 

 

* static-이미지

* templates-html만 들어감

폴더 만들기 images/ styles

폴더 만들기 images/ styles

 

 

만들고 싶은 컨셉으로 홈페이지 하나 만들기 

-인덱스가 젤 큰 개념임 index

 

auth 폴더 만들기

index파일 만들기

 

채팅 안나오면 이렇게 누르기

 

 

 

명령어로- 온실가스 배출량 산정 사이트 만들어줘라고 했음

 

 

대단스.. 근데 이렇게 산정하는거 맞나??

 

 

 

템플릿에 이진분류법으로 인덱스 파일과 폴더로 양분한 후 프롬프트로 인덱스 파일을 생성함. index.html 에 광고 대행사 홈페이지를 mvp 로 생성하려고 해. 스크립트 없이, 광고대행사 인트로 화면을 코딩해줘. 251013

 

 

 

 

 

이 파일을 html로 실행한 것은 잘 되는데, localhost 로 실행한 것은 이렇게 에러가 발생한다. 이유를 알려주고, 작업과정을 설명만 하고, 적용은 하지 말아줘

 

 

localhost에서 연결이 거부되는 에러가 발생하는 이유와 해결 과정을 설명드리겠습니다.

🔍 에러 원인 분석

1. 서버가 실행되지 않음

• Spring Boot 애플리케이션이 실행되지 않은 상태

• localhost:8080에 서버가 바인딩되지 않음

• 백엔드 서버 프로세스가 중단된 상태

2. 포트 충돌

• 8080 포트가 다른 애플리케이션에 의해 사용 중

• 방화벽이나 보안 소프트웨어가 포트를 차단

3. Spring Boot 설정 문제

• application.properties 설정 오류

• 서버 포트 설정 문제

• 템플릿 엔진 설정 문제

🛠️ 해결 과정 (작업 순서)

1단계: 프로젝트 구조 확인

 

 

1. build.gradle 파일 확인

   - Spring Boot 의존성 확인

   - 템플릿 엔진 의존성 확인 (Thymeleaf)

 

2. application.properties 확인

   - server.port=8080 설정

   - spring.thymeleaf 설정

   - 템플릿 경로 설정

 

 

 

2단계: Spring Boot 애플리케이션 클래스 확인

 

 

1. @SpringBootApplication 어노테이션 확인

2. main 메서드 확인

3. 컨트롤러 클래스 생성 필요

 

 

 

3단계: 컨트롤러 생성

 

 

@Controller

public class HomeController {

    

    @GetMapping("/")

    public String home() {

        return "index";

    }

    

    @GetMapping("/auth")

    public String auth() {

        return "auth/index";

    }

}

 

 

 

4단계: 서버 실행

 

 

1. gradlew bootRun 실행

2. 또는 IDE에서 Spring Boot 애플리케이션 실행

3. 포트 8080에서 서버 시작 확인

 

 

 

5단계: 브라우저 접속

 

 

1. http://localhost:8080 접속

2. 템플릿 엔진이 HTML 파일을 렌더링

3. 정상 동작 확인

 

 

 

📋 필요한 작업 목록

A. 백엔드 설정

1. 컨트롤러 클래스 생성

• src/main/java/com/example/controller/HomeController.java

• 각 탭에 대한 매핑 추가

1. application.properties 설정

• 서버 포트 설정

• Thymeleaf 설정

1. 의존성 확인

• build.gradle에 Spring Web, Thymeleaf 의존성

B. 템플릿 경로 수정

1. 템플릿 파일 위치 확인

• src/main/resources/templates/ 하위에 위치

• 컨트롤러에서 올바른 경로 반환

1. 정적 리소스 설정

• CSS, JS 파일을 src/main/resources/static/에 배치

C. 서버 실행 및 테스트

1. 애플리케이션 실행

1. 포트 확인

1. 브라우저 접속 테스트

🎯 핵심 포인트

HTML 파일을 직접 브라우저로 열면:

• 정적 HTML 파일로 동작

• JavaScript 기능은 작동

• 서버 없이 로컬 파일 시스템에서 실행

localhost:8080으로 접속하면:

• Spring Boot 서버가 실행되어야 함

• 템플릿 엔진이 HTML을 렌더링

• 서버 사이드 기능 활용 가능

현재 상황에서는 Spring Boot 애플리케이션을 실행하지 않은 상태에서 localhost에 접속하려고 해서 연결이 거부되는 것입니다.

 

 

 

---

localhost:8080 에러 발생 이유

ERR_CONNECTION_REFUSED 에러가 발생하는 이유는:
웹 서버가 실행되지 않음 - Spring Boot 애플리케이션이 아직 시작되지 않았습니다

포트 8080에 연결할 수 없음 - localhost:8080으로 접근하려고 하지만 서버가 해당 포트에서 대기하고 있지 않습니다

정적 파일 서빙 설정 부족 - Spring Boot에서 HTML 파일을 정적 리소스로 서빙하는 설정이 필요할 수 있습니다

해결을 위한 작업 과정

1단계 🏈 Spring Boot 애플리케이션 확인# 현재 프로젝트 구조 확인ls -la src/main/java/com/labzang/api/

2단계 🏈 Spring Boot 서버 시작#

💥 Gradle을 사용하여 애플리케이션 실행
./gradlew bootRun
또는 Windows에서gradlew.bat bootRun

3단계 🏈 정적 리소스 설정 확인

src/main/resources/application.properties 파일에 다음 설정 추가:

# 정적 리소스 경로 설정spring.web.resources.static-locations=classpath:/static/,classpath:/templates/spring.mvc.view.prefix=classpath:/templates/spring.mvc.view.suffix=.html
-무작정 가져다 붙인다고 되지 않음.

:/ 클레이스스페이스에 왜 콜론을 붙여야해?

classpath : Java에서 클래스나 리소스를 찾는 경로(path)를 의미

리소스 파일들을 자바로 불러내기 위해 필요함

:/ :  is(be 동사)

“현재 프로젝트의 classpath 루트(root)로부터 파일을 찾아라.”

즉,

• classpath: → "클래스패스 안에서 찾는다"
• / → "루트(맨 처음 경로)부터 찾는다"

 
4단계 🏈 컨트롤러 생성 (선택사항)

src/main/java/com/labzang/api/controller/HomeController.java 생성:
@Controllerpublic class HomeController {
@GetMapping
("/")public String home() {return "index";}}

5단계 🏈 서버 실행 후 접근

서버가 정상적으로 시작되면 http://localhost:8080으로 접근 가능
콘솔에서 "Started ApiApplication" 메시지 확인

현재 상황
✅ HTML 파일 직접 실행: 정상 작동 (파일 시스템에서 직접 열기)
❌ localhost:8080 접근: 실패 (웹 서버가 실행되지 않음)

Spring Boot 애플리케이션을 👉먼저 실행 해야 

웹 서버가 시작되고 localhost로 접근할 수 있습니다!

---

컴파일링 하는 이유? 도메인에 올릴려고,  web 서브에 올리려고, 

 

인터프릭팅 안하고 로컬로 바로 가려고 하는 것임

 

박민솔/우정윤/서은진

 

윈도우+r -> cmd

java --version

 

외국어 어렵지만 이 내용드른 알아야함

 

 

 

 

spring.application.name=api

spring.mvc.view.prefix=/

spring.mvc.view.suffix=.html

 

이렇게 쓰기!

 

 

@HomeController.java 여기에 @ApiApplication.java 이것을 실행하면, @index.html 이것이 브라우저에 보여지기를 원해. 이렇게 코드만 작성해줘, 실행은 내가 할거야.

 

api~~파일에서 -run누르기

 

 

엑세스 허용

 

 

로그인창 만들기

 

 

파일만들기 css

 

 

인덱스 부분의 style 부분만 붙여넣기

 

 

@index.html 여기에 @index.css 를 인라인방식으로 임포트하도록 수정해줘.

 

---

@index.html 여기에 @index.css 를 인라인방식으로 임포트하도록 수정해줘.

문장 해석

“@index.html 여기에 @index.css 를 인라인 방식으로 임포트하도록 수정해줘.”

이 말은 즉,

“HTML 파일(index.html)에 있는 내용을 바꿔서,
별도로 존재하던 CSS 파일(index.css)의 스타일을 HTML 안에 직접 포함시키도록 해달라”
는 뜻이에요.

 

“인라인 방식으로 임포트”가 의미하는 것

“인라인(inline)”이란 HTML 파일 안에 직접 스타일을 써넣는 방식을 말합니다.

즉,
<link>로 불러오지 않고 HTML 안에 <style> 태그로 CSS 내용을 포함시키는 것이에요.

 

---

로그인이랑 회원가입 버튼 만들기- chat gpt에 물어봄

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>탄소 관리 시스템 - 로그인</title>
    <link rel="stylesheet" th:href="@{/styles/index.css}">
    <style>
        /* 기존 스타일 유지 */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            min-height: 100vh;
            color: #333;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 30px 0;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 30px 20px;
        }

        /* 🔽 로그인 관련 스타일 추가 */
        .login-section {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 70vh;
        }

        .login-box {
            background-color: white;
            padding: 2rem;
            border-radius: 15px;
            width: 320px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .login-box input {
            width: 100%;
            padding: 10px;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 8px;
        }

        .login-box button {
            width: 100%;
            background-color: #1e3c72;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .login-box button:hover {
            background-color: #2a5298;
        }
    </style>
</head>

<body>
    <header class="header">
        <h1>탄소 관리 시스템</h1>
        <p>온실가스 배출량 산정 & LCA & 공시 기준</p>
    </header>

    <div class="container">
        <section class="login-section">
            <div class="login-box">
                <h2>로그인</h2>
                <form id="loginForm">
                    <input type="email" id="email" placeholder="이메일" required>
                    <input type="password" id="password" placeholder="비밀번호" required>
                    <button type="submit">로그인</button>
                </form>
                <p>아직 회원이 아니신가요? <a href="/signup">회원가입</a></p>
            </div>
        </section>
    </div>

    <script>
    document.getElementById("loginForm").addEventListener("submit", async (e) => {
      e.preventDefault();
      const email = document.getElementById("email").value;
      const password = document.getElementById("password").value;

      const res = await fetch("/api/login", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({ email, password }),
      });

      const data = await res.json();
      if (res.ok) {
        alert("로그인 성공!");
        localStorage.setItem("token", data.token);
        window.location.href = "/";
      } else {
        alert(data.message || "로그인 실패");
      }
    });
    </script>
</body>
</html>

---

    <nav class="navbar">

        <ul>

          <li><a href="/">홈</a></li>

          <li><a href="/about">소개</a></li>

          <li><a href="/lca">LCA 분석</a></li>

          <li><a href="/emission">온실가스 산정</a></li>

          <li><a href="/report">공시 리포트</a></li>

          <li><a href="/login">로그인</a></li>

          <li><a href="/register">회원가입</a></li>

        </ul>

      </nav>

 

-이거를 넣어봄

 

home을 api안에 넣기 옮기기, run누르기

 

http://localhost:8080/

이렇게 넣어서 시스템 뜨는지 확인해야함!

 

auth에 두 개 파일 추가

@login.html 로그인 화면을 작성해줘

@register.html 아이디와 비밀번호, 이름, 이메일을 입력하는 회원가입페이지를 생성해줘. 스크립트는 사용하지 말아줘

 

 

 

 

@ 눌러서 두개 추가함

 

---

랩장
@lab_zang
<header>
<nav>
<div class="logo">Creative Hub</div>
<ul class="nav-links">
<li><a href="#home">홈</a></li>
<li><a href="/auth/login">로그인</a></li>
<li><a href="/auth/register">회원가입</a></li>
</ul>
</nav>
</header>

<!-- 히어로 섹션 -->
<section class="hero" id="home">
<div class="hero-content">
<li><a href="#home">덧셈 </a></li>
<li><a href="/auth/login">뺄셈</a></li>
<li><a href="/auth/register">곱셈</a></li>
<li><a href="/auth/register">나눗셈</a></li>
</div>
</section>

계산기 템플릿 -> 문제 해결용 .샘플파일 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계산기 - Creative Hub</title>
</head>
<body>
<a href="/" class="back-link">
← 홈으로 돌아가기
</a>
<div class="login-container">
<div class="login-header">

<h1>곱셈</h1>
</div>
</div>
</body>
</html>

 

 

가장 중요한 부분!!!!!

 

**home 에 들어가는 것이 @와 연결되도록 구성해야 그 버튼을 눌렀을때 넘어감

 

 

 

이에 대한 내용은 챗 지피티에 부탁했음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>회사 소개 | 탄소 관리 시스템</title>
  <link rel="stylesheet" href="/styles/index.css" />
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      color: #fff;
      margin: 0;
      padding: 0;
    }

    .header {
      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
      padding: 30px 0;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }

    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      color: #fff;
    }

    nav {
      background-color: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      text-align: center;
      padding: 15px 0;
    }

    nav ul {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 30px;
      padding: 0;
      margin: 0;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      transition: color 0.3s;
    }

    nav a:hover {
      color: #ffd700;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 50px 20px;
    }

    .section {
      background-color: rgba(255,255,255,0.1);
      border-radius: 15px;
      padding: 30px;
      margin-bottom: 40px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    .section h2 {
      color: #ffd700;
      margin-bottom: 15px;
      font-size: 1.8rem;
      border-bottom: 2px solid rgba(255,255,255,0.3);
      padding-bottom: 8px;
    }

    .section p {
      line-height: 1.7;
      color: #f3f3f3;
    }
  </style>
</head>
<body>

  <header class="header">
    <h1>회사 소개</h1>
    <p>지속 가능한 미래를 위한 탄소 관리 솔루션</p>
  </header>

  <!-- ✅ 네비게이션 -->
  <nav>
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/about" class="active">소개</a></li>
      <li><a href="/lca">LCA 분석</a></li>
      <li><a href="/emission">온실가스 산정</a></li>
      <li><a href="/report">공시 리포트</a></li>
      <li><a href="/login">로그인</a></li>
      <li><a href="/signup">회원가입</a></li>
    </ul>
  </nav>

  <!-- ✅ 본문 내용 -->
  <div class="container">

    <!-- 회사 소개 -->
    <section class="section">
      <h2>회사 소개</h2>
      <p>
        저희 <strong>탄소 관리 시스템</strong>은 기업과 기관이 ESG 시대에 맞춰 
        체계적으로 <strong>탄소중립 전략</strong>을 수립하고 실행할 수 있도록 지원하는 
        환경 기술 기반 플랫폼입니다.  
        온실가스 데이터 관리부터 LCA 분석, 공시 리포트 자동화까지  
        원스톱으로 제공합니다.
      </p>
    </section>

    <!-- 탄소중립 -->
    <section class="section">
      <h2>탄소중립(Carbon Neutrality)</h2>
      <p>
        탄소중립은 배출된 온실가스의 총량을 감축하거나 상쇄하여 
        ‘순 배출량 0’을 달성하는 것을 의미합니다.  
        본 시스템은 기업이 배출량을 정량적으로 파악하고 
        감축 계획을 수립할 수 있도록 지원합니다.
      </p>
    </section>

    <!-- 온실가스 배출량 산정 -->
    <section class="section">
      <h2>온실가스 배출량 산정</h2>
      <p>
        배출량 산정은 국제 기준(GHG Protocol, IPCC 가이드라인 등)에 따라  
        스코프(Scope 1, 2, 3)별 데이터를 관리합니다.  
        자동화된 데이터 수집과 분석을 통해 
        투명하고 정확한 산정 결과를 제공합니다.
      </p>
    </section>

    <!-- LCA(전과정평가) -->
    <section class="section">
      <h2>LCA (Life Cycle Assessment)</h2>
      <p>
        LCA는 제품의 생산부터 폐기까지 전 과정에서 발생하는 
        환경 영향을 평가하는 방법론입니다.  
        탄소 관리 시스템은 LCA 데이터베이스와 연동되어  
        제품 단위의 탄소발자국을 산출할 수 있습니다.
      </p>
    </section>

    <!-- 공시 기준 -->
    <section class="section">
      <h2>공시 기준 및 보고</h2>
      <p>
        ESG 공시는 국내외 규제 및 표준(GRI, TCFD, ISSB 등)에 따라  
        탄소 배출 관련 데이터를 투명하게 공개해야 합니다.  
        본 시스템은 자동화된 리포트 생성 기능을 제공하여  
        기업이 신속하고 정확하게 공시 요건을 충족할 수 있도록 돕습니다.
      </p>
    </section>

  </div>

</body>
</html>

 

 

 

이걸 about 파일에 넣으면

 

이렇게 나옴!!!!!!!!꺅!!!! 넘 맘에 든당 교수님께도 칭찬받음 캬캬!

 

 

 

나머지도 다 이어지게끔 코드 짜서 파일 만들어서 연결시킬 예정

이제 예쁘게 나오게끔만 꾸미면 될듯!

 

---

계산기 넣기! 

 

index에

    <!-- 히어로 섹션 -->

    <section class="hero" id="index">

        <div class="hero-content">

        <li><a href="/contents/calculator/plus">덧셈 </a></li>

        <li><a href="/contents/calculator/minus">뺄셈</a></li>

        <li><a href="/contents/calculator/gob">곱셈</a></li>

        <li><a href="/contents/calculator/nanum">나눗셈</a></li>

        </div>

    </section>

 

 

-넣기

 

 

 

    @GetMapping("/contents/calculator/plus")

    public String plus() {

        return "contents/calculator/plus"; // Renders templates/auth/login.html

    }

    @GetMapping("/contents/calculator/nanum")

    public String nanum() {

        return "contents/calculator/nanum"; // Renders templates/auth/login.html

    }

    @GetMapping("/contents/calculator/gob")

    public String gob() {

        return "contents/calculator/gob"; // Renders templates/auth/login.html

    }

    @GetMapping("/contents/calculator/minus")

    public String minus() {

        return "contents/calculator/minus"; // Renders templates/auth/login.html

    }

}

 

 

 

 

연결시킬때 슬래쉬 유무 매우 중요!

 

 

런 시키면 

 

 

짜라란 이렇게 됩니다~~

 

오늘은 끝