Cookie (쿠키) 쇼핑카트애플리케이션 만들기 (width nodeJs)

Shopping cart

사용자가 구매하고자 하는 아이템을 장바구니에 담는 기능

쿠키를 제어해서, 쿠키를 만들고,변경,삭제 하여 만들어지는 기능.

라우팅 처리

 

/products 구현

 

~/products : 제품 목록이 나오고, ~/cart 카트버튼을 누르면 장바구니에 담은 목록이 삭제 버튼과 함께 존재.

제품이름을 누를때마다 카트에 클릭한 갯수만큼 카운트가 될 것이다. 그 형태는 다음과 같다.

 

 

   

 

Line 15 : products[name].title 로 console.log를 찍어보면

'The history of web 1'

'The next web'

을 확인할 수 있다.

 

 

Line 14 : output 변수 - 화면에 그려낼 요소를 담는 변수를 만들었다.

Line 15-19 :  

화면에 이 객체가 가지고 있는 제품 목록을 그려보자. for ... in 문 in뒤에는 순회하고 싶은 객체명 in 앞에는 객체가 가지고 있는 프로퍼티.

products 객체 안에 있는 값들을 하나씩 꺼내서 name의 값으로 products의 객체 프로퍼티에 접근한다.

Line 17 : 각 요소를 눌렀을 때, 이동할 경로지정. (${name} : nodejs에서는 변수에 접근할 때 ${}안에 명시하며, 여기서 name은 products 객체의 프로퍼티에 접근함)

 

 

 

/cart:id 구현

 

사용자가 담은 장바구니를 어떤 형식의 데이터로 저장해서, 사용자의 웹브라우저에 저장할 건지 정한다.

 

cart = {

1(번아이템):(누른횟수),

2(번아이템):(누른횟수)

};

 

 

 

(test)

 

 

 

 

 

카트목록만들기 /cart

 

 

 

Cookie & Security (보안)

 

위에까지 작성된 코드는 보안에 취약하다. 네트워크에서 Request Headers 에 쿠키이름과 저장된 내용이 보여지고 있기 때문이다.

예를 들어 로그인과 관련된 사용자의 중요한 정보가 이렇게 남아버리면 큰일!!

 

특히나 쿠키는 전송하는 과정에서 노출될 수 있지만, 컴퓨터에 저장되기 때문에 타인에게 노출되면 큰일인 문제이다.

 

현재 http로 통신하고 있는 중인데, https 방식으로 통식을 하는 것이 좋다 : 이것은 그냥 되는 것이 아니라 https 통신이 가능하도록 여러가지 설정을 해주어야 한다.

https를 사용하면 이해할 수 없는 암호환 된 정보로 통신하기 때문에 보안에 좀 더 유리하며, 쿠키값을 암호화 할 수 있다.

 

 

 

 

쿠키 암호화 하기

 

app.use(cookieParser()); 부분에 인자로 암호를 넣습니다.

 

 

서버에서 브라우저로 쿠키를 보낼 때, 암호화를 해서 그 암호화된 정보를 보낸다는 뜻.

그럼 브라우저는 암호화된 상태로 저장했다가 서버에 요청할 때 암호화된 정보를 그대로 보내주면, 지정한 키값(Line 6 : 암호)를 이용해서 암호화된 정보를 해석하여 원래 값으로 다시 바꾸는 역할(키,암호가)을 합니다.

 

 

 

 

< 쿠키 암호화 하기 > /count 에 적용해보기.

 

Line 68 : 쿠키를 생성하는 부분에 인자 추가 {signed:true} 저장할 때 signed해서 = 암호화해서 저장한다는 뜻