오늘의 잔디

---

🗓️ JWT 로그인 기능이 적용된 나만의 일정관리 캘린더 (개발 진행 중)

✅ 프로젝트 개요

JWT(Json Web Token)를 기반으로 사용자 인증 기능이 포함된 일정 관리 캘린더 웹앱을 개발 중입니다.
Spring Boot + MySQL 백엔드와 HTML/CSS/JavaScript 기반 프론트엔드를 연동하여 회원가입 → 로그인 → 개인별 일정 관리까지 구현을 목표로 합니다.

---

🔧 주요 기술 스택

• 백엔드: Java 21, Spring Boot 3.4.5, Spring Security, JWT
• DB: MySQL 8
• 프론트엔드: HTML, CSS, JavaScript (moment.js 활용)
• 툴: IntelliJ IDEA

---

🧩 현재까지 구현된 기능

• 🔐 회원가입/로그인 기능 (JWT 토큰 발급)
• 🧾 토큰 저장 및 인증 요청 시 헤더에 포함
• 🖥️ 로그인 후 index.html 페이지로 이동
• 🔐 로그아웃 버튼 클릭 시 토큰 삭제 및 로그인 페이지 이동

---

🐛

⚠️ 증상

• 로그인 후 index.html로 이동은 정상
• 상단바(나의 일정 관리, 로그아웃 버튼)는 정상 표시
• 하지만 캘린더 렌더링 부분이 하얀 화면으로 비어 있음

🧪 콘솔 에러 로그

Refused to apply style from '/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type.
Refused to execute script from '/js/index.js' because its MIME type ('text/html') is not executable.

🕵️‍♀️ 원인 분석

• 브라우저에서 로딩한 CSS/JS 파일이 text/html로 잘못 응답됨
• 이는 보통 파일을 못 찾았을 때 발생
• 정적 파일 경로가 잘못 지정되었거나,
  브라우저에서 직접 열었을 경우 서버가 MIME 타입을 처리 못함

---

🛠️ 시도한 해결 방법

• ✅ index.html 내부 경로를 /css/style.css → css/style.css 등 상대 경로로 수정
• ✅ 파일명 오타 확인
• ✅ 정적 파일이 있는 경로 구조 확인
• ❗ 하지만 여전히 "Cannot load resource - status 404" 오류 발생

---

✅ 다음 해결 계획

1. 정적 파일을 불러오기 위해 로컬 서버 실행

   • python -m http.server 63342 또는 Live Server, IntelliJ 내장 서버 등 사용
   • 단순히 HTML 파일을 더블 클릭하여 열면 MIME 처리 안됨

2. js/index.js, css/style.css 파일이 실제 경로와 맞는지 점검

3. 네트워크 탭에서 요청 경로 확인 및 응답 상태 확인

---

📌 느낀 점

이번 오류를 통해 브라우저가 정적 리소스를 어떻게 해석하는지, 그리고 정확한 MIME 타입과 서버 역할에 대해 배우는 중입니다.
한 줄 <script> 혹은 <link> 경로가 잘못되어 전체 화면이 먹통이 되는 경험을 하며, 세심한 디버깅의 중요성을 다시 느낍니다.

---

📍 캘린더 렌더링 오류가 해결되면 이 글을 마무리하고 "완성기"로 별도 작성 예정!

---

🎨 로그인 UI 개선

✅ 개선 전 문제점

• 입력창이나 버튼의 디자인이 너무 단순하고 정렬이 깔끔하지 않음
• 로그인 성공/실패 메시지가 단색 텍스트로 출력되어 사용자 인지 어려움

✅ 개선 내용

• login.html, login.css, login.js를 다음과 같이 개선

항목	개선 내용
입력창	테두리, 여백, placeholder 스타일 개선
버튼	색상, hover 효과, 크기 통일
메시지	성공 시 초록색, 실패 시 빨간색으로 시각적으로 구분되도록 처리
정렬	display: flex와 gap 활용하여 수직 정렬 및 가운데 정렬

✅ 로그인 성공 시 흐름

• JWT 토큰을 localStorage에 저장
• 1초 후 index.html로 이동
• index.html에 있는 "나의 일정 관리" 페이지로 진입됨

⛏️ 개선된 코드 예시

<!-- login.html 일부 -->
<form id="login-form">
  <input type="text" id="username" placeholder="아이디" />
  <input type="password" id="password" placeholder="비밀번호" />
  <button type="button" onclick="login()">로그인</button>
  <p id="login-message"></p>
</form>

/* login.css 일부 */
#login-form input {
  border: 1px solid #ccc;
  padding: 10px;
  width: 250px;
  border-radius: 4px;
}

#login-form button {
  background-color: #3498db;
  color: white;
  padding: 10px;
  border: none;
  width: 250px;
  border-radius: 4px;
  cursor: pointer;
}

#login-message.success {
  color: green;
}

#login-message.error {
  color: red;
}

---

✨ 결과 화면

로그인 성공 시 ✅ “로그인 성공! 잠시 후 이동합니다...”
로그인 실패 시 ❌ “아이디 또는 비밀번호가 올바르지 않습니다.”

✅ 버튼, 입력창, 메시지가 사용자 친화적 스타일로 개선됨

---

📝 마무리 (진행 중 상태)

현재 로그인 → index.html 이동까지는 성공.
캘린더 표시 오류는 정적 리소스 경로 또는 MIME 관련 문제로 추정되며 해결 중입니다.

---