*공부한 내용을 토대로 혼자서 정리하는 글입니다.
틀린 부분이나 보충할 부분 지적 언제든 환영합니다 :)
- 기본적으로 어떤 컴퓨터의 역할을 의미
- 하드웨어와 소프트웨어, 이렇게 2가지 측면에서 살펴볼 수 있음
- 하드웨어 : 정적 파일들이 제공되거나, 서버 애플리케이션이 실행되는 컴퓨터를 의미
- 소프트웨어 : 정적 파일을 제공하거나, 서비스를 제공하는 애플리케이션 그 자체를 의미
- 정적 웹 서버(Static Web Server)
- 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 있는 그대로 반환하는 서버
- 그림, CSS, JS 같은 정적 파일들을 브라우저에 그대로 전달하는 역할을 함
- ex ) nginx, Apache Web Server 등
- 동적인 컨텐츠를 생성하거나 업데이트 하는 비즈니스 로직 을 수행
- 웹 페이지를 구성하는 동적인 요소를 생성하는 서버 사이드 코드가 구동될 수 있는 프로그래밍 언어적 런타임 혹은 소프트웨어 엔진을 제공
- 웹 애플리케이션 서버의 클라이언트는 애플리케이션 그 자체가 될 수도 있고, 웹 서버나 다른 웹 애플리케이션 서버, 데이터베이스 서버가 될 수도 있
- 데이터베이스는 사용자 정보나 사진, 동영상 등에 대한 정보를 담고 있는 서버
- 사용자가 데이터베이스에 연결할 수 있도록 해줌
- ex ) MySQL, MongoDB, Oracle 등
- 리소스를 요청하는 클라이언트와 응답으로 리소스를 전달하는 서버 사이에 중계 역할을 하는 서버
- 위치에 따라 포워드 프록시와 리버스 프록시로 나뉨
- 기능 : 보안, 캐시, 로드밸런싱 등
- 정적 파일(static files)을 받고, 이에 대한 요청을 이행하는 서버
- 웹서버는 보통 HTTP 요청과 응답만을 처리하고, 다음과 같은 아키텍처로 이루어져 있음
- 데이터를 동적으로 처리해서 제공하기 위해 만들어진 서버
- DB 조회, 여러 개의 트랜잭션 관리, 비지니스 로직 처리 등의 기능이 요구됨
- 사용자의 요청에 의해 다르게 보일 수 있는 웹사이트의 인터랙티브 부분을 처리
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)
React 프레임워크를 사용하는 경우 create-react-app 또는 next.js 와 같은 프레임워크를 사용
빌드 과정
- node.js 개발 환경 준비
- 프로젝트 폴더로 이동
-package.json
파일이 있는지 확인합니다- 의존성 (dependency) 설치
-npm install
명령 입력- 빌드
-npm run build
명령 입력- 빌드 결과물 확인
-build
폴더 확인
- React는 프론트엔드 웹 애플리케이션이므로 결과물로는 HTML, CSS, JS 파일을 포함
- 이후 이 파일들을 nginx 등에서 정적 호스팅 함
- 의존성 설치 후 빌드하지 않고, 바로 애플리케이션을 실행하기 위해서는
npm run start
등의 명령어를 사용
nginx 실행 :
sudo service nginx start
nginx 중지 :
sudo systemctl nginx stop
orCtrl + C
nginx 리로드 :
sudo service nginx reload
nginx 상태 확인 :
sudo systemctl status nginx