IT 기록

리다이렉트와 인터셉트 

세션이나 쿠키 정보가 잘못되었을 때, 리다이렉트나 인터셉트를 이용.

리다이렉트 : 컨트롤러에서 뷰를 분기하는 방법. 
인터셉트 : 컨트롤러 실행 전/후에 특정 작업을 가능하게 하는 방법.

- 리다이렉트 (redirect)

지금의 페이지에서 특정 조건을 만족하지 않으면 다른 페이지로 전환시키는 기능. 

@RequestMapping("/modifyForm") 
public String modifyForm(Model model,  
HttpServletRequest request) { 

HttpSession session = request.getSession(); 
Member member = (Member) sessioin.getAttribute("member"); 

if(member == null){ 
return "redirect:/"; // 회원정보 수정 요청시 회원정보 세션이 없으면 리다이렉트. 
}else{ 
model.setAttribute("member", service.memberSearch(member)); 
} 

return "/member/modifyForm"; 
} 

ModelAndView로 리턴시에는
mav.setViewName("redirect:/");

- 인터셉트 (intercept)

로그인을 해야지만 이용할수 있는 페이지가 많은 경우 그떄마다 체크해서 redirect를 심어주기 번거로움.
따라서 리다이렉트를 사용해야 하는 경우가 많은 경우 HandlerInterceptor를 이용할 수 있다.

spring에서는 HandlerInterceptor를 구현한 HandlerInterceptorAdapter라는 것을 제공. 
HandlerInterceptorAdapter 얘를 상속 받아서 이용하면 됨. 

HandlerInterceptorAdapter에는
preHandle과 posetHandle 그리고 afterCompletion이 있다.
각각 필요에 따라 오버라이딩해서 사용하면 된다. 
 
preHandle() : 컨트롤러가 작업을 수행하기 전에 실행. 
posetHandle() : 컨트롤러가 작업을 마친후에 실행.
afterCompletion() : 컨트롤러와 뷰작업을 모두 마친후에 callback됨.

보통 preHandle()을 많이 사용하며 안에서 
session 체크 후 null이면 리다이렉트 시키는 형태로 많이 쓴다. 

해당 HandlerInterceptorAdapter를 구현한 클래스 는 
스프링 설정파일에서 interceptor태그 추가 

.
.
<interceptors>
	<interceptor>
		<mapping path="member/modifyForm"/>
		<mapping path="member/removeForm"/>
		<!-- 이런 방식도 가능. 
		<mapping path="member/**"/>
		<exclude-mapping path="member/joinForm"/>
		<exclude-mapping path="member/loginForm"/>
		-->
		<beans:bean class="com.package.MemberLoginInterceptor"/> // 매핑에 설정된 경로로 접근하면 무조건 MemberLoginInterceptor부터 탐.
	</interceptor>
</interceptors>
.
.

세션과 쿠키

웹 서비스를 가능하게 해주는 HTTP프로토콜은 클라이언트와 서버의 관계를 유지하지 않는 특징이 있다.(Connectionless Protocol)

 1. [요청] 클라이언트       >       요청(request) : 서버연결        >      서버
 2. [응답] 클라이언트      < 응답(response) : 응답 후 연결 해제 <       서버 

서버가 응답 후 연결을 끊는 이유는 서버의 자원을 관리하기 위함. 

클라이언트의 요청시마다 서버와 매번 새로운 연결을 생성해야 되서 
일반적인 로그인 상태 유지나 장바구니 등의 기능 구현이 어려움. 

이러한 Connectionless Protocol의 불편을 해결하기 위해 세션과 쿠키를 이용한다.

세션과 쿠키는 클라이언트와 서버의 연결 상태를 유지해주는 방법으로
둘다 사용자의 데이터를 저장한다는 공통점이 있지만,
쿠키는 클라이언트 쪽에서 연결 정보를 관리 
세션은 서버쪽에서 연결 정보를 관리한다는 차이가 있다. 

세션

HttpServletRequest 혹은 HttpSession으로 사용가능. 
로그인시 세션에 로그인정보를 생성한다. 
서버에 생성해 놓은 세션을 이용해 회원정보 수정이나 삭제 가능. 

로그아웃시에도 서버에있는 세션에서 로그인 정보를 지움. 

/* HttpServletRequest를 이용한 방법 */
@RequestMapping(value= "/login", method=RequestMethod.POST) 
public String login(Member member, HttpServletRequest request){ 
Member mem = service.memberSearch(member); 

HttpSession session = request.getSession(); 
session.setAttribute("member", mem); // 세션 생성.  

return "/member/loginOk"; 
} 

/* HttpSession을 이용한 방법 */
@RequestMapping(value= "/login", method=RequestMethod.POST) 
public String login(Member member, HttpSession session){ 
Member mem = service.memberSearch(member); 

session.setAttribute("member", mem); // 세션 생성.  

return "/member/loginOk"; 
} 

HttpServletRequest , HttpSession 둘의 차이점은 거의 없으며, 단지 세션객체를 얻는 방법에 차이가 있을 뿐. 

HttpServletRequest 는 파라미터로 HttpServletRequest을 받은 후 getSession()으로 세션을 얻음. 
HttpSession은 파라미터로 HttpSession을 받아 그대로 사용.

세션 삭제방법

로그아웃 또는 회원 탈퇴 시 사용.
session.invalidate();

세션 메소드

getId() : 세션 ID를 반환. 
setAttribute() : 세션 객체에 속성을 저장
getAttribute() : 세션 객체에 저장된 속성을 반환
removeAttibute() : 세션 객체에 저장된 속성을 제거
setMaxInactiveInterval() : 세션 객체의 유지시간을 설정
getMaxInactiveInterval() : 세션 객체의 유지시간을 반환
invalidate() : 세션 객체의 모든 정보를 삭제

쿠키 

HttpServletResponse에 쿠키를 담고 있다. 

- 쿠키 생성 및 설정 방법

@RequestMapping("/main") 
public String mallMain(Mall mall, HttpServletResponse response) { 
Cookie genderCookie = new Cookie("gender", mall.getGender()); 

if(mall.isCookieDel()){ 
genderCookie.setMaxAge(0); 
mall.setGender(null); 
}else{ 
genderCookie.setMaxAge(60*60*24*30); //한달동안 쿠키 유지 
} 
response.addCookie(genderCookie); 

return "/mall/main"; 
} 

- 쿠키를 받아서 사용하는 방법

@RequestMapping("/index") 
public String mallIndex(Mall mall,  
@CookieValue(value="gender", required=false) Cookie genderCookie,  
HttpServletRequest request) { 

if(genderCookie != null) 
mall.setGender(genderCookie.getValue()); 

return "/mall/index"; 
} 

@CookieValue 어노테이션의 value속성은 쿠키의 이름을 나타내는데, value에 명시한 쿠키가 없을 경우 익셉션이 발생한다.
익셉션을 막는 방법이 바로 rquired 속성. 기본값이 true인데 true인 경우 value에 해당하는 값이 없으면 익셉션 발생.
따라서 required 속성을 false로 해서 쿠키값이 없어도 익셉션이 발생하지 않도록 한다. 

실무에선 세션이 보안이 강해서 좀 더 많이 쓰이지만, 보안이 중요한 데이터가 아닌경우 쿠키 이용. 

출처 : 인프런 스프링 프레임웤 강좌

1. TypeScript란 ?

자바스크립트와 전혀 다른 언어겠지 라는 생각에 JavaScript부터 마스터 한 후에 다른걸 파봐야지 하면서 생각조차 하지 않고 있었는데, 리액트와 더불어 굉장히 각광받고 있는 것이 요 TypeScript라고 한다. 

TypeScript는 자바스크립트와 다른 언어가 아니며, 자바스크립트이다.

그러나, 개선사항이 있을 뿐.

개발자를 위한 개선점들일뿐.. 그게 다 라고한다. 

TypeScript는 MS(마이크로소프트)에서 나왔고, 때문에 visual studio code를 사용하면 호환성이 좋다고한다.

자동완성도 지원하고 type이 argument인지 function인지도 알 수 있는 장점이 있다고 한다.

버그프리(bug-free)한 언어로, 디버깅도 필요 없다고하는데, 좀 더 자세한 내용은 TypeScript 강의를 들은 후 포스팅 할 예정이다.

시맨틱 마크업이란 무엇인가 ?

먼저 시맨틱(semantic) 이라는 단어는 '의미론의' 혹은 '의미의' 라는 뜻을 가진 형용사다. 

여러 구글링 결과 POSH(Plain Old Semantic HTML)라고도 불리운다고 하는데,

직역하면 평범하고 오래된 의미론적인 HTML 이라는 말이다.

자바 배울때 많이 들어본 POJO(Plain Old Java Object)와 비슷한 개념인듯 ????

결국 시멘틱 마크업이란, 의미에 알맞게 HTML요소를 올바르게 사용하는 것을 말한다.

프로그래밍 언어는 사람과 사람간의 약속임과 동시에 사람과 기계와의 약속이기도 하다.

프로그래밍에서 이러한 약속을 잘 지키는 것에 대한 중요성이 대두되면서 나온 개념으로 보인다.

시맨틱 마크업을 하기 위해서는 ?

의미에 맞는 태그와 요소를 사용하고, 문서를 표현할 때 구조화를 잘 해주는 것이 중요하다.

정해진 약속대로 코드를 작성하게 되면, 컴퓨터와 사람 모두 이해하기 쉬운 코드가 되며, 유지보수도 용이해진다는 장점이 있다.

<div id="heading" style="font-size: 200%"> 시맨틱 마크업에 대하여 </div>

위의 요소는 다분히 제목같아 보이지만 의미와 용도면에서 제목으로서의 기능은 없다.

이러한 코딩은 검색엔진의 최적화와 개발면에서 부정적인 효과를 가지고 있다. 

 - 최적화 : 검색엔진을 최적화하는데는 headings 요소 내부에 키워드가 매우 중요하다. 

 - 개발 : 적절한 시맨틱 마크업을 사용하지 않을 시, 스크립트와 css로 스타일을 설정하기 까다롭고, 협업시나 유지보수 면에서도 좋지 않다.

또한 아래 요소들은 같은 모양으로 표현되지만 의미는 같지 않다.

<b>굵은</b> / <string> 중요한 </string>
<i>이탤릭</i> / <em> 강조하는 </em>
<u>밑줄</u> / <ins> 새롭게 추가된 </ins>
<s>중간선이 있는</s> / <del>삭제된</del>

의미에 맞는 요소들을 선택하여 코딩해야 한다.

시맨틱 마크업은 가능한 가벼워야 하고, 중첩되는 div요소들과 같은 스파게티 코드는 지양되어야 한다.

Servlet버전 별 web.xml 스키마 예제

 - Servlet 2.5

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">

 - Servlet 3.0

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	version="3.0">

 - Servlet 3.1

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	version="3.1">

 - Servlet 4.0

<?xml version="1.0" encoding="UTF-8"?>
<web-app
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
    version="4.0">

robots.txt 파일

 웹을 색인하는 검색엔진 로봇을 차단하거나,
일부 페이지는 검색될 수 있도록 허용시키는 설정을 할 수 있다. 

예를 들어, 웹 사이트의 실제 오픈 전 도메인을 연결해 놓았다면
웹에서 검색엔진이 사이트를 자동으로 크롤링할 수 있다.

크롤링 나무wiki : https://namu.wiki/w/%ED%81%AC%EB%A1%A4%EB%A7%81

이러한 일을 방지하고자 할 때 robots.txt파일을 이용한며, 사용법은 쉽다.

- 파일위치: 
robots.txt 파일은 일반 텍스트 파일(.txt)이며, 도메인의 root 위치에 있어야 하고, 반드시 'robots.txt' 파일명으로 저장되어야 한다

root위치란 ,
http://www.example.com/robots.txt는 유효한 위치이지만,
http://www.example.com/mysite/robots.txt는 유효하지 않은 위치이다.
일반적으로 프로젝트의 최상의 web폴더나, webapp폴더에 위치한다.

- 작성방법:
전체 웹사이트를 검색엔진이 색인하도록 허용하고자 할 때에는 다음과 같이 robots.txt파일을 작성 후 추가한다. (혹은, robots.txt를 사이트로부터 제거 하는 방법이 있다.)
User-agent: *
Disallow:

검색엔진에서 어떤 검색봇도 접근하지 못하게 하려면 다음과 같이 작성한다.
User-agent: *
Disallow: /

특정 디렉토리(예: board) 하위 페이지들에 대한 접근을 모두 막으려면 다음과 같이 작성한다.
User-agent: *
Disallow: /board/