RE:ISC프로젝트 5(전역)장비 등록 완료
미리 고려해야하는 예외사항
이번에 미리 고려해야하는 예외사항은 다음과 같다.
- 1.장치가 등록되지 않은 경우
- 2.동일한 장치명에 동일한 장비id사용하는경우
- 3.장비를 정말 미친듯이 계속 추가할 경우
- 4.장비의 id로 사용이 불가능한 값을 사용하려하거나, 장비 주석을 말도 안되는 길이로 다는 경우
결과론적으로 말하자면, 이 오류의 대다수는 쉽게 잡을 수 있었지만, 1번과 2번을 처리하는 데에서 꽤 오랫동안 애를 먹었다.
계획도와 달라진 코드 부분
기존의 폴더구조 계획도
변경된 사항은 Model폴더에 DeviceForm클래스가 추가되었고, 이 클래스의 역할은 추가되는 페이지의 수만큼 안전하게 초기화를 하면서 기본값을 설정하는 역할을 해준다.
이 부분에서 내가 또 헛다리를 짚어서 엄청난 시간을 허비했는데, 그건 뒷부분에서 차차 알아보도록 하자
1번 에러 대처하기(트러블 슈팅 있음)
처음에는, SweetAlert2라이브러리를 통해 장비이름없음이 골라지면 post에서 alert를 띄우면 아주 간단하게 해결될 줄 알았다.
그러나 이 부분에서 몇가지 트러블 슈팅을 겪었는데, DeviceForm을 추가한 것도 바로 이 부분때문이다.
The Unicode character오류
프로젝트명을 redirect의 PathVariable로 썼는데, 일부 특이한 프로젝트명(ex.냐옹냐옹)에서만 발생한 에러였다.
간단하게 말하자면, 문자열에 관련된 오류로 UriEncoder을 통하여 프로젝트명을 encode해주면 된다.
projectName = UriEncoder.encode(projectName);
딱 이 한줄 추가하고 바로 오류를 고칠 수 있었다.
No primary or default constructor found for interface
이 부분에서 상당히 오랜 시간이 걸렸는데, 이 문제를 해결하면 NullPointer에러가 뜨고, Null이 안뜨면 계속 이 에러가 사라지지를 않았다.
그래서 하나하나 찍어보니 get에서는 device의 정보들이 잘 들어오는 것을 확인하였고, 장비를 추가하는 부분에서 문제가 생겼음을 짐작할 수 있었따.
그래서 저 에러가 뭔데
자 우선 Null포인터 에러와 저 에러가 번갈아서 뜬다는 것은 어디선가 새로운 List
또한 저 에러는 생성자와 관련된 에러이므로, 생성자를 만들어주고 그 인스턴스를 생성하는 과정중에 Device의 기본값을 넣어주면 된다는 것을 알게되었다.
해결법
위에서 말한 것을 그대로 코드로 옮겨적었다.
public DeviceForm() {
devices = new ArrayList<>();
loadMoreDevices(0); // 아래에 나오는 함수인데 기본값을 설정해주는 함수라고 생각하면 됩니다.
}
사용자 입장 개선
장비 없음을 제외하고 저장하는 것(백엔드코드)는 어렵지 않았으나, js에서 타임리프로 값을 불러오고 alter을 띄우는 과정에서 한참을 헤맸다.
아래에서는 백엔드와 프론트 코드를 각각 어떻게 짜서 성공을 시켰는지 서술을 해볼 예정이다.
백엔드
초반에는 Model.attributes를 습관처럼 사용하였으나, 조금 더 찾아보니 이렇게 무언가 정보를 redirect하거나 에러에 대해 보여줄 때에는 redirectAttributes.attributes가 적확한 코드라는 것을 알게되었다.
그래서 bool타입의 변수A를 false로 초기화한 뒤에, 만약 장비이름이 0인 애가 있다면 플래그를 바꾸어주고 그렇지 않은 경우에만 저장할 장비 목록에 추가해주는 식으로 수정해주었다.
프론트
<script>
$(document).ready(function() {
const urlParams = new URLSearchParams(window.location.search);
const warningMessage = urlParams.get('warningMessage');
if (warningMessage) {
Swal.fire({
icon: 'warning',
title: '경고',
text: decodeURIComponent(warningMessage)
});
}
});
</script>
하나씩 보면 URLSearcharams를 통해 내가 url에 redirect시킨 내용을 가져오고, 그 메시지를 decode해서 안전하게 텍스트로 변화시키는 원리이다.
2번 에러
이건 좀 쉽게 해결했다. 파이어베이스의 경우, 한 컬렉션 내부에서는 동일한 문서명을 쓸 수 없으므로 장비명과 id명을 하나의 문서명으로 만들어주었다.
시간이 오래걸렸던 이유는 파이어베이스로 해결하면 될 것을 직접 해결하려고 낑낑거렸기 때문인데, 앞으로는 라이브러리를 쓸 때엔 거기에서 어디까지 지원해주는지를 먼저 알아봐야겠다.
3번 에러
타임리프를 사용하여 아주 간단하게 해결했다.
$(document).ready(function() {
// 행 추가 버튼 클릭 시 새로운 행 추가
$("#addRowBtn").click(function() {
var rowIndex = $("tbody tr").length; // 현재 행 개수를 기반으로 인덱스 설정
if (rowIndex >= 100) {
Swal.fire({
icon: 'warning',
title: '경고',
text: '최대 100개의 장비만 추가할 수 있습니다.',
});
return; // 최대 개수 초과 시 추가를 중단합니다.
}
아래에 있는 부분은 html이므로 생략했고,유의할 점은 현재 행 개수를 기반으로 하지않고, 새로운 행만을 기준으로 해버리면 예전에 저장된 행들+새로운행의 값이 100을 넘겨버릴 수도 있다.
4번 에러
사실 이 부분은 에러라기보다는 유저의 실수를 커버쳐주기 위한 부분에 가깝다.
우선 장비의 경우 id값이 한정된 범위이므로 일일이 select option으로 특정 범위만 선택할 수 있는 드롭박스를 만들어주었고, 장비주석은 maxlength를 통하여 길이 제한을 두었다.
개인적으로 느낀점
저번에는 기능을 구현하기 위해 노력했다면, 이번에는 사람들이 이 사이트를 어떻게 쓸 것인가에 조금 더 초점을 두기 시작했다.
그리고 불확실한 것들은 직접 draw.io로 그리면서 정리하고 그래도 이해가 안가는건 바로 이 프로젝트를 리드해주시는 분껭 연락을 드렸다. 일은 이렇게 하는건가보다.
댓글남기기