2/25 정리

잼우·2022년 2월 27일
1

웹서비스

목록 보기
5/5

*공부한 내용을 토대로 혼자서 정리하는 글입니다.
틀린 부분이나 보충할 부분 지적 언제든 환영합니다 :)


서버

서버란?

  • 기본적으로 어떤 컴퓨터의 역할을 의미
  • 하드웨어와 소프트웨어, 이렇게 2가지 측면에서 살펴볼 수 있음
    - 하드웨어 : 정적 파일들이 제공되거나, 서버 애플리케이션이 실행되는 컴퓨터를 의미
    - 소프트웨어 : 정적 파일을 제공하거나, 서비스를 제공하는 애플리케이션 그 자체를 의미

서버의 종류

웹 서버(Web Server)

  • 정적 웹 서버(Static Web Server)
  • 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 있는 그대로 반환하는 서버
  • 그림, CSS, JS 같은 정적 파일들을 브라우저에 그대로 전달하는 역할을 함

- ex ) nginx, Apache Web Server 등

웹 애플리케이션 서버(Web Application Server)

  • 동적인 컨텐츠를 생성하거나 업데이트 하는 비즈니스 로직 을 수행
  • 웹 페이지를 구성하는 동적인 요소를 생성하는 서버 사이드 코드가 구동될 수 있는 프로그래밍 언어적 런타임 혹은 소프트웨어 엔진을 제공
  • 웹 애플리케이션 서버의 클라이언트는 애플리케이션 그 자체가 될 수도 있고, 웹 서버나 다른 웹 애플리케이션 서버, 데이터베이스 서버가 될 수도 있

데이터베이스 서버

  • 데이터베이스는 사용자 정보나 사진, 동영상 등에 대한 정보를 담고 있는 서버
  • 사용자가 데이터베이스에 연결할 수 있도록 해줌

- ex ) MySQL, MongoDB, Oracle 등

프록시 서버

  • 리소스를 요청하는 클라이언트와 응답으로 리소스를 전달하는 서버 사이에 중계 역할을 하는 서버
  • 위치에 따라 포워드 프록시와 리버스 프록시로 나뉨
  • 기능 : 보안, 캐시, 로드밸런싱 등

웹 서버 vs 웹 애플리케이션 서버

웹 서버(Web Server)

  • 정적 파일(static files)을 받고, 이에 대한 요청을 이행하는 서버
  • 웹서버는 보통 HTTP 요청과 응답만을 처리하고, 다음과 같은 아키텍처로 이루어져 있음

웹 애플리케이션 서버(Web Application Server)

  • 데이터를 동적으로 처리해서 제공하기 위해 만들어진 서버
  • DB 조회, 여러 개의 트랜잭션 관리, 비지니스 로직 처리 등의 기능이 요구됨
  • 사용자의 요청에 의해 다르게 보일 수 있는 웹사이트의 인터랙티브 부분을 처리

정적 웹사이트 vs. 동적 웹사이트

정적 웹사이트

HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)

동적 웹사이트

서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)


빌드와 언어별 빌드 도구

빌드

  • 프로그램의 소스 코드를 독립적인 아티팩트(artifact)로 변환하는 과정

프레임워크

  • 소프트웨어 개발을 쉽게 만들어주기 위해 필요한 도구, 규약의 집합체

백엔드 웹 애플리케이션 개발용 프레임워크

  • Spring (Java, Kotlin)
  • Django (Python)
  • Express (JavaScript)

프론트엔드 웹 애플리케이션 개발용 프레임워크

  • React 및 관련 라이브러리 (JavaScript)
  • Vue.js, Svelte (JavaScript)

모바일 및 데스크탑 애플리케이션 개발용 프레임워크

  • Flutter (Android, iOS 등)
  • .NET Framework (Windows)
  • Apple 운영체제 기본 Native 프레임워크 Cocoa (macOS), Cocoa Touch (iOS)
  • 안드로이드 기본 Native 프레임워크 (Android)

대표적인 빌드 도구

JavaScript 기반의 React 생태계

  • React 프레임워크를 사용하는 경우 create-react-app 또는 next.js 와 같은 프레임워크를 사용

  • 빌드 과정

  1. node.js 개발 환경 준비
  2. 프로젝트 폴더로 이동
    - package.json 파일이 있는지 확인합니다
  3. 의존성 (dependency) 설치
    - npm install 명령 입력
  4. 빌드
    - npm run build 명령 입력
  5. 빌드 결과물 확인
    - build 폴더 확인
    - React는 프론트엔드 웹 애플리케이션이므로 결과물로는 HTML, CSS, JS 파일을 포함
    - 이후 이 파일들을 nginx 등에서 정적 호스팅 함
  • 의존성 설치 후 빌드하지 않고, 바로 애플리케이션을 실행하기 위해서는 npm run start 등의 명령어를 사용

nginx

주요 명령어(Ubuntu)

  • nginx 실행 : sudo service nginx start

  • nginx 중지 : sudo systemctl nginx stop or Ctrl + C

  • nginx 리로드 : sudo service nginx reload

  • nginx 상태 확인 : sudo systemctl status nginx

profile
DevOps 새내기

0개의 댓글