[JSP] [MVC] [AJAX] [JS] [JSON] AJAX를 이용해 고객센터 페이지 구현하기 #1. 구현 틀 잡기

교보문고 고객센터 페이지를 모델로 하여 MVC패턴을 지키면서 ajax를 이용한 비동기 통신으로 DB에 저장된 데이터를 브라우저에 출력하는 로직을 기록하고자 한다.

참고 모델이 된 교보문고 고객센터 페이지의 내부 코드는 아예 모르지만 개발자 도구를 참고하면서 최대한 비슷하게 따라 하려 노력했다. 

가장 기본인 브라우저 구현 계획부터 혼자 짜보면서 코딩 수준은 둘째치고 로직 흐름을 잡아가는 것에 많은 도움이 되었다고 생각한다. 혼자 기억하긴 뭐해서 이렇게 기록해 보았다. 얍.

 

고객센터 페이지 제작의 첫단계로 이번 포스팅에서는 교보문고 페이지를 살펴보면서 구현 틀을 잡아보도록 하겠다.

 

목표

♠ 특정 페이지 구현 방향을 계획할 수 있다. 

♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 데이터를 가져올 수 있다. 

 

 

참고 모델(교보문고)로 흐름 이해하기

고객센터 페이지(/cscenter)

아래 이미지는 오른쪽 상단의 '고객센터'를 클릭하면 호출되는 고객센터 메인 페이지이다.

호출되는 URL은 https://www.kyobobook.co.kr/cscenter 이다.

살펴보면, 해당 페이지가 크게 4개의 섹션으로 나뉘는 것을 볼 수 있는데, 이들 중 내가 구현할 섹션은 주황, 초록, 파랑 사각형의 섹션이다. 

교보문고 고객센터 페이지

 

1. '자주 묻는 질문' 클릭

고객센터 메인 페이지에서 '도서/상품정보/교과서'를 클릭하면 아래와 같은 페이지가 나타난다.

• URL이 kyobobook.co.kr/cscenter/faq?unfyFaqLscCode=02로 호출된 것을 확인할 수 있다. 
• 자주 묻는 질문의 개수가 7개에서 14개로 바뀌었다.
• 그 아래에 '도서/상품정보/교과서'에 해당하는 질문 및 답변이 출력되고 있다(빨간 박스).

도서/상품정보/교과서 nav 클릭

 

2. '서양도서' 클릭

위의 화면에서 '서양도서' 버튼을 클릭하면 아래와 같이 출력된다.

질문과 답변이 출력되는 하단 빨간 박스의 내용만 바뀌었을 뿐, URL은 바뀌지 않는 것을 확인할 수 있다.

 

이 상태에서 자주 묻는 질문의 '회원' 버튼을 클릭해 보자.

도서/상품정보/교과서 '서양도서' 클릭

 

3. '회원' 클릭

'회원' 버튼을 클릭하니 하단 영역만 바뀌고 URL은 바뀌지 않은 것을 확인할 수 있다. 

'회원' 클릭

 

정리

위에서 살펴본 교보문고 고객센터 페이지를 정리하면 다음과 같다.

1. 고객센터 메인 페이지 URL은 kyobobook.co.kr/cscenter 이다.
2. 메인 페이지에서 '자주 묻는 질문' 영역의 버튼을 클릭하면 kyobobook.co.kr/cscenter/faq URL을 호출한다.
   • 이때, unfyFaqLscCode라는 키값의 파라미터가 넘어간다.
   • 넘어온 unfyFaqLscCode 값에 해당하는 질문과 답변이 화면에 출력된다. 
3. 자주 묻는 질문의 중분류(ex. '서양도서')를 클릭하면 '서양도서'와 관련된 질문 및 답변만 출력된다.
4. '자주 묻는 질문' 영역의 다른 버튼을 클릭하면 그 버튼에 해당하는 질문 및 답변이 새로 출력된다. 

 

 

구현 흐름 계획하기

요청 흐름 및 필요 데이터 정리

위의 정리를 바탕으로 내 프로젝트에서의 큰 틀을 정리해 보겠다(아래 이미지를 참고). 

 

1. 편의상 '자주 묻는 질문'의 키워드를 대분류로, 아래 초록색 박스의 키워드를 중분류로 설정한다.

2. 고객센터 메인 페이지 URL은 http://localhost:8090/cscenter.ok 로 한다.

3. 메인 페이지에서 대분류를 클릭하면 /cscenter/faq.ok? 을 호출한다.

• 이때, fcode 라는 키값의 파라미터가 넘어가고, 대분류 ID에 해당하는 데이터가 화면에 출력된다.

4. 대분류의 중분류 키워드를 클릭하면 ajax로 해당 중분류와 관련된 질문 및 답변을 가져온다.

• ajax로 보내는 요청 URL은 /cscenter/fkcode/faq.ax 이다.
• ajax로 보낼 때 클릭한 중분류 ID와 대분류 ID를 서버로 보낸다.

5. 대분류 다른 버튼을 클릭하면 다시 ajax로 데이터를 가져온다.

• ajax로 보내는 요청 URL은 /cscenter/faq.ax 이다.
• ajax로 보낼 때 클릭한 대분류 ID를 서버로 보낸다.

6. 서버에서 가져와야 하는 데이터는 다음과 같다(아래 이미지 참고).

1. 유저가 클릭한 대분류명(보라색 박스)
2. 중분류 리스트(초록색 박스)
3. 대분류와 중분류에 따른 질문 및 답변(주황색 박스)

가져와야 하는 데이터

 

기본적인 틀은 잡아졌다.

다음 시간에는 DB 테이블 설정 및 서버에서 가져오는 데이터 형식을 정리해 보도록 하겠다. 

 

 

끝.