** ajax와 REST API Server 구축 및 암호화
1. REST API
2. ajax
3. 암호화
** 더보기 구현
1. json 생성을 위한 라이브러리를 프로젝트에 복사
2. ServiceImpl 클래스에서 데이터 목록을 만들어주는 메소드를 수정
3. Controller를 확인해서 list 요청이 왔을 때 list.jsp로 출력하는 것을 확인하고 list.jsp 파일을 만들어서 앞에서 저장한 내용을 출력
4. 테스트
5. Web Client에서 데이터를 요청해서 출력하기
** ajax 처리
1. 자바스크립트 이용
2. 자바스크립트 라이브러리 이용
** 회원 가입과 로그인
1. 테이블 베이스 작업
2. Dynamic Web Application을 생성
3. 필요한 의존성 라이브러리들을 프로젝트에 복사
4. 프로젝트 공통 설정
5. User 테이블에 발생하는 요청을 처리할 자원들을 생성
6. 시작 페이지 만들기
7. 회원가입 - 데이터 삽입
** 모바일 웹이나 앱
** Java로 취업
** SI - 전자정부 프레임워크, 삼성, LG, SK, 금융 관련 분야
** 포틀폴리오 문서 개요
1. 개발 환경
2. E-R Diagram
3. Class Diagram
4. 인터페이스-요청 처리 흐름
5. 보완할 점
** Inheritance(상속)
1. 상속을 하는 이유
** URL 패턴
** Web에서 비동기 처리 - ajax
1. javascript만 이용
2. 편리하게 작업하고자 하는 경우 javascript 라이브러리 - jquery
** 스크립트 언어의 특징
※ ajax와 REST API Server 구축 및 암호화
1. REST API
- 디바이스나 화면 크기에 상관없이 동일한 콘텐츠를 사용하는 경우에는 하나의 URL을 이용한다.
- Web Browser, Android Application, iOS Application 등이 동일한 콘텐츠를 이용하는 경우라면 동일한 URL을 이용해서 콘텐츠를 사용할 수 있어야 한다.
- 서버 입장에서 여러 디바이스의 요청을 서로 다른 URL을 이용해서 처리하게 되면 유지보수도 어렵고, 서버 Application을 여러 개 구현해야 할 가능성이 높기 때문에 관리가 어려워진다.
- 클라이언트 개발자 입장에서는 디바이스 별로 다른 URL을 요청하기 때문에 클라이언트용 애플리케이션 개발이 어려워진다.
- 이 경우 선택한 데이터 포맷은 XML과 JSON이다.
- XML은 태그 형식으로 표현하기 때문에 개발자가 구조를 파악하는 게 쉽다.
- JSON은 자바스크립트 데이터 표현 방법으로 표현하기 때문에 개발자가 구조를 파악하는게 어렵고, 나중에 나온 포맷이라서 외부 라이브러리를 이용해야만 쉽게 사용할 수 있는 경우가 많은데 XML 보다는 경량이고 자바스크립트나 파이썬 같은 언어와 데이터 작성 방법이 동일하기 때문에 파싱이 수월하다.
- Java Web Programming 만으로 가능하지만 Spring 같은 Framework를 사용하면 조금 더 쉽게 구현할 수 있다.
- Server가 View를 만들지 않고 데이터를 만들어서 전송하는 개념이다.
2. ajax
- 비동기 데이터 전송이다.
- REST API Server는 View를 전송해주는 것이 아니라 데이터를 전송해주기 때문에 HTML 파일에서 Server와 통신하기 위해 이전에 사용하던 a 태그나 자바스크립트의 페이지 이동 또는 iframe을 사용할 수 없다.
- REST API Server와 통신하기 위해서는 다른 기술을 사용해야 하는데 그중 하나가 ajax이다.
- ajax는 자신의 도메인 데이터만 가져올 수 있도록 설계되어 있는데 서버 측에서 CORS가 가능하도록 설계해주면 ajax를 이용해서 다른 도메인의 데이터도 가져올 수 있다.
- 상대방 서버가 CORS가 가능하도록 설계되어 있지 않다면 proxy를 이용해서 ajax 요청을 자신의 서버에게 보내고 서버용 프로그래밍 언어를 이용해서 외부 데이터를 가져오고 다시 ajax에 전달하는 방식을 이용해야 한다.
3. 암호화
- 암호화는 평문을 그냥은 알아볼 수 없도록 만든 것을 말한다.
- 암호화된 문장을 평문으로 변경하는 것을 복호화라 한다.
1) 암호화 방식
- 평문을 비문으로 만든 후 비문을 평문으로 복호화할 수 없도록 하는 대신에 평문과 비문을 비교할 수 있도록 하는 방식으로 비밀번호를 이렇게 저장한다.
- 비문을 평문으로 복호화할 수 있게 만드는 방식
2) 암호화 알고리즘
- md5, sha-256, res-256 등 여러 가지 알고리즘이 있다.
※ 더보기 구현
1. json 생성을 위한 라이브러리를 프로젝트에 복사
- view에 데이터를 전달하기 위해서 수행한다.
2. ServiceImpl 클래스에서 데이터 목록을 만들어주는 메소드를 수정
3. Controller를 확인해서 list 요청이 왔을 때 list.jsp로 출력하는 것을 확인하고 list.jsp 파일을 만들어서 앞에서 저장한 내용을 출력
4. 테스트
- POST 방식은 테스트가 어렵지만 GET 방식은 브라우저를 이용해서 테스트가 가능하다.
- 서버를 실행시키고 브라우저 창에 cafeuser/list를 추가해서 확인
- 여기까지가 서버 구현에서는 끝
5. Web Client에서 데이터를 요청해서 출력하기
1) index.jsp 페이지에서 목록 보기 요청을 수정
2) CafeUserController에서 cafeUserlist 요청이 온 경우 출력할 페이지로 포워딩하는 코드를 doGet 메소드에 작성
3) doGet 메소드에서 삽입이나 수정, 삭제 이후에 이동하는 곳도 cafeuserlist로 변경
4) cafeuserlist.jsp 파일을 생성하고 출력
* ajax 처리
1. 자바스크립트 이용
- XMLHttpRequest 객체 이용
2. 자바스크립트 라이브러리 이용
- jquery 이용
$.ajax(){
url : 데이터를 가져올 URL(list),
dataType : 결과 데이터 포맷(json),
data : 필요한 파라미터({no : 페이지 번호}),
success:function(date){
데이터를 가져오는 데 성공했을 때 수행할 내용;
data는 JSON의 경우는 파싱 된 결과이고 XML은 태그의 모임이다.
},
fail:function(data){
데이터를 가져오는데 실패했을 때 수행할 내용;
}
};
요청 -> Controller -> Service -> Dao -> Repository -> Dao -> Service -> Controller -> Data -> View(웹의 경우는 ajax를 이용해서 Data를 가져와서 사용)
- Controller에서 Data까지가 REST API 서버(Back End)
- 요청과 View가 Front End
※ 회원 가입과 로그인
- 회원가입과 로그인을 REST API SERVER를 구축해서 구현한다.
- 회원가입 화면을 만드는 부분이나 회원가입 요청을 ajax로 하는 부분 등 HTML 출력하는 부분을 제외하면 모든 처리에서 사용할 수 있는 서버
- 파일 업로드도 같이 처리 : 파일 업로드는 구현하고 난 후 상대 경로를 이용하는 것으로 변경
1. 테이블 베이스 작업
1) 테이블 생성
2) 샘플 데이터를 작성
- 아이디 중복 검사와 닉네임 중복 검사를 위해서 작성
3) 테스트가 종료되면 샘플 데이터를 삭제
- 데이터를 삽입할 때는 비밀번호를 암호화해서 삽입할 것인데 이전에 입력한 데이터는 암호화가 되지 않은 상태이므로 로그인이 안되었기 때문이다.
2. Dynamic Web Application을 생성
- web.xml(웹 프로젝트 설정 파일 - Web Application이 실행되면 이 파일의 내용을 읽어서 프로젝트 전체를 설정한다. 이 파일이 잘못되면 Application이 시작하지 않는 경우가 많다.) 파일을 포함하도록 생성 - 포함시키지 않았으면 Servers 디렉토리에서 복사를 해서 WebContent/WEB-INF 디렉토리에 붙여 넣기
- WebContent는 루트 디렉토리의 이름으로 프로젝트 종류에 따라 다른 이름일 수 있다,
- 실제 배포가 될 때는 루트 디렉토리는 애플리케이션 이름으로 대체된다.
3. 필요한 의존성 라이브러리들을 프로젝트에 복사
- Dynamic Web Application은 라이브러리들이 WebContent/WEB-INF/lib 디렉토리에 복사돼야 한다.
- servlet-api.jar : JDK SE 버전을 가지고 웹 프로그래밍을 하려면 HttpServlet 클래스가 존재하는 라이브러리가 필요하다. - WAS가 가지고 있기 때문에 배포를 할 때는 필요 없다.
- jstl.jar : JSTL(c:if, c:forEach 등)을 사용하기 위해서 필요하다.
- 웹 서버만을 만드는 경우에는 필요 없다.
- jsp 파일에서 attribute를 출력하기 위해서 사용하는 라이브러리이기 때문에 출력을 하지 않을 거라면 필요 없다.
- json.jar : 자바의 데이터를 json 포맷으로 만들어주는 라이브러리이다.
- mysql-connector : MySQL 사용을 위한 라이브러리
4. 프로젝트 공통 설정
- 데이터베이스 접속 정보를 설정한다.
1) META-INF 디렉토리에 context.xml 파일을 만들어서 접속 정보를 작성
2) web.xml 파일에 context.xml 파일의 내용을 읽어오는 코드를 작성
- 프로젝트 설정인데 여러 명의 개발자가 협업을 하는 경우에는 여기까지는 지금처럼 설명만 하고 프로젝트를 미리 만들어 두고 다운로드하여서 사용하도록 한다.
5. User 테이블에 발생하는 요청을 처리할 자원들을 생성
- url 패턴은 user 디렉토리 패턴을 이용 : 예전에는 디렉토리 패턴이 아니라 확장자 패턴을 많이 사용했는데 최근에는 디렉토리 패턴을 많이 이용한다 - /user/*
- view는 member라는 디렉토리에 저장 : view와 디렉토리 패턴이 동일하게 만들어지면 view로 이동하는 경우에도 Controller가 작업을 수행하려고 하기 때문에 되도록이면 서로 다른 디렉토리를 이용하는 것이 좋다.
- 필요한 자원은 DTO, DAO, Service, Controller 클래스이다.
- view 디렉토리는 실제 view와 그 이외 자원들이 저장되는 디렉토리로 구분하여 그 이외 자원으로는 css, js, 이미지, 사운드, 동영상 등이다.
- 실제 업무에서는 resources라는 디렉토리를 만들고 그 안에 다시 각각의 디렉토리를 만들어서 자원을 저장한다.
- 만드는 순서는 상관없지만 DAO와 Service와 Controller는 순서대로 만든다.
- 그 이유는 DAO를 주입받아서 Service가 사용하고 Service를 주입받아서 Controller가 사용하기 때문이다.
1) User 테이블의 데이터를 저장할 DTO 클래스를 생성
2) 모든 DAO 클래스에서 공통으로 사용할 내용을 소유한 AbstractDAO 클래스를 생성하고 공통된 내용을 작성
- dao.AbstractDao
- 원래 이 클래스는 애플리케이션을 만들면서 리팩토링 단계에서 만들어져야 하지만 미리 생성 - 이런 클래스를 만들어서 상속받아서 사용하도록 해주는 것이 라이브러리나 프레임워크이다.
- 이 클래스는 인스턴스를 만들 필요가 없어서 추상 클래스로 만들 것이고 다른 패키지에서 사용을 못하도록 하기 위해서 default(package)라는 접근 지정자를 사용한다.
- 공통으로 필요한 내용은 Connection, PreparedStatement, ResultSet 3개의 속성과 연결과 해제와 관련된 2개의 메소드 : 접근 지정자는 상속받은 곳에서 사용할 수 있도록 하려면 private은 제외
- 자신만의 application을 만들 때는 접근 지정자를 default로 하고 프레임워크를 만들 때는 protected으로 한다.
3) User 테이블의 데이터베이스 작업을 위한 UserDao 클래스를 생성
- AbstractDao클래스를 상속하도록 생성 - dao.UserDao
4) Business Logic(업무처리)을 처리해 줄 Service 클래스를 디자인
- 싱글톤 패턴을 적용하고 템플릿 메소드 패턴(인터페이스 -> 클래스 : 가독성과 유지보수를 위해서)을 적용한다.
- Service에서는 Dao를 주입받아야 사용한다.(Dao 인스턴스가 필요하다.)
- service 패키지에 User의 요청을 처리해 줄 메소드의 원형을 선언하는 인터페이스를 생성한다.(service.UserService)
- UserService 인터페이스의 메소드를 구현할 UserServiceImpl 클래스를 생성한다.
5) 사용자의 요청을 받아서 필요한 서비스를 호출하고 서비스의 결과를 출력할 View를 결정해주는 역할을 수행하는 Controller 클래스를 생성
- HttpServlet 클래스를 상속해서 만들어야 한다.
- 처리할 URL 패턴을 설정해야 한다.
- 필요한 Service 인스턴스를 소유하고 있어야 한다.
- controller.UserController를 생성하고 URL 패턴은 user 디렉토리 패턴으로 설정한다.
- 여기까지가 하나의 서비스를 구현하기 위한 기본 작업이다.
- 여기까지는 프레임워크를 사용하면 클래스를 만들고 변수를 생성하는 부분까지만 직접 하고 나머지는 프레임워크가 구현을 해준다.
6. 시작 페이지 만들기
- 대규모 웹 애플리케이션에서는 모든 요청이 Controller를 거치도록 하는 것을 권장한다.
- web.xml의 welcome-file list라는 항목이 시작 요청이 왔을 때 보이는 페이지를 설정하는데 여기에는 실제 파일명이 설정돼야 한다.
- Controller는 URL 패턴으로 설정하고 web.xml은 파일 이름으로 설정하기 때문에 시작 요청을 처리하는 것이 어려워진다.
- web.xml 파일에 설정한 시작 페이지가 바로 Controller의 요청으로 포워딩하거나 리다이렉트 되도록 만든다.
- 이때 Controller가 index.html도 같이 처리하는 경우가 많다.
1) WebContent 디렉토리에 시작 페이지로 사용할 index.jsp 파일을 생성하고 작성
2) UserController가 index.html 요청도 처리할 수 있도록 URL 패턴을 변경
3) UserController 클래스의 doGet 메소드를 수정
4) WebContent 디렉토리에 member 디렉토리를 생성하고 main.jsp 파일을 생성
5) web.xml 파일에서 welcome-file-list 수정 : index.jsp를 제외하고는 모두 삭제
6) 프로젝트를 실행해서 main.jsp 파일이 출력되는지 확인
7. 회원가입 - 데이터 삽입
- 어떤 항목을 입력받을 것인가 - userNickname, userEmail, userName, userPassword
- 입력받아야 하는 항목 중에서 유일무이한 값이 있는지 확인 - userNickname
- 유일무이하게 저장되어야 하는 값은 중복 검사를 해야 한다.
- 입력받는 값 중에서 값에 제한이 있는 항목이 있는지 확인
- 값에 제한이 있으면 radio, checkbox, select를 이용해야 한다.
- 필수 항목 중에서 하나만 선택해야 하는 것은 radio, 다중 선택이 가능한 것은 checkbox나 select로 만드는 것이 좋다.
- 필수 선택일 때는 기본값을 선택해주는 것이 좋다.
- 입력을 해서 전송을 할 때는 유효성 검사를 해주어야 한다.
- 하나의 서버를 이용해서 웹 브라우저, 모바일 앱, PC 앱을 전부 처리하고자 하면 웹 브라우저에서 폼의 데이터를 전송할 때 ajax를 이용해야 한다.
1) 회원가입 요청을 main.jsp 파일에 작성
2) UserController 클래스에서 /user/register 요청이 GET 방식으로 오면 처리하는 코드를 doGet 메소드에 추가
3) member 디렉토리에 register.jsp 파일을 생성
4) UserDao 클래스에 email 중복검사와 nickname 중복검사를 수행해 줄 메소드를 생성
- return 타입을 String, int, boolean으로 해도 된다.
- email이나 nickname 존재 여부를 알려줄 수 있어야 한다.
- return 타입을 boolean으로 하고 존재 한다면 false 그렇지 않으면 true를 리턴하도록 작성한다.
5) Dao의 emailCheck, nicknameCheck 메소드를 테스트
- 현재 프로젝트에 마우스 오른쪽을 클릭하고 [Build - Path] - [Configure Build Path]를 선택한 후 [Libraries] 탭을 선택한다.
- [Add Library]를 선택하고 보이는 창에서 JUnit을 선택할 후 버전을 선택하고 apply 해준다.
- index.jsp에 아래 코드를 작성하여 Test한다.
6) Service 인터페이스에 이메일과 닉네임 중복체크를 위한 메소드를 선언
- Service가 하는 일은 클라이언트가 전달해 준 정보를 받아서 처리를 한 후 저장을 해주는 것이다.
- 이 때 클라이언트 정보는 HttpServletRequest 클래스의 인스턴스에 있고 응답을 하고자 할 때는 HttpServletResponse 클래스의 인스턴스를 이용하면 된다.
- 기본 모양을 통일해서 사용한다.
- publci void 메소드 이름(HttpServletRequest request, HttpServletResponse response)
- 메소드 2개를 선언한다.
7) ServiceImpl 클래스에 이메일과 닉네임 중복체크를 위한 메소드를 구현
8) UserController 클래스에 email, nickname 중복체크를 처리할 코드를 doGet 메소드에 작성
9) member 디렉토리에 emailcheck.jsp 파일을 만들고 결과를 출력
10) member 디렉토리에 nicknamecheck.jsp 파일을 만들고 결과를 출력
11) REST API 서버를 만들 경우 테스트
- 브라우저에 서버주소 뒤에 요청 URL?파라미터이름=파라미터값&파라미터이름=파라미터값...
- 요청이 Controller 까지 도달하는지 확인
- doGet 메소드의 요청을 처리하는 부분에 콘솔에 출력하는 코드를 추가한다.
- 요청이 Service 메소드까지 도달하는지 확인
- Service의 메소드에 콘솔에 출력하는 코드를 추가하여 확인한다.
- 요청이 DAO 메소드까지 도달하는지 확인
- DAO의 메소드에 콘솔에 출력하는 코드를 추가한다.
- 파라미터를 출력하는 코드로 출력한다.
- 콘솔에는 결과가 출력되었는데 브라우저에 출력되지 않았다면 메소드 상에서 그 결과를 제대로 return했는지 확인해보아야 한다.
- 상기 사항들을 확인하였는데도 출력되지 않는다면 ServiceInpl의 메소드에서 DAO의 결과를 저장한 변수를 확인하고 그 값을 JSONObject에 삽입했는지 그리고 JSONObject를 request에 무엇이라고 저장했는지 확인해야 한다.
- 이후 출력하는 jsp 파일에서 확인
12) 위의 내용을 웹에서 사용할 때 수행할 내용을 register.jsp 파일에 작성
- 이 때 내용은 전부 JavaScript로 작성한다.
- 외부에 자바스크립트 파일을 만들어서 사용하기 위해 register.jap 파일에 자바스크립트 링크를 추가한다.
- js/register.js
<script sr="자바스크립트 파일 경로"></script>
* 모바일 웹 이나 앱
- Java Web Server를 구축해서 연동한다.
* Java로 취업
- Spring Framework와 JPA를 이용해서 Java Web Server를 구축해서 연동한다.
- SI에서는 JPA대신에 MyBatis를 사용한다.
- SI에서는 데이터베이스도 Oracle을 많이 사용한다.
* SI - 전자정부 프레임워크, 삼성, LG, SK, 금융 관련 분야
- Java -> Spring -> MyBatis + Oracle
- 위의 프로그램을 이용해서 게시판 정도를 구현하면 일을 할 수 있다.
- 회원 : ajax(아이디 중복 검사 시 필요) - REST API, Session(로그인 구현 시 필요), 보안(암호화, JWT)
- 게시판 : 페이징, 보안(Authentication, Authorization(인증))
* 포트폴리오 문서 개요
1. 개발 환경
- Programming Language : JAVA 1.8
- Database : MySQL 5.5
- Web Application Server : Apache Tomcat 9.0
- IDE : Eclipse
- Framework : Spring, Hibernate, jQuery...
- 형상관리도구 : Git Hub
2. E-R Diagram
3. Class Diagram
4. 인터페이스 - 요청 처리 흐름
5. 보완할 점
* Inheritance(상속)
- 상위 클래스의 모든 멤버를 하위 클래스가 물려받는 것을 말한다.
1. 상속을 하는 이유
1) 프로그램을 만들다 보면 여러 클래스에서 중복된 내용이 나오는 경우 상위 클래스를 만들어서 상속을 시키면 코드의 중복을 제거할 수 있다 : Abstract Class(추상 클래스)
- 상속을 클래스 다이어그램에서는 하위 클래스에서 상위 클래스로 향하는 화살표로 표현한다.
2) 프레임워크의 클래스를 상속하는 경우는 프레임워크가 제공하는 클래스는 기능이 제한적이라 기능을 확장하고자 하는 경우에 한다.
- SubClassing이라고 하고 이 경우에는 대부분 Overriding을 이용해서 메소드의 기능을 확장한다.
- 제공되는 클래스의 경우 인스턴스만 생성해서 사용할 수 있음에도 상속을 하는 경우가 있다.
* URL 패턴
- 웹 서버를 만들 때 중요하다.
- /* : 모든 요청을 처리한다.
- /디렉토리/* : 디렉토리로 시작하는 요청을 전부 처리한다.
- *.확장자 : 확장자로 끝나는 요청을 전부 처리한다.
- /경로 : 경로에 해당하는 요청만 처리한다.
- 디렉토리 패턴과 확장자 패턴은 같이 사용할 수가 없다.
- /디렉토리/*.확장자 : 에러
- Spring을 사용하게 되면 / 패턴이 추가가 되는데 /는 .jsp를 제외한 모든 요청을 처리한다.
* Web에서 비동기 처리 - ajax
1. javascript만 이용
- var 변수명(request) = new XMLHttpRequest();
- 변수명.open("전송방식", url, 비동기여부); //특별한 경우가 아니라면 비동기로 처리한다.
- 변수명.send(파라미터); //요청을 전송 - 전송방식이 post일 때는 send에 파라미터를 보내지만 get 방식일 때는 url 뒤에 ?하고 파라미터이름=값&파라미터이름=값...의 형태로 전송
- //요청에 응답했을 때호출되는 콜백 메소드를 등록
- 변수명.addEventListener('load', function(event){
- - - - - //e.target.responseText가 서버가 응답한 결과 - json 형태
- - - - - //e.target.responseXML이 XML로 응답한 결과
- - - - - //응답이 오면 그 결과를 파싱해서 사용한다.
- - - - - //json parsing을 할 때는 JSON.parse(문자열)
- });
2. 편리하게 작업하고자 하는 경우에는 javascript 라이브러리 - jquery
* 스크립트 언어의 특징
- 줄 단위로 해석하면서 실행하기 때문에 상단에 에러가 잇으면 하단의 문장이 실행이 안된다.
- 하단에 어러가 있는 경우는 에러가 발생하기 전까지는 실행이 된다.
- 자바스크립트, 파이썬, 루비, 코틀린, 스위프트가 그렇다.