[20231215 TIL] - Web의 동작 방식과 Compile/Build/Deploy에 대해

Haizel·2023년 12월 15일
1
post-thumbnail

오늘은 HTML/CSS 기초를 마치고 호스팅&배포, Git&GitHub에 대해 공부하였다. 아무래도 한번 배웠던 내용이다보니 빠르게 학습하여 관련된 내용에 대해 추가적으로 알아보는 시간을 가졌다.

그럼 오늘도 TIL 시작 !!!!!

✍️ Today I Learned.


01. 웹(Web)의 동작 방식

웹은 클라이언트 컴퓨터와 서버 컴퓨터를 통해 동작한다.

사용자가 웹사이트에 접속할 때, 브라우저(클라이언트)에게 URL을 입력하면, 클라이언트는 서버에게 요청을 전달한다.

그 후 서버는 사이트를 표시하는데 필요한 파일과 웹 코드를 클라이언트에게 전달하면, 클라이언트는 이를 화면에 출력해 최종적으로 유저는 접속한 화면을 보게 된다.

이때, 콘텐츠 및 파일(웹 코드 및 이미지 등)을 포함한 웹 사이트가 인터넷에 전달되는 프로세스를 웹 호스팅이라고 한다.


02. 호스팅(Hosting)

✴︎ 호스팅과 웹 호스팅

호스팅이란 서버의 전체 혹은 일부를 이용할 수 있도록 임대하는 서비스를 말한다.

웹 호스팅이란 웹사이트의 파일, 요소 및 콘텐츠를 저장하여 인터넷 브라우저에 전달하는 작업을 말한다.

사용자가 브라우저에 도메인을 입력하면 일련의 특정 IP 번호 (또는 웹사이트의 IP 주소)로 변환되어 호스팅되는 서버로 연결된다.

그 후, 사용자 요청에 따라 서버는 웹사이트의 콘텐츠를 전달하여 최종적으로 사용자가 웹 사이트를 볼 수 있게 되는 것이다.

→ 즉 웹 호스팅이란 네트워크를 통해 정보와 데이터를 제공하는 역할의 물리적인 컴퓨터라고 할 수 있다.

✴︎ 웹 호스팅 서비스의 조건

웹사이트가 호스팅되는 방식과 위치적인 요소는 전체적인 성능에 영향을 미친다. 따라서 선택한 웹 호스팅 서비스가 안전하고 신뢰할 수 있어야 하며, 철저한 보안 시스템을 갖추었는지 확인해야 한다.


03. 호스팅의 종류

✴︎ 웹 호스팅

웹 호스팅은 업체의 서버 중에서 일부만 임대하여 사용하는 방식이다.

🙂 Strength

  • 서버 인프라를 따로 구축할 필요가 없이, 이미 구축되어 있는 서버의 일부만 임대하기 때문에 비용이 저렴하다.

🙁 weakness

  • 필요에 맞게 변형하거나 다영하게 사용자화하기 어렵다.
  • 서버의 일부만 임대하기 때문에 대역폭이나 컴퓨터 파워의 사용이 제한되어 대규모 웹사이트의 호스팅엔 적합하지 않다.

❓ 언제 좋은가

  • 서버를 관리할 수 있는 인력이 적거나 트래픽이 적은 웹 사이트를 운영할 때
  • 즉 소규모의 웹사이트를 운영할 때

👀 예시

  • 작은 커뮤니티
  • 블로그 운영

✴︎ 서버 호스팅

서버 호스팅은 서버를 통쨰로 임대하여 사용하는 방식이다. 보편적으로 서버와 서버를 관리하는 기술력까지 제공한다.

🙂 Strength

  • 서버를 모두 임대하여 사용하는 방식으로, 보안성이 뛰어나다.

🙁 weakness

  • 서버를 모두 임대하기 때문에 더 많은 비용이 발생하고, 관리할 수 있는 인력도 필수적으로 필요하다.

❓ 언제 좋은가

  • 보안에 민감한 기업의 인트라넷이나 DB 구축에 유리하다.
  • 비용적인 측면을 감수하더라도, 안정성과 효율성을 추구하는 경우

👀 예시

  • 쇼핑몰 웹사이트 운영
  • 기업 데이터베이스 관리

✴︎ 클라우드 호스팅

클라우드 호스팅은 물리적인 서버를 빌리는 것이 아닌, 이미 구축된 서버의 가상 서버를 임대하여 사용하는 방식으로, Amazon Web Services와 Azure가 대표적인 클라우드 호스팅 업체이다.

🙂 Strength

  • 가상서버이기 때문에 얼마든지 원하는 대로 비용만 지불하면 확장이 가능하다.

🙁 weakness

  • 사용한 만큼 과금되는 구조로, 다른 호스팅 옵션에 비해 비용이 많이 발생할 수 있다.
  • 저장소를 FE/BE 따로 관리하는 경우가 많은 클라우드 특성 상 → 하나의 프로그램에 문제가 생기면 다른 프로그램에도 문제가 생길 수 있다.

❓ 언제 좋은가

  • 빠르게 성장하는 스타트업과 같이, 회사에 성장에 따라 서버 확장이 필요할 때
  • 빠른 대규모의 서버가 필요한 경우와 같이, 속도가 중요한 환경일 때
  • 이용자의 접속이 유연하고, 트래픽의 증감폭이 큰 경우

👀 예시

  • 게임이나 단발성 이벤트

04. 컴파일과 빌드, 그리고 배포

✴︎ 컴파일(Compile)

컴퓨터가 이해할 수 있는 언어로 바꾸는 과정

보통 Java, C#, Swift와 같은 고급 언어로 작성된 코드를 → 기계어로 변환하는 과정을 말한다. 대표적인 자바스크립트의 컴파일러(트렌스파일러)로는 바벨이 있는데, 이는 별도 포스팅을 통해 다루기로 하자.

👉 자바스크립트와 바벨을 둘러싼 논란


✴︎ 빌드(Build)

컴파일된 코드를 실행할 수 있는 상태로 만드는 것

실제로 JavaScript로 작성된 프로젝트의 빌드 파일을 보면 아래 이미지와 같이 직렬화 되어 있다는 것을 알 수 있다.

이미지 출처 : choi-ju12g

✴︎ 배포(Deploy)

빌드가 완성되면 사용자가 접근할 수 있는 환경에 배치시키는 것


05. CI/CD

배포와 함께 따라다니는 검색어가 있는데, 바로 CI/CD이다. CI/CD가 무엇인지 알아보자.

✴︎ 지속적인 통합(CI, Continuous Integration)

개발자를 위한 자동화 프로세스로, [Code - Build - Test]의 각 단계를 지속적으로 통합하는 작업을 말한다.

  1. Code : 개발자가 코드를 원격 코드 저장소(Github)에 push하는 단계
  2. Build : Github의 코드를 가져와 유닛 테스트 후 빌드하는 단계
  3. Test : 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는지 테스트 코드를 통해 확인하는 과정

→ 이 3과정이 지속적으로 작동하도록 자동화하는 것을 CI라고 한다.


✴︎ 지속적 배포 / 지속적 서비스 배포(CD, Continuous Deployment)

배포 자동화 과정을 의미하며, [Release - Deploy - Operate]의 각 단계에 해당한다.

  1. Release : 배포 가능한 소프트웨어 패키지를 작성
  2. Deploy : 서비스를 사용자에게 배포하는 단계
  3. Operate : 서비스 현황을 파악하고 생길 수 있는 문제를 감지하는 단계

✴︎ CI/CD(Continuous Integration/Continuous Delivery)

CI/CD는 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포를 의미한다.

최근에는 클라우드의 기술 발전과 + 지속적인 통합/지속적인 배포가 빠른 속도로 진행되면서, CI/CD를 묶어 하나의 개념으로 다루고 있다.

CI/CD를 쉽게 말하면, 애플리케이션의 개발 단계를 자동화하여 애플리케이션을 더욱 짧은 주기로 고객에게 제공하는 방법을 말한다.

→ 즉 CI/CD === 개발+지속적인 자동화/모니터링인 셈이다.


06. Git과 GitHub

✴︎ Git

코드 버전 관리 시스템

  • 프로젝트 관리를 위한 훌륭한 로컬도구로, 웹 개발 프로젝트의 다양한 코드 버전을 제어
  • 리포지토리를 생성

✴︎ GitHub

Git으로 관리하는 프로젝트를 관리할 수 있는 웹 호스팅 서비스

  • git으로 관리한 프로젝트를 클라우드로 보내는 역할


🎈 Today I Felt.


  1. 드디어 금요일 ❗️❗️❗️❗️❗️❗️❗️❗️❗️

  2. 오늘 정리를 빨리 시작한 덕에 정규시간 내에 마칠 수 있었다. 앞으로 이정도만 하면 딱 좋겠다 ✌️

  3. 햅삐 홀리데이 ❗️❗️❗️❗️❗️❗️❗️❗️❗️



❈ 참고자료

profile
한입 크기로 베어먹는 개발지식 🍰

0개의 댓글

관련 채용 정보