TIL [dev-interview-study] 12.14 발표 주제

진형욱·2022년 12월 16일
0

개발면접공부

목록 보기
7/8
post-thumbnail

각 스터디원들이 발표한 주제의 키워드를 모아, 복습하기 위해 정리하는 공간

우리가 사용하고 있는 웹 사이트들의 경우, 한 번 로그인 하면 다시 로그인할 필요 없이
여러 페이지를 돌아다니며 다양한 기능들을 다시 이용할 수 있다
브라우저를 껏다 켜도 로그인이 유지가 되기도 한다

이는 HTTP의 비연결성 및 무상태성 특징을 보완한 기술인 Cookie와 Session 덕분이다.

쿠키란 클라이언트가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해
클라이언트의 브라우저에 설치되는 작은 기록 정보 파일을 말한다.

MockHttpServletResponse:
           Status = 200
          Headers = [Set-Cookie:"userName=kevin", "password=abc123"]
  • 서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 클라이언트 측에 저장하고 싶은 정보를 응답 헤더의 Set-Cookie에 담습니다.
    - 쿠키는 Key-value 형식의 문자열이다.
MockHttpServletRequest:
      HTTP Method = GET
      Request URI = /user/my/edit
          Headers = [Cookie:"userName=kevin"; "password=abc123"]
  • 이후 해당 클라이언트는 요청을 보낼 때마다, 매번 저장된 쿠키를 요청 헤더의 Cookie에 담아 보낸다.
  • 서버는 쿠키에 담긴 정보를 바탕으로 해당 요청의 클라이언트가 누군지 식별할 수 있다.
  • 보안에 취약하다.
    - 요청 시 쿠키의 값을 그대로 보낸다
    • 유출 및 조작 당할 위험이 존재
  • 용량 제한이 있어 많은 정보를 담을 수 없다
  • 웹 브라우저마다 쿠키에 대한 지원 형태가 달라 브라우저간 공유가 불가능
  • 쿠키 사이즈가 커질수록 네트워크 부하가 심해진다

보완점 ➡️ SEESION

쿠키를 통해 클라이언트 로그인 상태를 유지시킬 수 있었지만 쿠키가 유출 및 조작 당할 위험이 존재하여
개인정보를 HTTP로 주고 받는 것은 위험하다.

그래서 세션은 비밀번호 등 클라이언트의 인증 정보를 쿠기가 아닌 서버 측에 저장하고 관리한다.

HTTP/1.1 200
Set-Cookie: JSESSIONID=FDB5E30BF20045E8A9AAFC788383680C;
  • 서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 인증 정보는 서버에 저장하고 클라이언트 식별자인 JSESSIONID를 쿠키에 담는다
  • 이후 클라이언트는 요청을 보낼 때마다, JSESSIONID 쿠키를 함께 보낸다
  • 서버는 JSESSIONID 유효성을 판별하여 클라이언트를 식별한다.

SEESION 장단점

장점

  • 쿠키를 포함한 요청이 외부에 노출되더라도 세션 ID 자체는 유의미한 개인정보를 담고 있지 않다.
    - 하지만 해커가 이를 중간에 탈취하여 클라이언트인척 위장할 수 있다는 한계가 존재
  • 각 사용자마다 고유한 세션 ID가 발급, 요청이 들어올 때마다 회원정보를 확인할 필요가 없다.

단점

  • 서버에서 세션 저장소를 사용하므로 요청이 많아지면 서버에 부하가 심해짐

JWT 기반 인증

JWT(Json Web Token)이란 인증에 필요한 정보들을 암호화시킨 토큰을 의미한다
JWT 기반 인증은 쿠키/세션 방식과 유사하게 JWT 토큰을 HTTP 헤더에 실어 서버가 클라이언트를 식별

구조


JWT는 .을 구분자로 나누어지는 세 가지 문자열의 조합이다

각 정보를 암호화할 해싱 알고리즘 및 토큰의 타입을 지정한다

Payload

토큰의 담을 정보를 지니고 있다. 주로 클라이언트의 고유 ID값 및 유효 기간 등이 포함되는 영역

Signature

Header + Payload 더한 뒤 비밀키로 해싱하여 생성한다.
Header와 Payload는 단순히 인코딩된 값이기 때문에 제3자가 복호화 및 조작 가능하지만
Signature는 서버 측에서 관리하는 비밀키가 유출되지 않는 이상 복호화할 수 없다
따라서 토큰의 위변조 여부를 확인하는데 사용한다

인증과정

{
	Authorization: <type> <access-token>
}
  1. 클라이언트 로그인 요청이 들어오면, 서버는 검증 후 클라이언트 고유 ID 등의 정보를 Payload에 담는다
  2. 암호화할 비밀키를 사용해 Access Token(JWT)를 발급
  3. 클라이언트는 전달받은 토큰을 저장하고, 서버에 요청할 때마다 토큰을 요청 헤더 Authorization에 포함시켜 함께 전달
  4. 서버는 토큰의 Signature를 비밀키로 복호화한 다음, 위변조 여부 및 유효 기간 확인
  5. 유효한 토큰이면 요청에 응답

장단점

장점

  • Header와 Payload를 가지고 Signature를 생성하므로 데이터 위변조를 막음
  • 클라이언트 인증 정보를 저장하는 세셩과 다르게, 서버는 무상태가 된다
  • 토큰 기반으로 다른 로그인 시스템에 접근 및 권한 공유가 가능

단점

  • 쿠키/세션과는 다르게 JWT는 토큰의 길이가 길어, 인증 요청이 많아질수록 네트워크 부하가 심해진다.
  • 토큰을 탈취당하면 대처하기 어렵다
    - 토큰은 한 번 발급되면 유효기간이 만료될 때 까지 계속 사용이 가능하기 때문
  • 특정 사용자의 접속을 강제로 만료하기 어렵지만, 쿠키/세션 기반 인증은 서보 쪽에서 쉽게 세션을 삭제할 수 있다

보안 전략

  • 짧은 만료 기한 설정
  • Sliding Session(서비를 지속적으로 이용하는 클라이언트에게 자동으로 토큰 만료 기한을 늘려주는 방법)
  • Refresh Token(Access Token보다 긴 만료 기간을 가진 토큰. 서버는 DB에 저장된 Refresh Token과 비교하여 유효한 경우 새로운 Access Token을 발급하고, 만료된 경우 사용자에게 로그인을 요구함)

참고 자료
https://tecoble.techcourse.co.kr/post/2021-05-22-cookie-session-jwt/


2️⃣ SaaS

서비스형 소프트웨어(Software-as-a-Service, SaaS)는 클라우드 애플리케이션과 기본 IT 인프라 및 플랫폼을 인터넷 브라우저를 통해 최종 사용자에게 제공하는 클라우드 컴퓨팅 형태이다.

중요한 이유

SaaS 이전에는 너무 많은 비용 또는 에너지가 들었던 강력한 소프트웨어를 비즈니스에서 이용할 수 있따는 점에서 중요하다. SaaS 제공업체는 하드웨어, 소프트웨어 도구 및 애플리케이션을 자체 데이터 센터 또는 클라우드 환경에서 관리하며, 사용자는 브라우저 또는 모바일 애플리케이션에서 직접 소프트웨어에 액세스 할 수 있다.

SaaS는 구독 기반 모델을 제공하여 소프트웨어 사용을 비즈니스 요구 사항에 따라 늘리거나 줄일 수 있다.
클라우드 제공 모델을 통해 작동하며, 자체 서버 및 데이터베이스에서 애플리케이션 및 데이터를 호스팅하거나, 서드 파티 클라우드 제공업체의 서버를 활용한다.

이점

  • 클라우드 접근성
  • 저렴한 선결제 비용
  • 지속적으로 발생하는 비용 감소
  • 빠른 배포
  • 온디맨드 확장성
    (인프라 업그레이드 비용을 들이지 않고, 더 많은 서비스와 스토리지를 간편하게 구독에 추가 가능)
  • 자동 업데이트
  • 통합
    (API를 사용하여 SaaS 애플리케이션을 다른 플랫폼 및 시스템과 통합이 가능)
  • 실시간 데이터 분석

예시

  • Google Docs
  • Microsoft Office 365
    애플리케이션 서비스 제공업체와 인사 관리 소프트웨어, 전자 상거래 시스템, 고객 관계 관리 툴, 통합 개발 환경을 제공하는 엔터프라이즈 서비스다.

서비스로서의(as-a-Service)라는 용어는 제 3자가 관리하여 사용자는 사용자 정의 애플리케이션의 반복적인 개선과 같은 중요한 사항에 집중할 수 있게 해주는 솔루션을 의미한다.
SaaS 외에도 서비스로서의 인프라(IaaS)서비스로서의 플랫폼(PaaS) 서비스형 옵션이 있다.

참고자료
https://www.redhat.com/ko/topics/cloud-computing/what-is-saas


3️⃣ AJAX

비동기 자바스크립트와 XML을 말한다.
즉, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이다.
JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받는다.

페이지 전체를 리프레쉬 하지 않고 수행되는 비동기성이다.
이러한 비동기성을 통해 사용자의 Event가 있으면
전체 페이지가 아닌 일부분만 업데이트 할 수 있게 해준다.

특징

  • 자바스크립트를 이용해 비동기식으로 XML을 이용하여 서버와 통신하는 방식
  • 페이지 새로고침 없이 서버에 요청
  • 서버로부터 데이터를 받고, 작업을 수행

하지만 요즘엔 XML을 잘 안쓰고 십중팔구 JSON을 다룬다.
XMLHttpRequest를 보완한 비동기(promise) 방식의 Fetch API를 주로 사용한다.

단점

동적 페이지 렌더링을 하기 떄문에 JS 해석하지 못하는 검색 엔진에서는 내용이 검색되지 않는다는 문제가 있다.
그리고 레이아웃이 너무 복잡한 사이트는 웹 브라우저가 렌더링하는 데 힘겨워할 수도 있다.

아주 신속하게 첫 화면을 보여 줄 필요가 있는 경우에도 Ajax같은 경우 두 번의 데이터 요청을 해야 하는 문제가 있다. 이런 경우 옛 방식 그대로 서버가 모든 페이지를 그려 전달해야 하며,
이는 즉 '서버 사이드 렌더링' 이라는 새로운 포장을 두르고 있는데 알고보면 옛 기술의 현대적 재해석인셈이다.

JS를 반드시 사용해야한다. 웹 브라우저에서 지원하는 프로그래밍 가능한 언어는 JS뿐이다.
따라서 브라우저에서 JS를 꺼버리면 Ajax 기반 사이트는 화면의 일부만 그려진다.
스크립팅 기능이 제한되는 특수 목적 기기에서는 이게 문제가 된다.

참고자료
https://azderica.github.io/00-javascript-ajax/
https://namu.wiki/w/AJAX


4️⃣ 콜백함수

프로그래밍에서 콜백은 다른 코드의 인수로 넘겨주는 실행 가능한 코드를 말한다
➡️ 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수를 의미한다

JS에서 함수는 object라고 한다. 그래서, 함수는 다른 함수의 인자로 쓰일 수어떤 함수에 리턴될 수도 있다. 이런 함수를 고차 함수라고 한다.

즉, 콜백 함수란
다른 함수의 인자로써 이용되는 함수 / 어떤 이벤트에 의해 호출되어지는 함수를 일컫는다.

다른 함수의 인자로써 이용되는 함수

//hello!
function printHello(){
 print('hello');
}
//bye!
function printBye(){
  print('bye');
}

//특정 함수를 매개변수로 받아서 3초 뒤에 실행하는 함수
function sleepAndExecute(sleepTimeSecond, callback){
  //sleepTimeSecond 초 만큼 대기
  sleep(sleepTimeSecond);
  //전달된 callback 실행
  callback();
}

//3초 뒤에 hello 출력하기
sleepAndExecute(3, printHello);

//5초 뒤에 bye 출력하기
sleepAndExecute(5, printBye);

sleepAndExecute는 주어진 시간(초)만큼 대기했다가, callback 함수를 실행시키는 함수다.

이런식으로 작성하면, sleepAndExecute는 얼마나 대기할 것인지도 마음대로 정할 수 있고,
어떤 함수를 실행할 것인지도 마음대로 정할 수 있다.

sleepAndExecute(3, printHello); 에서는
printHello를 sleepAndExecute의 매개변수(인자)로 전달하므로,
printHello는 callback 함수라고 할 수 있다.

마찬가지로, sleepAndExecute(5, printBye)에서는
printBye를 sleepAndExecute의 매개변수(인자)로 전달하므로,
printBye는 callback 함수라고 할 수도 있다.

어떤 이벤트에 의해 호출되어지는 함수

function onCableConnected(){
	print("케이블이 연결되었습니다");
};

//케이블이 연결될 때 마다 전달된 onCableConnected가 호출된다고 가정
setOnCableConnected(onCableConnected);

setOnCableConnected로 설정한 함수가, 케이블을 연결할 때 마다 호출되므로,
onCableConnected는 "어떤 이벤트에 의해 호출되어지는 함수", 즉 callback 함수 라고 할 수 있다


5️⃣ 가상돔(Virtual DOM)

DOM 이란? ➡️ 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델
HTML과 Javascript(스크립팅 언어)를 서로 이어주는 역할을 하고 있다.

가상돔이 나오게 된 이유

메모리 누수와 속도

  • 개발자가 h1 태그를 찾는 코드를 변수에 저장하지 않고, 매번 접근 메서드를 사용한다면 매단계마다 수 많은 document 객체들을 전부 훑으며 찾는 현상이 발생하고 이것은 곧 메모리 누수로 이어진다.
  • h1 변화가 일어난다면 css를 다시 연산하고, 레이아웃을 구성하고, 웹페이지를 다시 그리는데 시간이 든다.

코드량

  • 객체를 찾기 위해 작성하는 코드가 번잡스러울 수 있다. id라는 고유성을 침해 당하지 않기 위해 태그 네이밍을 정할 때 심사숙고해야 할 것이며, 태그에 접근하기 위해 작성해야 하는 메서드가 길다.
    ex. document.getElementById('h1의 id')

html 마크업을 시각적인 형태로 변환하는 시간을 최소화 하기 위해 DOM조작을 통해 작업을 처리하여 개선하고자 가상돔이라는 개념을 도입한다.

Virtual DOM(가상돔)

실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후, 실제 DOM과 동기화하는 프로그래밍 개념

즉 DOM을 가볍게 만든 JS의 표현이며, 주로 React, Vue.js 그리고 Elm에 사용된다.

가상 DOM은 실제로 랜더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠르다.

DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경이 있을 때만 해당 변경을 반영한다 ➡️ 성능 향상

특징

  • 업데이트 속도가 빠르다
  • HTML을 직접적으로 업데이트 하지 않음
  • 업데이트 방식 : 새로운 가상 DOM 생성 후 이전 DOM과 비교 후 차이점 DOM만 업데이트
  • 메모리 낭비가 덜함

Virtual DOM의 Three Steps

  • 데이터가 업데이트 됐을 때, 전체 UI가 Virtual DOM에서 리렌더링 된다

  • 이전의 DOM과 새로운 Virtual DOM의 차이가 계산된다(비교)

  • 계산이 끝난 후, DOM은 변경된 부분만을 변화시킨다

정리

작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다,
큰 규모의 레이아웃이 한 번 발생하는 것은 성능상 큰 차이를 나타낸다.

리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 이끄는 것이다.

참고 자료
https://doqtqu.tistory.com/316#3.%20Virtual%20DOM(%EA%B0%80%EC%83%81%20DOM

profile
90% of my problems magically disappeared when I slept well, ate well and went on regular walks

0개의 댓글