HTML, CSS, JavaScript로 동적 페이지 구현하기
1. 기본 구조
index.html에 모든 JavaScript 파일을 불러오고, 페이지의 동적인 콘텐츠를 업데이트할 수 있는 구조를 구현
1.1 index.html
index.html에는 전체 페이지에서 공통적으로 사용되는 상단 바(헤더)를 구현. 콘텐츠가 동적으로 변경되는 영역을 위해 <div id="main_data"></div>를 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 상단 바 -->
<header>
<nav>
<!-- 내비게이션 메뉴 -->
</nav>
</header>
<!-- Main data -->
<div id="main_data"></div>
<script src="index.js"></script>
<script src="main.js"></script>
<script src="product.js"></script>
<script src="myStore.js"></script>
</body>
</html>2. URL에 따라 동적으로 내용 변경하기
JavaScript를 사용해 현재 페이지의 URL을 확인하고, 해당 URL에 맞는 콘텐츠를 동적으로 main_data 영역에 삽입
if (document.location.pathname === "/") {
document.getElementById("main_data").innerHTML = "메인 페이지 입니다";
}이 코드에서는 document.location.pathname을 이용해 현재 경로가 루트('/')인지 확인하고, 루트 경로일 경우 main_data div에 "메인 페이지 입니다"라는 텍스트를 삽입. 이렇게 하면 페이지에 따라 동적으로 콘텐츠를 바꿀 수 있음.
3. 상단 바 유지
모든 페이지에서 공통으로 보여야 하는 요소인 상단 바는 index.html에서 한 번만 구현해두면 모든 페이지에서 자동으로 유지.
로그인/회원가입 동작 원리
회원가입
- 유효성 검사
- 이메일: 올바른 이메일 형식인지 확인.
- 비밀번호: 최소 8자리, 숫자와 특수문자를 포함해야 함.
- 닉네임: 공백이 아닌 값이어야 함.
- 백엔드 요청
- 유효성 검사를 통과한 후, 백엔드 서버로 회원가입 요청을 보냄.
- 성공 시: 성공 메시지를 출력하고, 추가 동작 없이 회원가입을 완료.
- 실패 시: 실패 메시지를 출력하고, 다시 시도하라는 메시지를 표시
로그인
- 유효성 검사
- 이메일: 올바른 이메일 형식인지 확인.
- 비밀번호: 최소 8자리, 숫자와 특수문자를 포함해야 함.
- 백엔드 요청
- 유효성 검사를 통과한 후, 백엔드 서버로 로그인 요청을 보냄
- 성공 시: 서버에서 반환한 토큰과 닉네임을 sessionStorage에 저장
- 실패 시: 로그인 실패 메시지를 출력하고, 다시 시도하라는 메시지를 표시
로그인 상태 관리
- 세션 스토리지 사용
- 로그인 성공 시 서버에서 반환된 토큰과 닉네임을 sessionStorage에 저장
- 상태 확인
- sessionStorage에 토큰이 존재하는지 확인하여 로그인 상태를 관리
- 로그인 상태: 세션 스토리지에 토큰이 존재하면 상단 바 오른쪽에 닉네임과 로그아웃 버튼을 출력
- 비로그인 상태: 세션 스토리지에 토큰이 없으면 로그인/회원가입 버튼을 출력
- 새로고침 시 로그인 상태 유지
- 페이지가 새로고침되더라도 로그인 상태를 확인하기 위해 최초 window.onload에서 토큰 확인 함수를 실행. 이를 통해 페이지 로드 시 자동으로 로그인 상태가 반영됨
회원가입/로그인 동작 흐름 이미지
회원가입
로그인
Github
프론트엔드
GitHub - alex8396/used-community
Contribute to alex8396/used-community development by creating an account on GitHub.
github.com
백엔드
GitHub - leeemingyu/used-community-back
Contribute to leeemingyu/used-community-back development by creating an account on GitHub.
github.com
'[LG 유플러스] 유레카 > 프로젝트' 카테고리의 다른 글
| [번개장터 클론코딩][Spring Boot] 이미지 저장 방식, 사용자 인증, 로그인 유효시간 및 토큰 관리 (0) | 2025.03.19 |
|---|---|
| [번개장터 클론코딩][Spring Boot] 회원가입 시 이메일 및 닉네임 중복 검사 구현 (0) | 2025.03.18 |
| [번개장터 클론코딩][Spring Boot] 로그인, 회원가입 기능 구현 (0) | 2025.03.14 |
