최종프로젝트 7일차 - 스벨트에서 리엑트로, 쿠키와 세션의 차이

최종프로젝트 7일차 - 스벨트에서 리엑트로, 쿠키와 세션의 차이

 

 

몇시간 동안 강의도 듣고 주요화면 레이아웃까지 만들어놓은 스벨트 코드를 리엑트로 바꾸기로 했습니다. 오늘 한 작업들과 다음날 있을 기술면접 준비 주제인 쿠키와 세션의 차이에 대해 기록해보겠습니다.

 

 

최종프로젝트 7일차

 

오늘 한 일

 

필자가 담당한 API 목록

 

필자가 맡은 API작업을 마무리하였습니다. 그리고 API 테스트를 하며 발생하는 오류들에 대해 수정하였습니다. 그러고 나서 저녁이 되서 담당 튜터님께 지금까지 진행한 팀 프로젝트 진행사항과 궁금한 점에 대해 물어봤습니다. 

 

궁금한점.. 이걸로 인해 테이블 구조를 완전히 바꾸게 되었고, 이로 인해 내일 필자가 해야될 일은 위에 작성한 API 로직대부분을 수정하는 것으로 잡게 되었습니다.

 

기존 테이블

수정한 테이블

 

필자가 담당한 경기 결과 데이터를 관리하는 테이블의 구조가 위와 같이 바뀌었습니다. 기존 테이블 구조의 문제점이라 느낀건 한 테이블 안에 홈팀, 어웨이 팀 아이디가 있어서 테이블에 저장되는 옐로우 카드나 레드카드수가 팀별 수가 아닌 '해당경기' 전체의 수(홈팀과 어웨이팀의 합산)로 저장되어, 팀별 데이터 관리하는데 문제가 있었습니다. 또 win과 lose의 판단 기준을 홈팀을 기준으로 하여 저장하는 방식에도 문제가 있었습니다.

 

튜터님의 다양한 해결책과 팀원간의 의견을 조율하여 수정한 테이블은 home, away team id 컬럼 대신 team id 로 통합하여, 상위 테이블인 match와 1대 N 관계로 관리하기로 했습니다. 그러니까 한 경기를 치르게 되면, match_result에는 데이터 2개(홈팀, 어웨이팀)가 생성되게 됩니다. 

 

그리고 win,lose,draw 대신 goal 컬럼을 넣어 승부 결과가 필요할 때에는 경기 ID로 홈팀과 어웨이 팀 을 불러와서 계산하여 보여주기로 했습니다. 마지막으로 goal과 card들, saves 등 몇몇 컬럼에 타입을 json으로 변경하였는데, 이는 경기 결과 저장시 해당 컬럼을 증가하게 만든 사용자 ID를 넣게 하기 위해서였습니다.

 

예를 들자면 기존 테이블에는 yellow cards를 int로 잡았는데 그럴 경우, 한 경기 안에 일어난 전체 옐로우카드 수만 알 수 있고, 누가 옐로우 카드를 받아서 이런 수치가 나왔는지 확인할 수 없게 됩니다. 이를 보완 하고자 json 타입을 선택하게 되었습니다. 

 

[

   {userId:3, yellow_cards:1},

    {userId:11, yellow_cards:1},

]

 

위 처럼 사용자 id와 옐로우 카드수를 담은 객체를 배열로 담아 데이터베이스(mysql)에 저장하면 누가 어떤 수치를 내게 하였는지 파악할 수 있게 됩니다.

 

 

기술면접 대비 - 쿠키와 세션의 차이

 

 

쿠키, 세션의 개념과 차이를 설명해보세요

 

쿠키와 세션 개요

쿠키와 세션은 HTTP의 무상태(stateless) 특성을 보완하기 위해 생겨난 기술입니다. HTTP는 기본적으로 무상태 프로토콜이기 때문에, 사용자의 상태 정보를 지속적으로 유지하기 어렵습니다. 이러한 한계를 극복하기 위해 쿠키와 세션을 사용합니다.

 

쿠키와 세션 개념

쿠키는 클라이언트의 브라우저에 저장되는 작은 데이터 파일로, 사용자의 선호나 로그인 정보 같은 개인 설정을 기록하여, 사용자가 웹사이트를 재방문할 때 맞춤형 경험을 제공할 수 있습니다. 반면, 세션은 서버 측에서 사용자 정보를 유지합니다. 사용자가 웹사이트에 접속할 때마다 고유한 세션 ID가 부여되며, 이 ID를 통해 서버는 사용자의 상태를 추적

 

쿠키 동작순서

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

 

쿠키의 사용 예

• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰의 장바구니 기능
• 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니

 

세션의 동작 방식

1. 클라이언트가 서버에 접속 시 세션 ID를 발급 받음
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
4. 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져와서 사용
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

 

세션의 사용 예

• 로그인 같이 보안상 중요한 작업을 수행할 때 사용

 

쿠키와 세션 차이점

쿠키와 세션의 주요 차이점은 저장 위치와 보안입니다. 쿠키는 사용자의 컴퓨터에 저장되어 보안에 취약할 수 있으나, 세션은 서버에 저장되어 상대적으로 안전합니다. 또한, 쿠키는 클라이언트 측에서 언제든지 삭제하거나 조작할 수 있지만, 세션은 서버 측에서 관리되므로 사용자의 직접적인 접근이 제한됩니다.

 

그리고 쿠키는 하나의 도메인당 20개, 쿠키 하나당 4KB라는 용량 제한이 있지만, 세션은 서버가 허용하는 한 용량제한이 없습니다.

 

▼ 이전 진행한 프로젝트들 ▼

 

내일배움캠프 Node트랙 심화 프로젝트 역할 및 진행사항

 

내일배움캠프 NestJS 프로젝트 코드리뷰 - 온라인 공연 예매 서비스