🌐 HTML + JS + JAVA 핵심 정리

---

🧱 HTML + JS

⚙️ Java ↔ JS 데이터 변환 주의점

상황	설명	예시 코드
🔸 Java에서 String 반환	JS의 .json()으로 변환 불가 → .text() 또는 Dto 사용 필요	```js

const data = await response.text();

| 🔸 Java에서 null 반환 | `.json()` 변환 시 오류 발생 → `try-catch`로 처리 필요 | ```js
try {
  const data = await response.json();
} catch {
  // 비로그인 시 처리 코드
}
``` |

---

### 🧩 예시 코드: 비로그인/로그인 구분 메뉴 출력
```js
// [1] 내정보 요청하여 메뉴 나누기
const infoMenu = async ( ) => {
    console.log('infoMenu func exe');
    const logMenu = document.querySelector('#log-menu');
    let html = '';
    try{
        const option = { method : "GET" };
        const response = await fetch("/member/info", option);
        const data = await response.json();
        console.log(data);
        html += `<li><span> ${data.mid}님 </span></li>
                <li><a href="/member/info.jsp"> 내정보 </a></li>
                <li><a href="#" onclick="logout()"> 로그아웃 </a></li>`;
    } catch {
        html += `<li><a href="/member/login.jsp"> 로그인 </a></li>
                <li><a href="/member/signup.jsp"> 회원가입 </a></li>`;
    }
    logMenu.innerHTML = html;
}

---

🔗 a 태그 사용 시 주의점

상황	설명	예시
클릭용 링크	반드시 # 사용	<a href="#">회원 탈퇴</a>
🚫 잘못된 예시	href를 빈칸으로 두면 작동하지 않음	<a href="">회원 탈퇴</a>

---

🎨 CSS / JS / JSP 불러오기 경로

종류	경로 기준	예시
CSS / JS	static 폴더 이하	<link rel="stylesheet" href="/css/common.css"> <script src="/js/member/update.js"></script>
JSP	webapp 폴더 이하	<jsp:include page="/header.jsp"></jsp:include>

---

⌨️ 이벤트 및 알람창

기능	키워드	설명
키 입력 후 실행	onkeyup=""	입력값 유효성 검사 시 사용
기본 알람창	alert('')	단순 경고창
입력창	prompt('')	입력 상자 포함
확인/취소창	confirm('')	true / false 반환

---

💾 value 속성 사용 가능 마크업

<input>, <textarea>, <select> 등에서 .value 속성 사용 가능

---

🔍 배열 관련 함수

함수	설명	예시
.indexOf(A)	배열 내 A의 인덱스 반환	array.indexOf('item')
.includes(A)	배열 내 A 존재 여부 반환 (boolean)	array.includes('item')

---

✅ 유효성 검사 체크리스트 활용

const signPass = [false, false]; // [아이디체크, 연락처체크]
if (signPass.includes(false)) {
  alert('검사 미통과 항목이 있습니다.');
}

---

☕ Java

📦 JS와 데이터 통신 시 주의사항

상황	설명	해결책
String 반환 시	JS에서 .json() 불가	Dto로 반환 or JS에서 .text() 처리
로직 위치	난수 생성 등은 Controller ❌ → Service에서 처리	Controller ↔ Service ↔ Dao 구조 활용

---

🎲 난수 생성 예시

🔸 기본 난수

Random random = new Random();
int value = random.nextInt(3); // 0 ~ 2 사이 난수

🔸 알파벳 난수 생성

구분	코드	설명
소문자	int value = random.nextInt(26) + 'a';	'a'부터 26개 문자 중 랜덤 생성
대문자	int value = random.nextInt(26) + 'A';	'A'부터 26개 문자 중 랜덤 생성
변환	(char)value	문자로 변환

---

⚙️ 기타 설정

🗂️ .properties 파일

• 스프링 프로젝트의 메타데이터 설정 파일
• Map 구조와 유사한 key-value 문법 사용
• 내장 톰캣 Port 설정 가능
• Git에 푸시하지 않음 (보안상 이유)

🧭 favicon.ico

• 프로젝트 기본 아이콘 설정 파일
• 기본 위치: /static 폴더

---

🧾 커밋 메시지 규칙

구분	의미
fix	🐞 버그 수정
feat	✨ 새로운 기능 추가
build	🏗️ 빌드 관련 수정 (라이브러리, 패키지 등)
chore	🔧 기타 자잘한 수정
docs	📝 문서 수정
style	🎨 코드 의미에 영향 없는 수정
refactor	♻️ 코드 리팩토링
test	🧪 테스트 코드 수정
ci	⚙️ CI 자동화 관련 수정

🪶 커밋 형식

<type> [수정 범위] : 설명

예시:
feat [login] : 로그인 기능 추가

---