프로젝트 관련 수업

－margin: auto; 알아서 화면 가운데로

－서버 만들 때 포트 번호가 같으면 오류 가능성 있음

－조각코드를 include 해서 쓸 수 있음 (top이나 bottom, 혹은 로그인 등)

　≫ 예를 들어 navbar에 공통적인 사항(contextPath나 부트스트랩, 코어 태그 등)을

　　미리 넣어두면 다른 파일에서 참조 시 함께 적용된다.

－서버(백 단)에서 수정사항이 있으면 서버를 재실행 / view는 새로고침 가능

---

화면(view)는 webapp / WEB-INF 아래 두 방법으로 넣을 수 있음

:: view와 view 사이 이동은 컨트롤러 서버를 거쳐야 하는데, WEB-INF 아래에 있으면 단순 뷰 간의 이동이 불가능

 

webapp

－view와 view 사이 이동이 간편 (보안↓ : 파일 이름이 그대로 url에 노출)

WEB-INF

－view와 view 사이 컨트롤러를 꼭 거쳐야 함 (보안↑ : 속도 향상에도 도움)
－서버 안에 감추어져 있기 때문에 파일에 직접 접근 불가능 (서블릿 거쳐서 가짜 url 생성 필수)
－따라서 파일 실행 시 프로젝트로(처음부터) 실행을 해야 한다. (아닐 경우 404 오류 발생)

---

서블릿 만들어서 서블릿 매핑 진행

// web.xml 말고 @annotation으로 진행하기

 

@annotation이 web.xml 보다 많이 쓰임

≫ web.xml은 전체적인 설정 정보가 담겨있기 때문

≫ 따라서 서블릿 매핑은 @annotation을 많이 씀

 

≫ 서블릿 파일 생성 (view와 view 사이의 컨트롤러 역할)

 

이름은 마음대로 지정해도 됨

－web.xml에서

<servlet>
<servlet-name></servlet-name>
<servlet-class></servlet-class>
</servlet> 을 진행한 과정과 같다.

≫ Superclass 덕에 클래스 생성 후 따로 extends를 하지 않아도 된다.

 

next

 

≫ 서블릿 매핑 과정

---

forward()와 sendRedirect()의 차이

forward()

－request와 response 객체 유지O

＊request 객체가 유지되기 때문에 영역 안에 담아둔 데이터를 꺼내 쓸 수 있음

≫ 따라서 view에 데이터를 보낼 때 사용 (전송 가능)

 

sendRedirect()

－request와 response 객체 유지X

＊request 객체가 새로 만들어지는 것이기 때문에 화면 이동 후 데이터를 꺼내 쓸 수 없음

≫ 따라서 view에 데이터를 보낼 것이 없을 때 사용 (전송 불가)

 

그러나, 무조건 적으로 굳어진 규칙은 아님

 

또 다른 특징적 차이

forward()

내가 요청한 url이 그대로 유지

 

sendRedirect()

url이 재작성 (주소가 바뀐다는 뜻)

≫ WEB-INF 안에 넣어도 파일이 노출됨 (WEB-INF/views/employee/login/jsp)

 

－현재처럼 로그인 뷰로 넘어갈 경우 보낼 데이터가 없어 sendRedirect()가 적합해 보이지만,

사용자에게 파일 경로 노출 / WEB-INF 아래에서는 url로 접근이 불가능 → forward()를 사용

 

－sendRedirect()의 인자로는 경로를 기입하지 않고, 가짜 url을 기술

　≫ url이 재작성되기 때문에 다른 url로 재요청을 할 경우 사용

---

로그인 시 SELECT 절 유의사항

1) 로그인 할 때는 SELECT 절에서 *로 받아와야 함.

≫ COUNT(*) 인 경우, 로그인 여부를 1 혹은 -1로 반환하는데

해당 반환 값에는 아무런 정보가 담겨있지 않기 때문이다.

 

2) 로그인한 정보로 부가적인 기능을 수행할 수 있어야 함.

(예를 들어 게시글 작성을 할 경우만 봐도 작성자에 대한 정보가 필요)

≫ COUNT(*)는 계정이 있다/없다 만 판별

≫ int가 반환 값인 경우 아무런 정보를 담아올 수 없음

---

데이터 전송 시

1) view에서 보냈으면 getParameter() / getParameterValues() → 배열 혹은 객체
→ name의 값을 받아오는 것(폼 태그에 들어있는 name의 파라미터)

2) servlet(back 단)에서 보내면 getAttribute()
→ 데이터 영역에 들어있는 걸 뽑아내는 것(속성을 받아온다는 의미)

---

회원가입

// 관리자가 사원 등록하도록 함

 

★

back에서 데이터가 잘 넘어왔는지 확인하려면 sysout

front에서 데이터가 잘 넘어왔는지 확인하려면 console.log()

back에서 front로 데이터가 잘 넘어왔는지 확인하려면 el 사용

 

+)

백 단 : system.out.println()은 Java 언어에서 콘솔에 출력하는 메소드

≫ 이를 통해 문자열, 숫자, 변수 등을 콘솔에 출력이 가능

프론트 단(뷰) : ${ }는 문자열 템플릿 리터럴에서 사용되는 문법

≫ 이를 통해 문자열 내에 변수나 표현식을 쉽게 삽입할 수 있으며

　JavaScript, TypeScript, Kotlin 등의 언어에서 지원.

console.log()는 JavaScript에서 콘솔에 출력하는 메소드

≫ 이를 통해 문자열, 숫자, 객체 등을 콘솔에 출력 가능하며

console.log()는 브라우저의 개발자 도구나 Node.js와 같은 환경에서 사용 가능

 

 

동기 vs 비동기

동기 : 뷰가 하던 일을 멈추고 서버의 응답을 기다림 / 화면 깜빡임 생김

비동기 : 뷰가 하던 일을 멈추지 않고, 서버와 연속적으로 통신 → Ajax 사용

 

 

EL_JSTL은 백 단 언어 / javaScript는 프론트 단 언어 

≫ EL_JSTL과 JavaScript는 섞이지 않는다.

하지만! el 을 사용해 ( → ${} ) 값은 가져올 수 있다.

---

내 정보 수정

// 페이지가 열리면 처음부터 데이터가 존재하도록 만들자.

 

내 정보 수정하는 방법 두 가지

첫 번째 방법 / 두 번째 방법

 

// 내 정보 수정은 로그인이 되어있어야 하고, session에 로그인 정보가 담겨있는 상황

 

첫 번째 방법

1) <editPageServlet>

editPageServlet → DB (내 정보 SELECT) → Servlet으로 data 받아오기 →  view로 출력 (내 정보 조회)

2) <updateServlet>

updateServlet → DB (내 정보 UPDATE) → Servlet으로 data 받아오기 - view(main)로 출력 (수정)

 

두 번째 방법

1) <editPageServlet>

editPageServlet(로그인 정보가 session에 담겨있어 세션에서 데이터 가져옴) → view로 출력 (내 정보 조회)

2) <updateServlet>

updateServlet → DB(내 정보 UPDATE) → Servlet으로 data 받아오기 → View(main)로 출력 (수정)

≫ 정보가 session에 들어있기 때문에 그 값을 사용하면 됨 (굳이 DB까지 가서 데이터를 SELECT 해 올 필요 없다는 의미)

≫ 하지만 정보를 더 수정하게 되면 db랑 session은 공유되지 않기 때문에

session을 변경하게 되면 다시 로그아웃하고 로그인해야 되는 경우가 있다.