🌈 http와 https의 차이점에 대해 설명해주세요

HTTPS와 HTTP란?

HTTP(HyperText Transfer Protocol)란 하이퍼텍스트 전송 프로토콜로, 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜입니다. HTTP 프로토콜을 사용하여 통신을 수행하면 홈페이지 URL이 ‘http://’로 시작합니다.

간단히 말하자면, HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술입니다.

HTTPS(HyperText Transfer Protocol Secure)란 HTTP의 확장 버전으로 보다 안전한 버전입니다. HTTPS 프로토콜을 사용하여 통신을 수행하면 홈페이지 URL이 ‘https://’로 시작하고, 통신하는 과정에서 HTTPS는 전송 내용을 암호화합니다. 암호화를 통해 발신자와 수신자를 제외한 중간 매개체에서 통신 내용을 확인할 수 없기 때문에, 발신자가 전송한 암호 및 기밀문서를 보호할 수 있습니다.

	HTTP	HTTPS
의미	Hypertext Transfer Protocol	Hypertext Transfer Protocol Secure
용도	이전 텍스트 기반 웹사이트	모든 최신 웹사이트
보안	추가 보안 기능 없음	퍼블릭 키 암호화에 SSL 인증서 사용
이점	인터넷을 통한 통신 지원	웹사이트에 대한 권위, 신뢰성 및 검색 엔진 순위 개선

HTTP와 HTTPS의 가장 큰 차이점은 보안입니다. HTTPS는 HTTP와 다르게, 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정하기 때문에 보다 안전하다는 장점이 있습니다. HTTPS는 SSL/TLS 프로토콜을 통해 세션 데이터를 암호화합니다.

HTTPS와 HTTP의 작동 방식

HTTP 작동 방식

• HTTP는 OSI(Open Systems Interconnection) 네트워크 통신 모델의 애플리케이션 계층 프로토콜로, 여러 유형의 요청과 응답을 정의하고 있습니다.

• 숫자 코드 및 데이터 양식으로 서버에서 다양한 유형의 HTTP 응답을 전송하는데요. 몇 가지 예시를 살펴보겠습니다.

• 200 – OK (정상)

• 400 – Bad request (잘못된 요청)

• 404 – Resource not found (리소스를 찾을 수 없음)

HTTP는 암호화되지 않은 데이터를 전송해, 제3자가 그 정보를 가로채고 읽을 수 있습니다. HTTP 상태코드에 대해 더 자세히 알고 싶다면 HTTP 상태 코드란? 의미부터 빠른 확인까지 글을 참고해보세요.

HTTPS 작동 방식

HTTPS는 HTTP 요청 및 응답을 SSL/TLS 기술에 결합합니다. SSL/TLS는 HTTPS의 암호화 방식으로, 이를 통해 HTTPS 암호화를 진행하고 발신자와 수신자만 해당 암호를 해독하여 정보를 주고받을 수 있습니다.

HTTPS 암호화를 책임지는 SSL 인증서는 다음과 같이 동작합니다. 기존의 HTTP는 클라이언트 서버 통신을 진행할때 두 당사자만 믿고 통신하게 됩니다. 하지만 HTTPS는 제3자가 등장합니다. 즉 신뢰할 수 있는 다른 기관이 존재하고 해당 기관이 서버 또는 클라이언트에 SSL 인증서를 발급하여 해당 당사자를 보증하는 방법입니다.

위 방법을 통해 우리는 접속할 사이트가 진짜 은행 사이트인지 가짜 은행 사이트인지 SSL 인증서를 통해 신뢰할 수 있게 됩니다. 그 후 신뢰된 당사자 간 암호화된 통신을 진행하면 외부에서는 어떤 내용으로 통신하는지 알 수 없습니다.

웹사이트 HTTPS 전환의 중요성

1) 보안에 우수한 HTTPS

HTTPS는 HTTP와 달리 모든 데이터를 암호화된 형태로 전송합니다. HTTP는 사용자가 민감한 데이터를 전송할 때 제3자가 네트워크를 통해 해당 데이터를 가로챌 수 없어 보안 측면에서 더 우수합니다.

예를 들어, 신용카드 세부 정보 혹은 고객 개인 정보와 같은 민감한 정보를 보호하기 위해서는 HTTPS를 사용하는 것이 좋습니다.

2) 신뢰성이 높은 HTTPS

HTTP는 HTTPS에 비해 신뢰성이 더 낮기 때문에 검색 엔진은 HTTP 웹사이트 순위를 HTTPS보다 낮게 지정합니다.

또한, 브라우저 주소 표시줄에서 URL 옆에 자물쇠 아이콘을 배치해 사용자에게 HTTPS 연결을 표시하고, 사용자는 추가 보안에 대한 신뢰로 HTTP보다 HTTPS를 선호합니다.

3) SEO에 좋은 영향을 주는 HTTPS

앞에서 잠시 언급했듯이, 구글은 몇 년 전부터 HTTPS를 순위 결정 신호로 사용하고 있습니다. HTTP에서 HTTPS로의 전환은 SEO (검색엔진최적화)에 좋은 영향을 미칩니다. 즉, HTTPS를 사용하지 않을 경우 검색 결과에서 하단으로 밀려나게 됩니다.

또한, 구글은 HTTPS를 사용하지 않을 경우 URL 창에 “안전하지 않음”이라는 경고를 띄우는 패널티를 적용하고 있습니다.

위에서 살펴본 바와 같이 HTTPS는 HTTP의 후속 모델입니다. 따라서 HTTP를 사용할지 HTTPS를 사용할지 결정하기 보단 무조건 보안을 위해 HTTPS를 사용해야 합니다. 추가로 2021년부터 대부분의 브라우저는 HTTP로 통신하는 웹사이트에서 경고 문구를 발생시킵니다. 이 때문에 HTTP 통신을 사용해서 사이트에 방문하게 되면 경고 문구 때문에 바로 진입하지 못하게 됩니다.

이처럼, 사업자로서 고객의 정보를 보호하고 클라이언트 유입과 검색 결과 노출을 위해 웹사이트를 HTTPS로 전환해야 합니다.

🌈 VanillaJS와 비교하여 리액트를 사용하는 이유에 대해 설명해주실 수 있을까요?

리액트를 쓰는 이유는 동적으로 변하는 웹 서비스가 많아진 현재 상황에서 사용자에게 더 좋은 인터페이스(UI)와 경험(UX)을 제공하기 위해서이다.
VanillaJS는 외부 라이브러리나 프레임워크를 쓰지않는 순수 자바스크립트를 뜻하는데, VanillaJS에 비해 React는 더 빠른 렌더링 및 업데이트를 위한 가상 DOM과 대규모 커뮤니티를 가지고 있으며 더 효율적이고 확장 가능성이 있다.
기본적으로 view, UI를 위한 라이브러리(프레임워크라고 말하기도 하는데 사실은 라이브러리다)인 리액트는 정말 손쉽게 view를 컨트롤할 수 있도록 제작됐다.

바닐라 자바스크립트 등 프레임워크를 이용하지 않은 순수 개발은 정해진 규격이 없어 개발하는 사람들에 따라 중구난방식 코드가 짜진다고 한다.
특히 기업에서 협업할 시, 프레임워크의 틀 없이 짜면, 새로 팀에 합류할 사람들이 코드에 적응하기 힘들며 해당 코드를 수정하는 것에 있어서도 진입 장벽이 높다.
그래서 코드의 일관성은 모든 개발에서 프레임워크 사용의 장점이라고도 볼 수 있다.

..
사실 React와 같은 라이브러리는 자체적으로 기능을 제공하고 추상화된 프로그래밍 패턴을 제공하기 때문에 이로 인해 추가적인 코드와 리소스가 필요하다. 또한, 모듈 시스템, Babel 및 웹팩과 같은 도구들의 사용으로 인해 비용이 발생할 수 있다. 따라서 Vanilla JavaScript와 비교했을 때 React는 일반적으로 더 큰 크기를 가질 수 밖에 없다.
앱의 크기는 성능에 영향을 미치는 중요한 요소 중 하나로 크기가 커지면 클라이언트 측에서 네트워크 전송 및 처리에 필요한 시간도 증가한다. 특히 인터넷 연결 속도가 느린 사용자의 경우 더욱 그렇다.

React는 빠른 업데이트를 위해서 Virtual DOM 을 사용하여 UI 업데이트를 최적화하고 성능을 향상시킨다. 하지만 Virtual DOM을 사용한다고 해서 "Vanilla 보다" 더 속도가 빠르다 라는 얘기는 아니다. React는 충분히 빠르지만 그만큼 부가적인 빌드 코드와 React 환경 관련된 코드들이 추가되기 때문에 성능 면으로는 바닐라 스크립트보다 뒤떨어질 수도 있다.

React는 중복되는 UI 코드들을 컴포넌트화를 시킬 수 있고 이로 인해 코드의 재사용성이 증가한다는 이점이 있다. 이는 곧 개발기간 단축과 유지 보수의 용이를 뜻한다. 먼 옛날에 비해 웹의 성능은 충분히 좋아졌지만, 반대로 개발자의 몸값은 배로 뛰었다. 결론적으로 대부분의 프로그래머들은 유지 보수 하는 비용을 아끼는 것이 최종적으로 더 큰 이득이라는 결론을 내렸다.

Vanilla 와 React를 직접적으로 성능 면에서 비교하는 것은 어렵기도 하고 비교 자체가 의미 없을 수 있다고 생각한다.

🌈 리액트에서 상태의 불변성이 중요한 이유가 무엇인가요?

상태를 효율적으로 업데이트하기 위함

리액트에서 상태의 불변성을 지켜야하는 이유는 리액트가 상태를 업데이트하는 원리 때문이다.

리액트는 내부적으로 UI를 최신화하기 위해 비용이 많이 드는 DOM 작업의 수를 최소화 하기위해 성능 최적화를 진행한다.

컴포넌트의 prop이나 state가 변경되면 리액트는 새로 반환된 엘리먼트를 이전에 렌더링된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정한다. 같지 않을 경우 리액트는 DOM을 업데이트 한다.

여기서 렌더링이란, 컴포넌트의 현재 props와 state에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다.
하지만 렌더링이 항상 UI 업데이트를 의미하는 것은 아니다.

리액트에서는 값 자체가 아닌 참조값을 비교(얕은 비교)하므로 참조값이 이전과 동일하면, 상태의 변화를 감지할 수 없다.

얕은 비교는 계산 리소스를 줄여주기 때문에 효율적인 상태 업데이트가 가능하다. 불변성이 없다면 모든 자식 상태 트리를 깊은 비교(deep compare)해야 하므로 비용이 많이 든다.

이러한 이유로 상태를 업데이트할 때 새로운 참조값을 가진 배열이나 객체를 생성하여 불변성을 지켜줌으로써 리액트는 상태 변화를 감지할 수 있다.

const [info, setInfo] = useState({ id: 1, name: 'kim' });
    
setState({...info, id: 1004});

예측 가능성

원본 데이터가 훼손될 경우 예기치 못한 변경을 발생시켜 사이드 이펙트를 유발하고 버그가 발생할 가능성이 존재한다. 프로그래밍의 복잡도 또한 올라간다.

반면에 불변성을 지킬경우 의도치 않은 변경 없이 애플리케이션 아키텍처를 단순하게 유지할 수 있어 보다 쉽게 예측 가능하다.

또한 불변성을 지킴으로써 변경이 발생했는지 여부를 매번 관찰하지 않고, 실제 변경이 발생한 경우만 쉽게 감지할 수 있다. 즉, 불필요한 관찰을 수행할 필요가 없다. 이는 곧 애플리케이션 최적화에도 도움이 된다.

🌈 라이프사이클이 의미하는 바에 대해서 설명해주세요.

라이프사이클은 어떤 시스템, 제품, 프로세스 또는 개체가 경험하는 다양한 단계나 상태의 연속성을 나타냅니다. 이것은 해당 개체가 어떻게 생성되고, 성장하며, 운영되며, 소멸하는지를 설명하는 개념입니다. 라이프사이클은 다음과 같이 주로 나눠집니다.

• 생성 (Creation): 개체나 시스템이 처음 만들어지는 단계로 초기화와 설정이 이루어집니다.
• 성장 (Growth): 개체가 기능을 확장하고 발전하며, 새로운 기능이나 업데이트가 추가됩니다.
• 운영 (Operation): 개체가 실제 환경에서 사용되며, 주요 기능을 수행하고 유지보수가 이루어집니다.
• 유지보수 (Maintenance): 필요한 경우 개체를 업데이트하고 고치며, 성능을 최적화하고 문제를 해결합니다.
• 소멸 (Decommissioning): 개체가 더 이상 사용되지 않거나 대체될 때 종료되는 단계로, 데이터의 삭제 또는 저장이 이루어질 수 있습니다.

라이프사이클 관리는 제품 개발, 프로젝트 관리, 시스템 운영, 유지보수, 제품 수명 주기 평가 등 다양한 분야에서 중요한 역할을 합니다. 이를 통해 개체나 시스템이 효율적으로 관리되며, 변경사항이나 문제를 식별하고 처리할 수 있습니다.