ㅇ 일 자 : 2026년 7월 14일(화)
ㅇ 주 제 : UI 화면 구현시 모달과 팝업의 차이점 & 데이터 가져오기 에러 조치 하기
1. 화면 구현시 모달과 팝업 : 웹 디자인/개발 분야에서 '팝업(Popup)'과 '모달(Modal)'의 핵심적인 차이점
| 차 이 점 | 팝 업 | 모 달 |
| 창이 열리는 방식 | 브라우저의 새로운 독립된 창(Window)을 생성하여 띄운다. |
현재 보고 있는 웹 페이지(Layer) 위에 어두운 배경과 함께 덧씌운다. |
| 기존 화면 조작 가능 여부 | 창이 떠 있어도 뒤의 메인 페이지를 자유롭게 조작할 수 있다. |
모달창을 닫기 전까지는 뒤의 메인 페이지를 절대 조작할 수 없다 |
| 사용목적 및 용도 | 단순 공지, 이벤트 광고 등 메인 기능 외 부가 정보 노출에 사용 |
로그인, 회원가입, 경고, 필수 동의 등 사용자의 특정 행동을 강제해야 할 때 쓰인다 |
| 기술적 특징 | 사용자 브라우저의 팝업 차단 기능에 걸려 안 보일 수 있다 |
웹 페이지 내부 코드(HTML/CSS)로 구현되므로 차단되지 않는다 |
※ '모달' 방식으로 구현하는 화면 : 배경창은 흐려지고, 마우스 이동시 창이 두개가 함께 움직인다. 좀더 깔끔하게 실행된다.
1. 2. 팝업 (Popup) 구현하기
// html
<!-- 메인 페이지 (index.html) -->
<button onclick="openPopup()">팝업창 열기</button>
<script>
function openPopup() {
// window.open('주소', '창이름', '옵션')
window.open(
'popup.html',
'samplePopup',
'width=400, height=500, top=100, left=100, resizable=no'
);
}
</script>//html
<!-- 팝업으로 열릴 페이지 (popup.html) -->
<!DOCTYPE html>
<html>
<head><title>팝업창</title></head>
<body>
<h3>공지사항 팝업입니다.</h3>
<p>이 창이 떠 있어도 뒤의 메인 페이지를 조작할 수 있습니다.</p>
<button onclick="window.close()">창 닫기</button>
</body>
</html>★웹 개발에서 CSS는 웹페이지의 레이아웃과 디자인을 담당하고, JS(자바스크립트)는 사용자와 상호작용하는 동적인 기능을 담당
//html
<!-- 모달을 열기 위한 버튼 -->
<button id="openModalBtn">모달창 열기</button>
<!-- 모달 전체를 감싸는 컨테이너 (어두운 배경 역할) -->
<div id="modalContainer" class="modal-hidden">
<!-- 실제 모달 콘텐츠 박스 -->
<div class="modal-content">
<h3>필수 동의 안내</h3>
<p>모달창을 닫기 전까지는 뒤의 메인 페이지를 클릭할 수 없습니다.</p>
<button id="closeModalBtn">확인 및 닫기</button>
</div>
</div>//CSS
/* 어두운 배경 처리 및 화면 중앙 정렬 */
#modalContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 뒷 배경을 어둡게 */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* 항상 최상단에 위치 */
}
/* 흰색 모달 박스 스타일 */
.modal-content {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
text-align: center;
}
/* 모달을 숨기는 클래스 */
.modal-hidden {
display: none !important;
}// JavaScript
const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const modalContainer = document.getElementById('modalContainer');
// 모달 열기: 숨김 클래스 제거
openModalBtn.addEventListener('click', () => {
modalContainer.classList.remove('modal-hidden');
});
// 모달 닫기: 숨김 클래스 추가
closeModalBtn.addEventListener('click', () => {
modalContainer.add('modal-hidden');
});
// (선택 사항) 모달 바깥 어두운 영역을 클릭해도 닫히게 설정
modalContainer.addEventListener('click', (e) => {
if (e.target === modalContainer) {
modalContainer.classList.add('modal-hidden');
}
});
2. DB 연동하는 과정에서 데이터 가져오기 실패 원인 확인 및 조치
# 1049 에러 주요 원인
- 데이터베이스 이름 오타: 연결 설정 파일(application.properties, .env, config.js 등)에 적은 DB 이름에 오타가 있는 경우
- 실제 DB를 생성하지 않음: 새 프로젝트를 시작하면서 코드 설정만 해두고, 정작 MySQL 서버에는 CREATE DATABASE...로 물리적인 공간을 만들어두지 않았을 때 발생
- 백업 파일(Dump) 복원 시 오류: 데이터베이스를 백업받은 .sql 파일을 새 서버에 가져와 넣으려고(Import) 할 때, 새 서버에 동일한 이름의 빈 DB를 미리 만들어두지 않아서 자주 발생.
2.1. 코드에서 해결 방법 step-by-step
2.1.1. 접속 정보(ID/PW) 재확인
- 코드나 설정 파일(.env, config.js, settings.py 등)에 적힌 데이터베이스 접속 정보를 다시 확인
- Username: 'user'가 맞는지 확인 (보통 기본 관리자는 root)
- Password: 비밀번호에 오타가 없는지, 공백이 들어가지 않았는지 확인
2.1.2. 권한(Grant) 및 호스트(Host) 확인
- MySQL은 사용자명 뿐만 아니라 접속하는 위치(Host)도 정확히 일치해야 한다.
- 에러 메시지의 'user'@'localhost'는 localhost(현재 컴퓨터)에서 user라는 이름으로 접속을 시도했다
- 데이터베이스 관리자 계정(root 등)으로 접속하여 해당 사용자가 등록되어 있고 권한이 있는지 확인
- 사용자 목록 및 접속 호스트 확인 : user와 localhost가 쌍으로 존재해야 하고, 만약 외부에서 접속하는 것이라면 localhost 대신 %(모든 호스트) 또는 특정 IP가 지정되어 있어야 한다.
# SQL
SELECT User, Host FROM mysql.user;
- 사용자 생성 및 권한 부여 (필요한 경우) : 만약 계정이 없거나 권한이 없다면, 관리자 계정으로 접속하여 아래 명령어로 계정을 생성하고 권한을 부여하기
// SQL
-- 계정 생성 (비밀번호 설정)
CREATE USER 'user'@'localhost' IDENTIFIED BY '실제비밀번호';
-- 특정 데이터베이스(예: mydb)에 대한 모든 권한 부여
GRANT ALL PRIVILEGES ON mydb.* TO 'user'@'localhost';
-- 설정 반영
FLUSH PRIVILEGES;
3. 비밀번호 인증 방식 문제 (MySQL 8.0 이상)
- MySQL 8.0 이상부터는 기본 비밀번호 암호화 방식(caching_sha2_password)이 변경되어, 기존 라이브러리나 툴에서 접속하지 못하는 경우가 있다. 이 경우 기존 방식 (mysql_native_password)으로 변경해 주면 해결된다.
// SQL
ALTER USER 'user'@'localhost' IDENTIFIED WITH mysql_native_password BY '실제비밀번호';
FLUSH PRIVILEGES;
※ 코드의 데이터베이스 설정 부분에서 ID가 user가 맞는지, 비밀번호가 정확한지 먼저 확인후, 그래도 안 된다면 MySQL 서버에 root 계정으로 들어가 user 계정의 생성 여부와 권한을 확인하자.
웹페이지 구현은 실제로 해보면 결코 쉽지 않은 작업이다. 인공지능이 아무리 자동으로 쉽게 해준다고는 하지만 그 문법을 알지 못하면 도무지 이해할 수가 없다. 개발후 유지보수가 관건이다. "도전은 계속된다."
'학습 로그 > Project' 카테고리의 다른 글
| D+60[Project] Team Project. Chatting app - "CodeLike"(개발 완료) (0) | 2026.07.02 |
|---|---|
| D+55 [Project] 팀프로젝트 채팅앱 프로그램(개발 계획) (0) | 2026.06.28 |
| D+49 [Project] 개인 프로젝트를 팀 통합파일로 만들기 실습 (0) | 2026.06.17 |
| D+46 [Project] 프로젝트에서 WBS 무엇일까? (0) | 2026.06.14 |
| D+44 [Project] 프로그램 개발 산출물 작성 방법 (0) | 2026.06.13 |