감 잃지말고 개발하기

교보문고 고객센터 페이지를 모델로 하여 MVC패턴을 지키면서 ajax를 이용한 비동기 통신으로 DB에 저장된 데이터를 브라우저에 출력하는 로직을 기록하고자 한다. 지난 포스팅에서는 고객센터 메인 페이지 및 FAQ 페이지에서 중요한 HTML 코드를 살펴보았고, FAQ 페이지가 요청되는 두 가지 방식을 정리해 보았다. 이번 포스팅에서는 두 가지 방식 중 첫 번째 방식의 로직을 기록해 보겠다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 데이터를 출력할 수 있다. ♠ 교보문고 고객센터 페이지를 구현할 수 있다. 로직 흐름 고객센터 메인 페이지에서 대분류를 클릭하면 새로운 URL이 요청되고, 파라미터 fcode가 서버로 넘어간다(index.jsp). 해당 컨트롤러에서 해당 URL을 받아 fcode..

교보문고 고객센터 페이지를 모델로 하여 MVC패턴을 지키면서 ajax를 이용한 비동기 통신으로 DB에 저장된 데이터를 브라우저에 출력하는 로직을 기록하고자 한다. 지난 포스팅에서는 고객센터 페이지를 구현하기 위해 필요한 DB 테이블 설정 및 VO 클래스 생성, 서버에서 보낼 데이터의 형식을 기록했다. 이번 포스팅에서는 고객센터 메인 페이지 및 FAQ 페이지에서 중요한 HTML 코드를 살펴보고, FAQ 페이지가 요청되는 두 가지 방식을 정리해 보겠다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 데이터를 출력할 수 있다. ♠ 교보문고 고객센터 페이지를 구현할 수 있다. 로직 흐름 코드 및 실행화면 1. 고객센터 메인 페이지(index.jsp) 1-1. ▼ 고객센터 메인 페이지 아래 이미지는 ..

교보문고 고객센터 페이지를 모델로 하여 MVC패턴을 지키면서 ajax를 이용한 비동기 통신으로 DB에 저장된 데이터를 브라우저에 출력하는 로직을 기록하고자 한다. 지난 포스팅에서는 교보문고 페이지를 살펴보면서 전체적인 구현 틀을 잡아보았다. 이번 포스팅에는 고객센터 페이지를 구현하기 위해 필요한 DB 테이블 생성 및 VO 클래스 생성과 ajax를 통해 서버에서 보낼 JSON 데이터 형식을 잡아보도록 하겠다. 목표 ♠ 특정 페이지 구현을 위해 필요한 DB 테이블을 생성하고 설정할 수 있다. ♠ 특정 페이지 구현을 위해 필요한 VO 클래스를 생성할 수 있다. DB 테이블 생성 및 설정 고객센터 페이지에서 생성한 테이블은 다음과 같다. 1. FAQ 대분류 테이블 대분류 테이블에 필요한 칼럼은 대분류 코드(PK..

교보문고 고객센터 페이지를 모델로 하여 MVC패턴을 지키면서 ajax를 이용한 비동기 통신으로 DB에 저장된 데이터를 브라우저에 출력하는 로직을 기록하고자 한다. 참고 모델이 된 교보문고 고객센터 페이지의 내부 코드는 아예 모르지만 개발자 도구를 참고하면서 최대한 비슷하게 따라 하려 노력했다. 가장 기본인 브라우저 구현 계획부터 혼자 짜보면서 코딩 수준은 둘째치고 로직 흐름을 잡아가는 것에 많은 도움이 되었다고 생각한다. 혼자 기억하긴 뭐해서 이렇게 기록해 보았다. 얍. 고객센터 페이지 제작의 첫단계로 이번 포스팅에서는 교보문고 페이지를 살펴보면서 구현 틀을 잡아보도록 하겠다. 목표 ♠ 특정 페이지 구현 방향을 계획할 수 있다. ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 데이터를 가져올 수 있..

MVC패턴을 지키면서 특정 페이지에서 ajax를 이용한 비동기 통신으로 댓글을 작성하고 모든 댓글을 출력하는 로직을 기록하고자 한다. 지난 포스팅에는 댓글을 화면에 출력하는 로직을 기록했다. 이번 포스팅에는 대댓글을 작성하고 저장하는 로직을 기록해 보기로 한다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 대댓글 저장 로직을 구현할 수 있다. ♠ DB에서 댓글 테이블에 필요한 그룹 칼럼, 깊이 칼럼, 출력 순서 칼럼을 이해할 수 있다. 로직 흐름 도서 상세 페이지의 댓글이 출력되는 영역(왼쪽)에서 "댓글" 버튼을 클릭한 후, 댓글을 작성하는 영역(오른쪽)에서 대댓글을 작성하고 "등록하기" 버튼을 누르면 ajax로 Form의 데이터가 서버에 전송된다(bookView.jsp). 해당 컨트롤러에..

MVC패턴을 지키면서 특정 페이지에서 ajax를 이용한 비동기 통신으로 댓글을 작성하고 모든 댓글을 출력하는 로직을 기록하고자 한다. 지난 포스팅에 이어 이번 포스팅에는 같은 도서 아이디를 가진 모든 댓글을 화면에 출력하는 로직을 기록해 보기로 한다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 댓글 출력 로직을 구현할 수 있다. ♠ DB에서 댓글 테이블에 필요한 그룹 칼럼, 깊이 칼럼, 출력 순서 칼럼을 이해할 수 있다. 로직 흐름 도서 상세 페이지의 댓글 네비 버튼을 클릭하면 스크립트 함수가 실행되고, ajax 함수로 해당 도서 아이디가 서버로 전송된다(bookView.jsp). 해당 컨트롤러에서 해당 URL을 받아 댓글 조회를 처리하는 클래스를 호출한다(ReviewFrontContro..

MVC패턴을 지키면서 특정 페이지에서 ajax를 이용한 비동기 통신으로 댓글을 작성하고 모든 댓글을 출력하는 로직을 기록하고자 한다. 지난 포스팅에 이어 이번 포스팅에는 댓글(원글)을 작성하고 저장하는 로직을 기록해 보기로 한다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 댓글(원글) 저장 로직을 구현할 수 있다. ♠ DB에서 댓글 테이블에 필요한 그룹 칼럼, 깊이 칼럼, 출력 순서 칼럼을 이해할 수 있다. DB 테이블 생성 DB는 MySQL8.0을 사용했다. 테이블 명은 comment로 설정하고, PK 칼럼은 c_id이다. CREATE TABLE `jspbookshop`.`comment` ( `c_id` INT NOT NULL AUTO_INCREMENT COMMENT '코멘트 아이디',..

MVC패턴을 지키면서 특정 페이지에서 ajax를 이용한 비동기 통신으로 댓글을 작성하고 모든 댓글을 출력하는 로직을 기록하고자 한다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 댓글을 작성하고 출력할 수 있다. ♠ 댓글 및 대댓글 출력 처리 과정을 이해할 수 있다. 실행 화면으로 로직 흐름 이해하기 도서 상세 페이지(bookView.jsp) 아래 이미지를 참고하자. 댓글 관련 화면은 크게 두 영역으로 나뉘는데, 하나는 , 다른 하나는 영역이다. 태그 하위에는 4개의 Description, Specification, Comments, Reviews 태그가 있다. 각각의 태그에 따라 태그 하위의 구성 요소가 바뀐다. 영역은 다시 2개의 영역으로 나뉜다(주황색, 초록색 박스 부분). 1. Co..

도서 상세 페이지에서 도서 구매 리뷰를 보여주는 내비게이션 버튼을 클릭하면 ajax를 이용한 비동기 통신으로 디비에 저장되어 있는 해당 도서의 모든 리뷰 데이터가 웹 브라우저로 넘어와서 출력되는 로직을 기록하고자 한다. 이 로직 하나 하려고 얼마나 여기저기를 뒤적거렸는지... 원하는 대로 해결되어 뿌듯하다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 리뷰 데이터를 웹 브라우저로 가져올 수 있다. ♠ JSON.parse()을 사용할 수 있다. 로직 흐름 도서 상세 페이지에서 도서 구매 리뷰를 보여주는 리스트를 클릭하면 ajax 함수로 도서 아이디와 페이지번호를 서버로 넘긴다(bookView.jsp). 리뷰를 담당하는 컨트롤러(ajax 처리)에서 해당 URL을 받아 리뷰 데이터를 조회하는 클..

도서 등록 페이지에서 단일 이미지를 등록하고자 할 때 화면에 등록할 파일이 미리 보기로 보이고, 등록 버튼을 눌렀을 때 모든 정보가 정상적으로 DB에 저장되는 MVC 패턴 로직을 기록하고자 한다. 목표 ♠ JSP에서 MVC 패턴을 지키면서 Form 페이지에서 입력한 모든 정보(이미지 포함)를 DB까지 저장할 수 있다. ♠ 서버에 이미지 파일을 저장하기 전, 웹 브라우저에서 JS의 FileReader를 이용해 등록할 이미지를 미리 확인할 수 있다. 로직 흐름 1. 도서 등록 Form 페이지에서 등록할 도서 정보 및 이미지를 기입하고 등록을 누른다(bookRegistForm.jsp). 2. 컨트롤러에서 도서 등록을 처리하는 클래스를 호출한다(ManageBookRegistProAction.java). 3. 등..