2주차 개념 스터디 - 서버와 클라이언트, 세션과 쿠키, Prettier & ESLint

🍰 서버와 클라이언트란?

 클라이언트 <-> 서버

 

1. 클라이언트/서버

• 클라이언트/서버는 두 개의 컴퓨터 프로그램 사이에 이루어지는 역할 관계를 나타내는 것이다. 클라이언트는 다른 프로그램에게 서비스를 요청하는 프로그램이며, 서버는 그 요청에 대한 응답을 해주는 프로그램이다.
• 클라이언트/서버 개념은 단일 컴퓨터 뿐만 아니라, 네트워크 환경에서도 적용 가능하다.
• 네트워크 상에서의 클라이언트/서버 모델은 분산되어 있는 프로그램들을 연결시켜주는 편리한 수단을 제공한다.

 

2. 서버 (Server)

• 웹페이지, 사이트, 앱을 저장하는 컴퓨터
• 클라이언트의 요청을 받아서 처리하고, 이를 다시 클라이언트에게 응답을 보냄
• 어떤 형태로든 클라이언트의 요청을 받아 정보를 제공하면 서버 컴퓨터가 된다.
•  

3. 클라이언트 (Client)

• 서버와 이어진 모든 단말기와 단말기에서 이용하거나 웹에 접근하는 소프트웨어를 지칭함
• 컴퓨터는 Wi-fi에, 모바일은 모바일 네트워크에 연결되어 있다
• 보통은 브라우저나 게임과 같이 별도의 클라이언트가 서버랑 호응하는 경우도 있다
• 사용자의 입력을 주로 처리하며, 이를 서버에 요청을 보낸다

 

---

 

🥨 세션 & 쿠키

1. 세션/쿠키를 사용하는 이유

• HTTP 프로토콜의 특징이자 약점을 보완하기 위해 사용한다!

[ HTTP 프로토콜의 특징 ]

1) Connectionless (비연결지향)

- HTTP는 클라이언트가 요청(Request)를 서버에 보내고, 서버는 클라이언트에게 적절한 응답(Response)을 주고나서 연결(Connection)을 끊는다

- HTTP 1.1에서 Connection 헤더에 keep-alive라는 옵션을 통해 커넥션을 유지할 수 있다

 

2) Stateless (상태없음)

- Connection을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는다

 

=> 세션과 쿠키는 위와 같은 특징을 보완하고자 사용된다!

 

2. 쿠키 (Cookie)

[ 쿠키란? ]

• 클라이언트 로컬(local)에 저장되는 키(key)와 값(value)이 들어있는 작은 데이터 파일이다
• 서버에서 HTTP Response Header에 Set-Cookie 속성을 이용하여 클라이언트에게 쿠키를 제공한다
• 쿠키에는 이름, 값, 만료 날짜 및 시간(쿠키 저장기간), 경로 정보 등이 담겨있다
• 클라이언트의 상태 정보를 로컬에 저장했다가 사용자가 따로 요청하지 않아도 브라우저의 요청(Requset) 시 참조된다
• 서버측에서 쿠키의 만료 날짜/시간을 지정하여 정해진 시간동안 데이터(상태정보)를 유지할 수 있다
• 주로 로그인 상태 유지, 쇼핑몰의 장바구니, 팝업창 등에 활용된다

 

[ 쿠키의 구성요소 ]

• 이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
• 값 : 쿠키의 이름과 관련된 값
• 유효시간 : 쿠키의 유지시간
• 도메인 : 쿠키를 전송할 도메인
• 경로 : 쿠키를 전송할 요청 경로

[ 쿠키의 동작 방식 ]

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

 

[ 쿠키 장점 ]

• 서버의 저장공간이 절약된다

 

[ 쿠키 단점 ]

• 요청 시 쿠키 값을 그대로 보내기 때문에 보안이 취약하다
• 허용되는 용량이 작다 (사이트 당 20개, 모두 합쳐서 최대 300개. 각 쿠키는 4Byte를 넘을 수 없다)
• 웹 브라우저마다 지원 형태가 다르다
• 웹 브라우저를 변경할 경우 다른 웹브라우저에서 저장한 쿠키값을 사용할 수 없다
• 사용자가 보안상의 문제로 거부할 경우 사용할 수 없다
• 쿠키의 크기가 클 경우 네트워크 부하가 커진다
• 한번에 하나의 정보만 저장 가능하다

 

3. 세션 (Session)

[ 세션이란? ]

• 서버에 클라이언트의 상태 정보를 저장하는 기술로, 쿠키를 기반으로 한 논리적인 연결을 의미한다
• 웹 서버에 클라이언트에 대한 정보를 저장하고 클라이언트에게는 클라이언트를 구분할 수 있는 ID인 "Session id"를 부여한다
• 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지하며, 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정이 가능하다
• 사용자에 대한 정보를 서버에 두기 대문에 쿠키보다 보안은 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지한다
• 따라서 동시 접속자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 된다

[ 세션의 동작 방식 ]

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

[ 세션 장점 ]

• 최초 접속을 제외하고 세션 ID만 사용하기 때문에 어느정도의 보안은 유지된다
• 서버의 용량이 충분하다면 저장 개수나 용량의 제한이 없다
• 서버에 저장되므로 클라이언트의 웹 브라우저에 의존하지 않는다
• 데이터를 Hash Table에 저장하기 때문에 한 번에 많은 정보를 하나의 세션 객체에 저장이 가능하다
• 세션 ID만 보내므로, 세션의 크기가 커도 네트워크 부하가 거의 없다

[ 세션 단점 ]

• 서버에 데이터를 저장하므로 세션의 양이 많아질수록 서버에 부하가 커진다

 

4. 세션 vs 쿠키

 

(추가)

[ 캐시 vs 세션/쿠키 ] 

• 캐시는 이미지나 css, js 파일 등을 브라우저나 서버 앞단에 저장하여 사용하는 것이다
• 한 번 캐시에 저장되면 브라우저를 참고하기 때문에 서버에서 변경이 되어도 사용자는 변경되지 않게 보일 수 있다. 따라서 이런 문제는 캐시를 지워주거나 서버에서 클라이언트로 응답을 보낼 때 header에 캐시 만료시간을 명시하는 방법 등을 이용할 수 있다

 

 

 

• Prettier & ESLint
  Javascript를 사용하시면서 가장 자주 마주치게 될 기술들입니다. 왜 필요한지, 무엇이 다른지에 대해서 정리해봅시다.

 

---

 

🍨 Prettier & ESLint

1. ESLint

Javsscript는 느슨한 형식의 언어이기 때문에 코드 에러가 자주 발생한다. 

하지만 자바스크립트는 프로그램을 직접 실행하여 코드를 분석하는 동적 분석을 하기 때문에 에러를 찾으려면 코드를 직접 실행해서 확인해야 한다

이를 Linter를 통해 할 수 있다!

 

[ Linter ]

- 코드를 정적으로 분석하기 때문에 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해준다

- 추가적으로 간단한 코드 포맷팅 기능도 제공한다

 

 

2. Prettier

 

[ Prettier ]

- 기존의 코드에 적용되어 있던 스타일들을 전부 무시하고, 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 코드 포맷터이다

(코드 포맷터 : 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구)

 

3. 결론

ESLint는 문법에러나 특정 문법 요소를 쓰도록 만드는 등 코드 퀄리티를, Prettier는 길이나 탭 같은 코딩 스타일을 일괄적으로 통일하는 도구이다

(보통은 이 두 개를 같이 사용한다)

 

 

 

 

 

 

 

[ 참고 사이트 ]

https://hahahoho5915.tistory.com/32

쿠키(Cookie), 세션(Session) 특징 및 차이

https://interconnection.tistory.com/74

쿠키와 세션 개념

https://soojae.tistory.com/39

ESLint와 Prettier 사용법과 차이점