JSP
MVC2 패턴 기반 게시판 제작
실습
User와 관련된 부분을 전부 MVC2 패턴으로 수정
Model (DAO, VO, Interface)
Controller
Service
세 가지로 싹 분리하였다.
UserController.java
package kr.co.jsp.user.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kr.co.jsp.user.service.ChangePwService;
import kr.co.jsp.user.service.DeleteService;
import kr.co.jsp.user.service.IUserService;
import kr.co.jsp.user.service.JoinService;
import kr.co.jsp.user.service.LoginService;
import kr.co.jsp.user.service.UpdateService;
@WebServlet("*.user")
public class UserController extends HttpServlet {
private static final long serialVersionUID = 1L;
private IUserService sv;
public UserController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
doRequest(request, response);
}
protected void doRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uri = request.getRequestURI();
uri = uri.substring(request.getContextPath().length()+1, uri.lastIndexOf("."));
System.out.println(uri);
switch(uri) {
case "joinPage":
System.out.println("회원 가입 페이지로 이동 요청!");
response.sendRedirect("user/user_join.jsp");
break;
case "join":
System.out.println("회원 가입 요청이 들어옴!");
sv = new JoinService();
sv.execute(request, response);
break;
case "loginPage":
System.out.println("로그인 페이지로 이동 요청!");
response.sendRedirect("user/user_login.jsp");
break;
case "login":
System.out.println("로그인 요청이 들어옴!");
sv = new LoginService();
sv.execute(request, response);
break;
case "myPage":
System.out.println("마이페이지로 이동 요청!");
response.sendRedirect("user/user_mypage.jsp");
break;
case "pwPage":
System.out.println("비밀번호 변경 페이지로 이동 요청!");
response.sendRedirect("user/user_change_pw.jsp");
break;
case "changePw":
System.out.println("비밀번호 변경 요청");
sv = new ChangePwService();
sv.execute(request, response);
break;
case "modPage":
System.out.println("회원정보 변경 페이지로 이동 요청!");
response.sendRedirect("user/user_update.jsp");
break;
case "update":
System.out.println("회원 정보 수정 요청이 들어옴!");
sv = new UpdateService();
sv.execute(request, response);
break;
case "delPage":
System.out.println("탈퇴 페이지로 이동 요청!");
response.sendRedirect("user/user_delete.jsp");
break;
case "delete":
System.out.println("탈퇴 요청이 들어옴!");
sv = new DeleteService();
sv.execute(request, response);
break;
}
}
}컨트롤러에 기존에 ~_con.jsp 페이지로 이동시키던 부분을 싹 이쪽에서 해결하도록 분리.
JavaScript
자바나 C언어 등의 정적 언어는 변수 선언 시 변수 자료형을 선언하여 변수를 할당하지만, JS는 동적 언어이므로 자료형을 직접 정하여 선언하지 않아도 된다.
실습 1. core-js
1. 변수
basic.html
변수의 선언 및 초기화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 기본적으로 JS는 html 위에서 동작한다. -->
<!-- 스크립트가 시작된다는 뜻의 <script> 태그를 사용. -->
<!-- 자바스크립트는 동적 프로그래밍 언어입니다. -->
<script>
console.log('hello javascript');
console.log(2 + 3);
// 변수의 선언 및 초기화
var num1 = 1;
var num2 = 2;
var num3 = 3;
console.log(num1 + num2 + num3);
</script>
</body>
</html>콘솔창에 입력한 결과는 크롬 등의 브라우저에서 F12키 누른 후 우측에 뜨는 개발자 도구에서 console 탭을 선택하면 확인 가능하다.
identifier.html (식별자)
같은 이름의 변수
var apple = '사과';
var apple = 'apple';
console.log(apple);출력 :
apple
같은 이름의 변수를 두 번 선언하더라도 정적 언어들과는 다르게 에러 없이 선언이 되고, 가장 마지막에 선언한 같은 변수의 결과값이 출력된다. 물론 이런 사용 방식은 권장하지 않는다.
스펠링은 같지만 대문자, 소문자로 구분되는 경우
var banana = '바나나';
var BANANA = '빠나나';
console.log(banana);
console.log(BANANA);출력 :
바나나 빠나나
단순히 스펠링이 같다고 해서 같은 변수로 취급되지 않는다.
변수 명명법
// var 100 = 100;
// var 100num = 100;
// var my-name = 'gil-dong hong';
var my_name = 'gil-dong hong';숫자가 먼저 오는 식의 변수는 선언 불가하며, my-name 같은 케밥케이스는 CSS 등지에서 클래스 이름을 명명하는 경우에 사용한다.
JS는 보통 snake_case 명명법을 따른다.
점검문제.html
/*
- 1번문제
1. admin과 myName이라는 변수를 선언하세요.
2. myName에 값으로 "John"을 할당해 보세요.
3. myName의 값을 admin에 복사해 보세요.
4. admin의 값을 console 창에 띄워보세요.
"John"이 출력되어야 합니다.
*/
/*
- 2번문제
1. 현재 우리가 살고있는 행성(planet)의 이름을
값으로 가진 변수를 만들어보세요.
변수 이름은 어떻게 지어야 할까요?
2. 웹사이트를 개발 중이라고 가정하고,
현재 접속 중인 사용자(user)의 이름(name)을
저장하는 변수를 만들어보세요.
변수 이름은 어떻게 지어야 할까요?
*/
// Q1.
var admin, myName;
myName = 'John';
admin = myName;
console.log(admin);
// Q2.
var our_planet;
var login_user_name;2. 데이터 타입
숫자타입.html
- 숫자 타입(number) : 숫자이며 정수, 실수를 구분하지 않는다.
- 문자열 타입(string) : 텍스트 문자열
- 논리 타입(boolean) : 논리적 참과 거짓 (true, false)
- undefinded 타입 : 값을 할당하지 않은 변수에 암묵적으로 할당되는 값
- null 타입 : 값이 의도적으로 없다는 것을 명시할 때 사용하는 값
- 심벌 타입(symbol) : ES6에서 추가된 타입
- 객체 타입 : 객체, 함수, 배열 등
number 타입
var integer = 100; // 정수
var float = 3.14; // 실수
console.log(typeof integer);
console.log(typeof float);
브라우저에 출력 결과를 찍어보면 둘 다 정수, 실수 구분 없이 동일한 number 타입인 것을 알 수 있다.
var bin = 0b01000010;
console.log(bin);
var oct2 = 0o102;
console.log(oct2);
var hex = 0x0042;
console.log(hex);- 0b : binary, 2진수
- 0o : octal, 8진수
- 0x : hexadecimal, 16진수
console.log(10 / 4);출력 :
2.5
정적 언어를 기준으로 했다면 소수부가 절사되었겠지만 js에서는 그렇지 않다.
console.log(30 / '가나다');출력 :
NaN
Not a Number 의 줄임말. 잘못된 연산이나 표현할 수 없는 값의 결과를 의미한다.
etc.html
// 논리 타입
var logical = false;
logical = true;
var apple = 0;
if (apple) {
console.log('사과가 ' + apple + '개 있습니다.');
} else {
console.log('사과가 하나도 없습니다.');
}number가 0인 경우 false, 그 외의 모든 값에 대해서는 true로 취급한다. C를 배웠었으므로 이 부분은 친숙했다.
// null
var banana = '바나나';
banana = null;
console.log(typeof banana);
console.log(banana)
var i;
console.log(typeof i);
banana 의 경우 미리 값을 넣었다가 null 로 바꾼 후 object 형으로 확인되는 것을 볼 수 있고, 그냥 변수의 값을 찍어보게 할 경우 null 이 출력된다.
var i 의 경우 아무런 값을 넣지 않고 선언만 한 후 type을 확인했을 때, undefined 가 확인된다.
문자타입.html
var greetings;
greetings = '안녕하세요!'; // (o)
greetings = "반갑습니다"; // (o)
greetings = `하이하이`; // (o)문자열을 인식시키는데 여러 기호를 사용 가능하다. 보통은 '' 홑따옴표를 자주 쓰고, 백틱의 경우 특정한 경우에 사용한다.
var quote = '그는 나에게 "위험해!" 라고 말했다.';
console.log(quote);
이렇게 홑따옴표 사이에 따옴표를 넣어도 사용이 가능하다.
var temp = '<ul>\n\t<li>\n\t\t<a href="#">Home</a>\n\t</li>\n</ul>';
console.log(temp);
var temp2 =
`<ul>
<li>
<a href="#">Home</a>
</li>
</ul>`;
console.log(temp2);
백틱의 용례인데, 공백이나 줄 개행을 모두 문자로 인정시켜서 표시하도록 해 준다.
이런 것을 템플릿 리터럴이라고 한다.
console.log(month + '월 ' + day + '일은 ' + anni + '입니다.');
// 템플릿 리터럴을 이용한 포맷팅 출력 방식 (ES6)
console.log(`${month}월 ${day}일은 ${anni}입니다.`);
