본문 바로가기

Project/Todo-List(Servelt, JSP)

6. 프로젝트 리팩토링(Ajax) 2020. 9. 1. 1. Type이 바뀐 할 일 목록을 새로고침 없이 Ajax 방식으로 구현 - 프로젝트를 진행할 땐 Ajax가 뭔지 감도 안오고 어떻게 구현해야 할지도 모르겠어서 XMLHttpRequest객체만 생성했다. 그리고 window.location.reload() 함수를 통해 화면을 새로고침해서 DB로부터 모든 할 일을 가져와서 전체적으로 화면을 재구성했다. - 또한 GET 방식으로 데이터를 전송하는 방식은 보안상 안전하지 않기 때문에 서버와 POST방식으로 연결하도록 수정하였다. - 가져올 자료와 구성할 컴포넌트가 몇 개 없다면 새로고침을 하는 방식이 ajax 방식과 속도 차이는 별로 나지 않을것이다. - 하지만 화면에 컴포넌트와 DB 자료, 이미지 파일 등이 많다면 화면을 새로고침할 때 많은 시간이 걸릴것이다..
5. 프로젝트 마무리 2020. 8. 13. 1. 최종 화면 2. 느낀점 - JSP, Servlet, HTML, CSS, Javascript, MySQL 등 하나씩 배울 땐 어느정도 배웠다고 생각했다. - 하지만 이런 여러 언어와 기술들을 연계해서 사용하려니깐 내가 뭘 배웠었지? 라고 생각하게 되었다. - 그래도 연필로 화면 구상도 해보고, 작은 기능 하나씩 만들다 보니깐 많은 공부가 되었다. - 실제로 구글링을 통해서 정말 많이 배웠다. - 이 블로그를 보고 따라해 보았다면 이젠 직접 아이디어를 생각하여 애플리케이션을 만드는 것을 추천한다.
4. 할 일 Type 변경 및 삭제 2020. 8. 13. 1. TodoTypeServlet - main.jsp에서 -> 버튼을 누르면 버튼의 id가 GET 방식으로 TodoTypeServlet에 전송된다. - TodoTypeServlet에서는 Table에서 버튼의 id와 일치하는 튜플의 type을 TODO->DOING, DOING->DONE으로 변경한다. - main.jsp의 next 함수에서 id를 GET으로 보내고 함수가 끝나면 새로고침을 한다. - main.jsp의 next 함수 function next(bid){ var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { window.location.reload(); }); oReq.open("GET", "http://local..
3. 할 일 등록 구현 하기 2020. 8. 13. 1. TodoFormServlet - main.jsp에서 할 일 등록 버튼을 누르면 그 요청을 TodoFormServlet이 받아 처리한다. - 하지만 실제로는 할 일이 없다. 그럼에도 불구하고 MVC Controller 역할을 하기 위해 구현한다. - todoForm.jsp로 포워딩하여 할 일 입력 화면을 띄우도록 한다. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher rd = request.getRequestDispatcher("/todoForm.jsp"); rd.forward(request, response..
2. Main 화면 구현 2020. 8. 13. 1. MainServlet.java 구현 - DB에 있는 데이터를 가져오는 작업이 선행되야 하므로 MainServlet에서 TodoDao를 이용하여 데이터를 불러온 후, 그 데이터를 main.jsp로 전송한다. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { TodoDao dao = new TodoDao(); List dtoList = new ArrayList(); dtoList = dao.getTodos(); // DB에서 얻은 TodoList를 request scope에 저장한다. request.setAttribute("dtoList", d..
1. Modeling & Table, Model 만들기 2020. 8. 13. 1. Modeling - 어플리케이션의 아키텍처를 더 쉽게 파악하기 위해 모델링을 활용한다. 가장 대중적인 UML을 이용한다. - 웹 어플리케이션의 기본 모델인 MVC 패턴을 이용한다. 2. Table 생성하기 CREATE TABLE todo ( id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT, title VARCHAR(255) NOT NULL, name VARCHAR(100) NOT NULL, sequence INT(1) NOT NULL, type VARCHAR(20) DEFAULT 'TODO', regdate DATETIME DEFAULT NOW(), PRIMARY KEY (id) ); 3. DAO(model), DTO 생성하기 - DAO 코드 : https://g..
0. Todo List 프로젝트 목적 및 환경 설정 2020. 8. 12. 0. 개요 - Servlet, JSP, HTML, CSS, Javascript의 기초를 활용하여 프로젝트를 진행하지만, 기초 내용은 다른곳에서 알고 시작해야 될 거 같습니다. - 여기선 위 5가지 언어를 잘 조합하여 웹 어플리케이션을 만드는 과정을 정리할 예정입니다 1. 프로젝트 목적 - 학습한 Servlet, JSP, HTML, CSS, Javascript를 이용하여 할 일을 관리하는 Todo-List 웹 어플리케이션을 만들어보자 - Todo List는 MySQL을 이용하여 관리한다. - MVC 모델을 활용한다. 2. 프로젝트 요구사항 - 프론트엔드 요구사항 )을 클릭하여 요청을 보낼때 Todo 의 Id와 상태값을 전달하여 다음 상태로 (현재 상태가 Todo라면 doing으로 doing 이라면 done..

티스토리툴바