Trouble Shooting 1
A. 구현요구
- Userinput을 버튼클릭으로 서버로 발송하고 웹페이지 로직에 따라서 처리후 dynamic하게 컨텐츠를 출력하고자함.
-> javascript로 window.histroy.pushstate로 url을 바꾸고, fetch로 getmethod를 parameter을 전달하였음.
B. 문제상황
- 버튼을 눌렀을때, url이 parameter값이 포함되도록 변하나 익스플로러의 화면이 변하지 않음. 새로고침시에는 화면이 변함
C. 문제원인 확인순서
a. request가 제대로 발송되었는지 (x)
b. 서버측에 response가 제대로 도착하고 있는지(x)
c. response가 제대로 도착한 후에 JSP의 Logic이 제대로 다시 실행되고 있는지(x)
d. 주요 object들이 null값이 들어가서 실행이 되지 않은 것은 아닌지(x)
e. 모두 확인하였으나 ChatGPT를 활용하여 문제 해결시도
- 나의 질문 : it is not dynamically rendering. when i pressed the button the url change, but the contents does not change. instead when i refresh the page it is loaded, what could be wrong?
- GPT : potential probem to check 1. Form Submission Behavior problem 2. JavaScript Handling 3. browser chaching issue 4. server logic error
- 나의질문 : i already checked 1,3,4 of your suggested potential problem. on the way, in chrome, network tap의 fetch/xhr tap i found out new record is stack up without changing the page contents. what does it mean? when i clicked the document it showed desired page
- GPT : This indicates that the server is receiving the requests and responding, but the main issue seems to be with how the response is being handled or inserted into the page. Correctly Updating the DOM.
f. 위의 질의를 통해서 DOM update문제로 판단하고 document.getElementById('location').innerHTML = this.responseText;이 문제임을 식별 하여, table의 inner html만 별도로 html assignment를 하였으나 아래와 같은 현상발생
g. dynamic하게 생성된 웹페이지는 전체 html이 아니라 테이블 contents만 생성되는 jsp를 따로 생성해야한다는 것을 인지함.
e. 페이지 부분만 jsp를 별도로 생성할 수 있지만 현재 굳이 그럴 필요가 없어보여 html을 <html>tag의 innerhtml에 assign하여 페이지 전체를 reload 진행함.(문제해결)
Trouble Shooting 2
A. 문제상황
서버 화면에서 한글이 깨지는 것을 발견함
B. 문제해결 확인순서
a. 서버에서 DB로 올릴때 한글이 깨지는지 확인
b. DB에서 서버 발신후 rendering시 한글이 깨지는지확인
c. client에서 서버로 발신후 서버에서 바로 display하는 경우 한글이 깨지는 것을 확인
d. 서버에서 서버간의 request가 Encoding 설정이 안되어있는 것으로 추정하였고 request.setcharacterencoding(utf-8) 추가하여 문제해결
배운점
- form tag, select tag, input hidden tag,
- javascript fetch api
- jsp와 서블릿 차이점 그리고 JSP사용법
- DTO와 Service 분리 원칙
- 개발과정에서의 GPT 활용숙력도 상승
'개발 프로젝트 > DB&PureJava기반 웹개발' 카테고리의 다른 글
| 위치기반 공공와이파이 확인시스템 - 프로젝트/코드 리뷰 (0) | 2024.07.14 |
|---|---|
| 위치기반 공공와이파이 확인시스템 - readme (0) | 2024.07.13 |
| 위치기반 공공와이파이 확인시스템 <1> 개발시작전 요구사항 분석 (0) | 2024.06.24 |