기존 팀 프로젝트에 추가하는 첫 번째 기능은 바로, "1차 필터 신청 날짜 제한" 기능이다.
그게 무슨 기능인가요? 라는 질문에 답을 먼저 드리자면면 말이죠,
입력해둔 더미데이터 중 parent21 계정으로 로그인해서 확인해보면 현재 "2025-05-14 ~2025-05-16" 에 일반 돌봄 예약이 확정(시터수락O, 돌봄종료X)되어 있는 걸 볼 수 있는데,
메인 페이지에서 일반 돌봄 신청을 위한 필터 조건을 설정할 때는 아무런 제한이 없는 상태이다! 따라서 1일 1돌봄 신청이 아니라 중복 신청이 가능한 구조라는 것! 이를 해결하기 전 현재 작성된 코드를 먼저 살펴보겠다.
<div class="label">돌봄 희망 날짜</div>
<div class="date-range">
<input type="date" name="start_date" id="date-start" required="required">
<span>부터</span>
<input type="date" name="end_date" id="date-end" required="required">
<span>까지</span>
</div>
genMain.jsp 페이지의 해당 엘리먼트는 위와 같은 HTML 태그로 구성되어 있다.
/**
일반 돌봄 1차 필터 관련 스크립트 (genFilter.js)
*/
//================== 이 페이지가 불려지면 =========================
document.addEventListener('DOMContentLoaded', function()
{
// 1. 날짜 선택 제한 - 돌봄 시작일
// Date() → 오늘 날짜 객체 생성
var today = new Date();
// 오늘로부터 4일 후 (최소 날짜)
var minStartDate = new Date(today);
minStartDate.setDate(today.getDate() + 4);
// 오늘로부터 33일 후 (최대 날짜)
var maxStartDate = new Date(today);
maxStartDate.setDate(today.getDate() + 33);
// 돌봄 시작일의 최소, 최대 날짜 설정
var minStartDateStr = formatDate(minStartDate);
var maxStartDateStr = formatDate(maxStartDate);
// 시작 날짜와 종료 날짜 입력 → min, max 속성 설정
$('#date-start').attr('min', minStartDateStr);
$('#date-start').attr('max', maxStartDateStr);
//-------------------------------
// 2. 날짜 선택 제한 - 돌봄 종료일
// 시작 날짜 선택 시 종료 날짜는 최소값 표기 및 최대값 설정
$('#date-start').on('change', function()
{
var startDate = $(this).val();
// 종료일 최소값은 시작일로 설정
$('#date-end').attr('min', startDate);
// 종료일 최대값은 시작일로부터 29일 후로 설정
var maxEndDate = new Date(startDate);
maxEndDate.setDate(maxEndDate.getDate() + 29);
var maxEndDateStr = formatDate(maxEndDate);
$('#date-end').attr('max', maxEndDateStr);
// 만약 종료 날짜가 새로운 시작 날짜보다 이전이면 종료 날짜를 시작 날짜와 같게 설정
if ($('#date-end').val() < startDate)
{
$('#date-end').val(startDate);
}
});
//-------------------------------
// 3. 시간 선택 제한
// 경고 메시지 요소 기본적으로 숨기기
$('#max-time-warning').hide();
$('#min-time-warning').hide();
// 시작 시간, 종료 시간 변경 시 검사 실행
$('#time-start').on('change', checkTimeDiff);
$('#time-end').on('change', checkTimeDiff);
// 폼 제출 시 유효성 검사
$('#primary-filter-form').on('submit', function(event)
{
// 시간 차이 재확인
if ($('#time-start').val() && $('#time-end').val())
{
var startHour = parseInt($('#time-start').val());
var endHour = parseInt($('#time-end').val());
var hourDiff = endHour - startHour;
// 8시간 초과면 제출 막기
if (hourDiff > 8)
{
// 경고 팝업
alert('일반 돌봄 하루 최대 이용시간은 8시간입니다.');
event.preventDefault(); // 폼 제출 막기
}
// 1시간 미만이면 제출 막기
if (hourDiff <= 0)
{
// 경고 팝업
alert('일반 돌봄은 최소 2시간부터 이용 가능합니다.');
event.preventDefault(); // 폼 제출 막기
}
}
});
});
//================== 위 기능을 위한 함수 =========================
// 함수 1.날짜 → YYYY-MM-DD 형식으로 변환
function formatDate(date)
{
var year = date.getFullYear();
var month = String(date.getMonth() + 1).padStart(2, '0'); //-- LPAD 와 같다.
var day = String(date.getDate()).padStart(2, '0');
return year + '-' + month + '-' + day;
}
// 함수 2.시간 차이 검사 함수
function checkTimeDiff()
{
// 두 시각이 모두 선택되었다면,
if ($('#time-start').val() && $('#time-end').val())
{
// 시간 계산
var startHour = parseInt($('#time-start').val());
var endHour = parseInt($('#time-end').val());
var hourDiff = endHour - startHour;
// 시간 차가 8시간 초과라면,
if (hourDiff > 8)
{
// 경고 표시
$('#max-time-warning').show();
}
else
{
// 경고 숨기기
$('#max-time-warning').hide();
}
// 시간 차가 1시간 미만이라면,
if (hourDiff <= 0)
{
// 경고 표시
$('#min-time-warning').show();
}
else
{
// 경고 숨기기
$('#min-time-warning').hide();
}
}
}
그리고 별도 파일로 구성된 일반 돌봄 1차 필터 관련 스크립트 (genFilter.js)는 위와 같다. 즉, 현재는 input 엘리먼트만을 가지고 날짜 선택 제한을 구성하고 있다는 것! 프로젝트 진행 당시에도 input 엘리먼트만으로는 min과 max 속성을 제어할 수는 있어도 특정 날짜에 대한 속성 제어는 어렵고, 이를 해결하기 위해서는 jQuery UI의 datepicker 와 같은 외부 라이브러리 사용이 필요하다는 걸 인지하고 있었다. 그러나 시간적 제약에 후순위로 미루게 되었던ㅠㅠ
그래서 오늘 기능 구현을 위해 적용해볼 라이브러리는! Vanilla JavaScript 라이브러리 중 하나인 Flatpickr 이다. 요즘 순수 자바스크립트에 관심을 갖고 있다보니 가볍고, 의존성이 낮고, 렌더링 속도도 빠른 Flatpickr 를 한 번 써보고 싶었다. 그리고 겸사겸사 기존 코드에서 사용중이던 jQuery 도 Vanilla JavaScript 로 변경해볼까 한다.ㅎㅎ
그럼 하나씩 수정해보자.
1. element 가져올 때 $('#아이디명') → documnet.getElementByID('아이디명')
/*
// 시작 날짜와 종료 날짜 입력 → min, max 속성 설정
$('#date-start').attr('min', minStartDateStr);
$('#date-start').attr('max', maxStartDateStr);
*/
// 시작 날짜와 종료 날짜 입력 → min, max 속성 설정
var dateStartElement = document.getElementById('date-start');
dateStartElement.setAttribute('min', minStartDateStr);
dateStartElement.setAttribute('max', maxStartDateStr);
jQuery에서는 $ 마크와 함께 간편하게 이용했지만, jQuery 선택자를 사용하지 않기로 했으니! 순수 Javascript 선택자인 document.getElementById() 를 이용해 element 를 찾아와 변수를 선언 및 초기화(var dateStartElement) 해준다. 엘리먼트 객체를 가져온 만큼, 그 속성의 설정도 .attr() 메소드 대신 .setAttribute() 메소드로 변경해준다. 기존 스크립트 코드 전반에 사용된 jQuery를 이와 같은 방법으로 대체해준다.
📌 만약 엘리먼트를 ID로 가져오는 게 아니라 Class 로 가져왔다면?
$('.클래스명1.클래스명2') → document.querySelector( '.클래스명1.클래스명2')
위와 같이, .querySelector 속성을 이용해서 jQuery를 대체해줄 수 있다. 앞서 헤더 파일 내 클래스 속성을 변경하기 위해 사용해봤던 코드다. 나아가, .querySelector 에 해당하는 값이 여럿일 경우, 첫 번째 값만을 찾아오게 되는데! 만약 다중값을 모두 받아와야 하는 경우에는 document.querySelectorAll ( '.클래스명1.클래스명2') 을 사용하면 배열 값으로 조회 결과를 받아올 수 있다.
📌 jQeury 메소드 → 네이티브 JavaScript 메소드
$(element).attr() → element.setAttribute()
$(element).val() → element.value
$(element).show()→ element.style.display = 'block'
$(element).hide() → element.style.display = 'none'
📌이벤트 핸들링
$(element).on('event', handler) → element.addEventListener('event', handler)
2. Flatpickr 주요 속성 이해하기
Flatpickr 의 속성도 참 많지만 일단 저는 제가 쓰고자 하는 주요 속성 위주로만 몇 가지 살펴보려 한다.
dateFormat : 날짜 형식을 지정하는 속성
dateFormat: "Y-m-d" // 2025-05-12 형식
dateFormat 에 사용되는 Format 문자는 아래와 같다.
- Y: 4자리 연도 (2025) / y: 2자리 연도 (25)
- m: 2자리 월 (05) / n: 1자리 월 (5)
- F: 월 이름 (May) / M: 짧은 월 이름 (May)
- d: 2자리 일 (09) / j: 1자리 일 (9)
- D: 짧은 요일 (Mon) / l: 긴 요일 (Monday)
- H: 24시간 형식 시간 (13) / h: 12시간 형식 시간 (01)
- i: 분 (30)
- S: 초 (00)
defaultDate : 기본 날짜
defaultDate: "2025-05-12" // 특정 날짜
defaultDate: "today" // 오늘
defaultDate: new Date() // 현재 날짜 객체
조금 독특한게 있다면, datePickr 에서는 특정 문자열 값으로 날짜를 지정할 수 있다는 것! 위와 같이 "today"(오늘 날짜) 가 대표적이고, "tomorrow" (내일 날짜), "yesterday" (어제 날짜) 도 사용 가능하다. 물론 new Date() 와 같이 날짜 객체를 생성하는 것도 가능하다.
defaultDate: "today", // 오늘
defaultDate: "+3", // 오늘로부터 3일 후
defaultDate: "+3d", // 위와 동일 (3일 후)
defaultDate: "+2w", // 2주 후
defaultDate: "+1m", // 1개월 후
defaultDate: "+1y", // 1년 후
나아가 상대적인 날짜도 문자열로 작성 가능하다. 위에서 언급한 Format 를 활용하면 된다.
mode : 선택 모드
mode: "single" // 단일 날짜 선택 (기본값)
mode: "multiple" // 여러 날짜 선택
mode: "range" // 날짜 범위 선택
mode: "time" // 시간만 선택
내 경우 기존 UI 형태를 유지할 계획이므로 기본값을 유지하겠지만, mode 속성을 이용하면 날짜의 다중 선택이 가능하다.
minDate / maxDate : 선택 가능한 가장 이른/늦은 날짜
minDate: "today" // 오늘부터
minDate: "2025-05-01" // 특정 날짜부터
minDate: "+7d" // 7일 후부터
maxDate: "2025-12-31" // 특정 날짜까지
maxDate: "+3m" // 3개월 후까지
disable : 날짜 비활성화 (선택 불가) ↔ enable : 날짜 활성화 (선택 가능)
// 특정 날짜 비활성화
disable: ["2025-05-15", "2025-05-20", "2025-05-25"]
// 날짜 범위 비활성화
disable:
[
{ from: "2025-05-01", to: "2025-05-10" }
]
// 함수를 사용한 비활성화 (모든 토요일, 일요일 비활성화)
disable:
[
function(date)
{
return (date.getDay() === 0 || date.getDay() === 6);
}
]
// 특정 날짜 활성화
enable: ["2025-05-15", "2025-05-20"]
내가 사용할 flatpickr의 핵심 속성 disable 은 특정 날짜, 기간은 물론 함수를 이용해서 반복되는 날짜를 비활성화시키는 것도 가능하다. 나는 사전에 예약 신청한 돌봄의 시작일부터 종료일 사이 값을 비활성화해야 하므로 from, to 키워드와 함께 disable 속성을 사용해볼 계획이다. 참고로, disable의 반대 속성으로 enable 도 존재한다.
onChange : 날짜가 선택(변경)되었을 때 이벤트 처리
onChange: function(selectedDates, dateStr, instance)
{
// selectedDates: 선택된 날짜 객체 배열
// dateStr: 선택된 날짜의 문자열 표현
// instance: Flatpickr 인스턴스
}
오늘 내 스크립트 코드를 좀 더 간단하게 만들어줄 함수, onChange 이다. anonymous function 과 함께 쓰이며 날짜 변경 시 이벤트 처리를 정의할 수 있다.
showMonths : 한 번에 표시할 월의 수 설정
showMonths: 2 // 2개월을 동시에 표시
동시에 여러 월을 표시하는 옵션도 존재한다. 이 부분은 생각하지 못했던 내용인데 고려해서 코드를 수정해보도록 할게요.
📌 그 외 속성이나 함수에는 무엇이 있을까요?
이벤트 처리를 위한 함수: onOpen, onClose, onReady
디스플레이 관련 옵션: inline, static, appendTo, monthSelectorType
시간 관련 옵션: enableTime, noCalendar, time_24hr, minTime, maxTime
기타 옵션: allowInput, weekNumbers, shorthandCurrentMonth, locale, position, disableMobile
참고로, Flatpicker의 인스턴스는 여러 메소드도 제공하고 있는데, 당장 사용하지는 않더라도 언젠가 유용할 것 같아 함께 남겨본다.
var picker = flatpickr("#date-input", {});
picker.open(); // 달력 열기
picker.close(); // 달력 닫기
picker.clear(); // 선택된 날짜 지우기
picker.destroy(); // Flatpickr 인스턴스 제거
picker.set("minDate", new Date()); // 속성 설정
picker.setDate("2025-05-12"); // 날짜 선택3. Flatpickr 적용하여 script 수정하기
/**
일반 돌봄 1차 필터 관련 스크립트 (genFilter.js)
*/
//================== 이 페이지가 불려지면 =========================
document.addEventListener('DOMContentLoaded', function()
{
var dateStartElement = document.getElementById('date-start');
var dateEndElement = document.getElementById('date-end');
// 비활성화할 날짜 배열 → 임의의 날짜. 이후 쿼리로 얻어오기.
var disabledDates = ["2025-05-15", "2025-05-20", "2025-05-25"];
// 시작 날짜 선택기
var startDatePicker = flatpickr("#date-start", {
dateFormat: "Y-m-d" // 날짜 포맷
, disable: disabledDates // 비활성화 날짜 배열
, minDate: "+4d" // 오늘로부터 4일 후
, maxDate: "+33d" // 오늘로부터 33일 후
, onChange: function(selectedDates) // 돌봄 시작일로 선택한 날짜
{
if (selectedDates[0])
{
var maxDate = new Date(selectedDates[0]); // 돌봄 종료일의 최대 날짜 초기화(돌봄 시작일의 인스턴스)
maxDate.setDate(maxDate.getDate() + 29); // ...는 시작일로부터 29일 후까지만 가능
endDatePicker.set('minDate', selectedDates[0]); // 돌봄 시작일이 곧 돌봄 종료 최소일
endDatePicker.set('maxDate', maxDate); // 돌봄 종료일의 초대일은 시작일 + 29일 후
// 만약 종료일 값 존재 && 현재 선택된 종료 날짜 < 새 시작 날짜이면
if (dateEndElement.value && new Date(dateEndElement.value) < selectedDates[0])
{
endDatePicker.setDate(selectedDates[0]); // 종료일을 새 시작 날짜로 설정(변경)
}
}
}
});
// 종료 날짜 선택기
var endDatePicker = flatpickr("#date-end", {
dateFormat: "Y-m-d" // 날짜 포맷
, disable: disabledDates // 비활성화 날짜 배열
, minDate: "+4d" // 오늘로부터 4일 후
// maxDate는 시작 날짜가 선택된 후 동적으로 설정됨
});
/*
// 1. 날짜 선택 제한 - 돌봄 시작일
// Date() → 오늘 날짜 객체 생성
var today = new Date();
// 오늘로부터 4일 후 (최소 날짜)
var minStartDate = new Date(today);
minStartDate.setDate(today.getDate() + 4);
// 오늘로부터 33일 후 (최대 날짜)
var maxStartDate = new Date(today);
maxStartDate.setDate(today.getDate() + 33);
// 돌봄 시작일의 최소, 최대 날짜 설정
var minStartDateStr = formatDate(minStartDate);
var maxStartDateStr = formatDate(maxStartDate);
// 시작 날짜와 종료 날짜 입력 → min, max 속성 설정
var dateStartElement = document.getElementById('date-start');
dateStartElement.setAttribute('min', minStartDateStr);
dateStartElement.setAttribute('max', maxStartDateStr);
//-------------------------------
// 2. 날짜 선택 제한 - 돌봄 종료일
// 시작 날짜 선택 시 종료 날짜는 최소값 표기 및 최대값 설정
dateStartElement.addEventListener('change', function()
{
var startDate = this.value;
var dateEndElement = document.getElementById('date-end');
// 종료일 최소값은 시작일로 설정
dateEndElement.setAttribute('min', startDate);
// 종료일 최대값은 시작일로부터 29일 후로 설정
var maxEndDate = new Date(startDate);
maxEndDate.setDate(maxEndDate.getDate() + 29);
var maxEndDateStr = formatDate(maxEndDate);
dateEndElement.setAttribute('max', maxEndDateStr);
// 만약 종료 날짜가 새로운 시작 날짜보다 이전이면 종료 날짜를 시작 날짜와 같게 설정
if (dateEndElement.value < startDate)
{
dateEndElement.value = startDate;
}
});
*/
//-------------------------------
// 3. 시간 선택 제한
// 경고 메시지 요소 기본적으로 숨기기
var maxTimeWarning = document.getElementById('max-time-warning');
var minTimeWarning = document.getElementById('min-time-warning');
maxTimeWarning.style.display = 'none';
minTimeWarning.style.display = 'none';
// 시작 시간, 종료 시간 변경 시 검사 실행
var timeStartElement = document.getElementById('time-start');
var timeEndElement = document.getElementById('time-end');
timeStartElement.addEventListener('change', checkTimeDiff);
timeEndElement.addEventListener('change', checkTimeDiff);
// 폼 제출 시 유효성 검사
var filterForm = document.getElementById('primary-filter-form');
filterForm.addEventListener('submit', function(event)
{
// 시간 차이 재확인
if (timeStartElement.value && timeEndElement.value)
{
var startHour = parseInt(timeStartElement.value);
var endHour = parseInt(timeEndElement.value);
var hourDiff = endHour - startHour;
// 8시간 초과면 제출 막기
if (hourDiff > 8)
{
// 경고 팝업
alert('일반 돌봄 하루 최대 이용시간은 8시간입니다.');
event.preventDefault(); // 폼 제출 막기
}
// 1시간 미만이면 제출 막기
if (hourDiff <= 0)
{
// 경고 팝업
alert('일반 돌봄은 최소 1시간부터 이용 가능합니다.');
event.preventDefault(); // 폼 제출 막기
}
}
});
});
//================== 위 기능을 위한 함수 =========================
/*
//함수 1.날짜 → YYYY-MM-DD 형식으로 변환
function formatDate(date)
{
var year = date.getFullYear();
var month = String(date.getMonth() + 1).padStart(2, '0'); //-- LPAD 와 같다.
var day = String(date.getDate()).padStart(2, '0');
return year + '-' + month + '-' + day;
}
*/
//함수 2.시간 차이 검사 함수 (+ 경고 메시지 출력)
function checkTimeDiff()
{
var timeStartElement = document.getElementById('time-start');
var timeEndElement = document.getElementById('time-end');
var maxTimeWarning = document.getElementById('max-time-warning');
var minTimeWarning = document.getElementById('min-time-warning');
// 두 시각이 모두 선택되었다면,
if (timeStartElement.value && timeEndElement.value)
{
// 시간 계산
var startHour = parseInt(timeStartElement.value);
var endHour = parseInt(timeEndElement.value);
var hourDiff = endHour - startHour;
// 시간 차가 8시간 초과라면,
if (hourDiff > 8)
{
// 경고 표시
maxTimeWarning.style.display = 'block';
}
else
{
// 경고 숨기기
maxTimeWarning.style.display = 'none';
}
// 시간 차가 1시간 미만이라면,
if (hourDiff <= 0)
{
// 경고 표시
minTimeWarning.style.display = 'block';
}
else
{
// 경고 숨기기
minTimeWarning.style.display = 'none';
}
}
}
이렇게 수정하고 실행해보았다. 결과는!
비활성화하겠다고 생각한 날짜는 제대로 적용되었지만, 돌봄 희망 시작일의 최소일이 적용되지 않았다. 개발자도구를 열어보니 minDate, maxDate 모두 에러가 발생하고 있는 모습이다. 찾아보니 버전에 따라 "+4d" 형태의 문자열이 상대적인 날짜를 표시하지 못하기 때문이라고. 그래서 Javascript의 Date 객체를 통해 오늘 날짜를 구하고, 최소 날짜와 최대 날짜를 직접 작성해주는 식으로 코드 일부를 아래와 같이 변경했다.
// ...
var dateStartElement = document.getElementById('date-start');
var dateEndElement = document.getElementById('date-end');
// 오늘 날짜
var today = new Date();
// 돌봄 희망 시작일의 최소 날짜
var minDate = new Date(today);
minDate.setDate(today.getDate()+4); // 오늘로부터 4일 후
// 돌봄 희망 시작일의 최대 날짜
var maxDate = new Date(today);
maxDate.setDate(today.getDate() + 33); // 오늘로부터 33일 후
// 비활성화할 날짜 배열 → 임의의 날짜. 이후 쿼리로 얻어오기
var disabledDates = ["2025-05-15", "2025-05-20", "2025-05-25"];
// 시작 날짜 선택기
var startDatePicker = flatpickr("#date-start", {
dateFormat: "Y-m-d" // 날짜 포맷
, disable: disabledDates // 비활성화 날짜 배열
//, minDate: "+4d"
//, maxDate: "+33d"
, minDate: minDate
, maxDate: maxDate
, onChange: function(selectedDates) // 돌봄 시작일로 선택한 날짜
{
if (selectedDates[0])
{
var maxDate = new Date(selectedDates[0]); // 돌봄 종료일의 최대 날짜 초기화(돌봄 시작일의 인스턴스)
maxDate.setDate(maxDate.getDate() + 29); // ...는 시작일로부터 29일 후까지만 가능
endDatePicker.set('minDate', selectedDates[0]); // 돌봄 시작일이 곧 돌봄 종료 최소일
endDatePicker.set('maxDate', maxDate); // 돌봄 종료일의 초대일은 시작일 + 29일 후
// 만약 종료일 값 존재 && 현재 선택된 종료 날짜 < 새 시작 날짜이면
if (dateEndElement.value && new Date(dateEndElement.value) < selectedDates[0])
{
endDatePicker.setDate(selectedDates[0]); // 종료일을 새 시작 날짜로 설정(변경)
}
}
}
});
// 종료 날짜 선택기
var endDatePicker = flatpickr("#date-end", {
dateFormat: "Y-m-d" // 날짜 포맷
, disable: disabledDates // 비활성화 날짜 배열
//, minDate: "+4d"
, minDate: minDate
// maxDate는 시작 날짜가 선택된 후 동적으로 설정됨
});
// ...
다시 조회해본 결과는..!
최소 날짜와 최대 날짜가 원하던 대로 반영되어 출력되고 있는 모습이다. 여기서 조금 더 욕심을 내서, 월과 요일 표기를 한글로 바꾸고 싶다. 방법은 의외로 간단하다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ko.js"></script>
Flatpickr 라이브러리 로드 구문 아래에 한글 라이브러리 로드 구문을 추가해준다. jQuery는 이제 대체했으므로 주석처리했다. (맨 위에 있는 건 CSS 라이브러리다.)
locale: "ko" // 한국어 설정
Javascript 파일(genFilter.jsp)의 날짜 선택기에도 위 속성 구문을 입력해 한국어 설정을 추가해주면 끝이다.
임시로 넣어뒀던 비활성화 날짜 배열만 실제 값으로 서버에서 받아오면 되겠다.ㅎㅎ
'Sist > Final Projet : I_Look' 카테고리의 다른 글
| [Java Wep Application] 파이널 프로젝트 Ⅶ. 회고 (8) | 2025.05.22 |
|---|---|
| [Java Web Application] 파이널 프로젝트 Ⅵ. 기능 추가 구현 - 리뷰 미작성 시 평점 열람 제한 (1) | 2025.05.16 |
| [Java Wep Application] 파이널 프로젝트 Ⅴ. 프로젝트 결과물 (2) | 2025.05.14 |
| [Java Wep Application] 파이널 프로젝트 Ⅳ. DB 논리/물리 설계 (1) | 2025.05.13 |
| [Java Wep Application] 파이널 프로젝트 Ⅲ. 화면 레이아웃 구성(스토리보드/UI 설계) (0) | 2025.05.13 |