Youth-tory 유스토리

HTTPS VS HTTP

HTTP HTML을 전송하기 위한 통신규약

HTTPS 보안이 강화된 HTTP. HTTP는 암호화되지 않는 방법으로 데이터를 전송하기 때문에 서버와 클라이언트가 주고 받는 메시지를 감청하는 것이 쉬움.

SSL 디지털 인증서

SSL 인증서는 클라이언트와 서버간의 통신을 제 3자가 보증해주는 전자화된 문서.

클라이언트가 서버에 접속한 직후에 서버는 클라이언트에게 이 인증서를 전달한다.

클라이언트는 이 인증서 정보가 신뢰할 수 있는 것인지 검증 후 다음 절차를 수행함.

SSL 이용의 이점

• 통신 내용이 공격자에게 노출되는 것을 막을 수 있다.
• 클라이언트가 접속하려는 서버가 신뢰할 수 있는 서버인지 판단할 수 있다.
• 통신 내용의 악의적인 변경을 방지할 수 있다.

SSL 암호화

SSL은 보안과 성능상의 이유로 대칭키와 비대칭키 암호화 기법을 혼용해 사용하고 있다.

대칭키 Symmetric Encryption

동일한 키로 암호화와 복호화를 같이 할 수 있는 방식.

• 단점

  암호를 주고 받는 사람들 사이에 대칭키를 전달하는 것이 어렵다.

  대칭키가 유출되면 키를 획득한 공격자는 암호의 내용을 복호화할 수 있기 때문에 보안에 취약하다.

비대칭키 Asymmetric Encryption

A키로 암호화 하면 B키로 복호화할 수 있고, B키로 암호화하면 A키로 복호화할 수 있는 방식.

두개의 키 중 하나를 비공개키(비밀키, 개인키, private key), 나머지 하나를 공개키(public key)로 지정한다.

비공개키는 자신만이 가지고 있고, 공개키를 타인에게 제공한다.

공개키를 제공 받은 타인은 공개키를 이용해 정보를 암호화한다. 암호화한 정보는 비공개키 소유자가 복호화할 수 있다.

이 과정에서 공개키가 유출된다고 해도, 비공개키를 모르면 복호화할 수 없기 때문에 안전하다.

• 전자서명

  ① 비공개키의 소유자는 비공개키를 이용해 정보를 암호화한 후에 공개키와 함께 전송한다.

  ② 정보와 공개키를 획득한 사람은 공개키를 이용해 암호화된 정보를 복호화한다.

  암호화된 데이터를 공개키를 가지고 복호화할 수 있다는 것은 그 데이터가 공개키와 쌍을 이루는 비공개키에 의해 암호화 되었다는 것을 의미함. -> 공개키가 데이터를 제공한 사람의 신원을 보장해준다.

SSL 인증서

인증서의 기능

1. 클라이언트가 접속한 서버가 신뢰할 수 있는 서버임을 보장
2. SSL 통신에 사용할 공개키를 클라이언트에게 제공

CA (Certificate Authority)

인증서의 역할을 하는 민간기업들을 CA라고 부른다.

CA는 신뢰성이 엄격하게 공인된 기업만 참여할 수 있다.

Symantec , Comodo, GoDaddy, GlobalSign . . .

SSL을 통해 암호화된 통신을 제공하려는 서비스는 CA를 통해 인증서를 구입한다.

SSL 인증서의 내용

1. 서비스 정보(CA, 서비스 도메인 등)
2. 서버 측 공개키

이 내용은 CA에 의해 공개키방식으로 암호화 된다. CA는 자신의 CA비공개키를 이용해 서버가 제출한 인증서를 암호화한다.

CA 리스트

브라우저는 내부적으로 CA 리스트를 미리 파악하고 있다. 브라우저의 소스코드 안에 CA의 리스트가 들어가 있다.

브라우저의 CA 리스트에 포함되어야만 공인된 CA 기관이다.

CA 리스트와 함께 각 CA의 공개키를 브라우저는 이미 알고 있다.

SSL 인증서가 서비스를 보장하는 방법

1. 웹브라우저가 서버에 접속할때 서버는 인증서를 제공한다.

2. 브라우저는 이 인증서를 발급한 CA가 자신의 CA리스트에 있는지 확인한다.

3. 포함되어 있다면, 해당 CA의 공개키를 이용해 인증서를 복호화한다.

   복호화할수 있다는 것은, CA에 의해 암호화 되었다는 의미 <전자서명>

   CA에 의해 암호화되었다는 것은, 해당 서비스가 신뢰할 수 있다는 것을 의미

SSL 동작방법

1. Handshake

1. Client Hello

   클라이언트측에서 생성한 랜덤 데이터

   클라이언트가 지원하는 암호화 방식들

   세션 아이디

2. Server Hello

   서버측에서 생성한 랜덤 데이터

   서버가 선택한 클라이언트의 암호화 방식

   인증서

3. 클라이언트는 인증서를 확인하기 위해 CA 리스트를 확인한다.

   CA리스트에 인증서가 없다면, 사용자에게 경고 메시지 출력

   클라이언트에 내장된 CA의 공개키를 이용해 인증서를 복호화 => 성공 : 신뢰할 수 있는 서버

   클라이언트는 클라이언트 랜덤데이터와 서버 랜덤데이터를 조합해 pre master secret key를 생성한다.

   pre master secret key는 대칭키이기 때문에 절대로 노출되어서는 안된다.

서버의 공개키로 pre master secret key값을 암호화한 후 서버로 전송

4. 서버는 클라이언트가 전송한 pre master secret key를 본인의 비공개키로 복호화한다.

서버와 클라이언트는 일련의 과정을 거쳐 pre master secret --> master secret

master secret은 session key를 생성하며, session key를 이용해 서버와 클라이언트는 데이터를 대칭키 방식으로 암호화 한 후에 주고 받는다.

5. 클라이언트와 서버는 handshake 단계의 종료를 서로에게 알린다.

2. Session

세션은 실제로 서버와 클라이언트가 데이터를 주고 받는 단계이다.

정보를 상대방에게 전송하기 전에 session key 값을 이용해 대칭키 방식으로 암호화 한다.

상대방도 session key값을 알고 있기 때문에 복호화할 수 있다.

굳이 대칭키를 조합해서 사용하는 이유는?

공개키 방식이 많은 컴퓨터 파워를 사용한다. 공개키만 사용한다면 접속이 몰리는 서버는 매우 큰 비용을 지불 할 것.

대칭키만 사용한다면 키가 노출되는 위험이 있으므로, 공개키 방식으로 대칭키를 암호화하고 실제로 데이터를 주고받을 때는 대칭키 방식을 사용하는 것이다.

3. Session 종료

데이터의 전송이 끝나면 SSL 통신이 끝났음을 서로에게 알려준다.

이 때, 통신에서 사용한 대칭키인 세션키는 폐기한다.

	public List<String> selectAll() {
		return jdbc.query(SELECT_ALL, Collections.emptyMap(), new RowMapper<String>() {
			@Override
			public String mapRow(ResultSet rs, int rowNum) throws SQLException {
				return rs.getString("name");
			}
		});
	}

mapRow 생성

React Life Cycle

컴포넌트 초기 생성

컴포넌트가 브라우저에 나타나기 전,후에 호출되는 API

constructor

constructor(props){
  super(props);
}

컴포넌트가 새로 만들어질때 마다 이 함수가 호출 된다.

componentWillMount

componentWillMount(){
  
}

컴포넌트가 화면에 나타나기 직전에 호출되는 API. 현재는 사라짐.(v16.3)

componentDidMount

componentDidMount(){
  
}

컴포넌트가 화면에 나타나게 됐을때 호출되는 API.

컴포넌트 업데이트

props의 변화, state의 변화에 따라 결정.

componentWillReceiveProps

componentWillReceiveProps(nextProps){
	//this.props는 아직 바뀌지 않은 상태
}

컴포넌트가 새로운 props를 받게 됐을 때 호출된다.

주로, state가 props에 따라 변해야 하는 로직을 작성.

static getDerivedStateFromProps()

이 함수는, v16.3 이후에 만들어진 라이프사이클 API이다.

props로 받아온 값을 state로 동기화하는 작업을 해줘야 하는 경우에 사용.

static getDerivedStateFromProps(nextProps, prevState){
  // 여기서는 setState 를 하는 것이 아니라
  // 특정 props 가 바뀔 때 설정하고 싶은 state 값을 리턴하는 형태로
  // 사용됩니다.
  /*
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
  */
}

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
  // return false 하면 업데이트를 안함
  // return this.props.checked !== nextProps.checked
  return true;
}

Virtual DOM에 불필요한 리렌더링을 방지하기 위해 작성.

기본으로 true를 반환한다. 만약 false를 반환하면 해당조건에는 render 함수를 호출하지 않는다.

componentWillUpdate

componentWillUpdate(nextProps, nextState){
  
}

shouldComponentUpdate에서 true를 반환했을때만 호출.

애니메이션 효과를 초기화하거나, 이벤트리스너를 없애는 작업.

이 함수가 호출되고 난 다음에는, render() 호출.

getSnapshotBeforeUpdate()

1. render()
2. getSnapshoptBeforeUpdate()
3. componentDidUpdate

DOM변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate에서 3번째 파라미터로 받아올 수 있게 된다.

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot){
  
}

render()를 호출하고 난 다음에 발생.

컴포넌트 제거

컴포넌트가 더 이상 필요하지 않게 되면 단 하나의 API 호출

componentWillUnmount

componentWillUnmount(){
  
}