Achievement Goal
- 서버의 종류와 역할에 대해서 이해합니다.
- 웹서버와 웹 애플리케이션 서버의 차이점을 이해합니다.
- 정적, 동적이라는 단어를 이해하고, 정적 웹 사이트와 동적 웹 사이트의 차이점을 학습합니다.
- nginx를 통해 정적 웹 사이트, 정적 콘텐츠를 이해합니다.
- nginx를 이용해 정적 웹사이트를 제공하고, Mini WAS를 개발하면서 위의 그림에서 2와 5번에 해당하는 구조를 이해합니다.
- express, fastify를 통해 API 서버를 만들면서 WAS의 구조와 해당 서버에 대한 모듈을 이해합니다.
- 웹 서버와 WAS의 전체적인 구조를 이해하고, 기본적인 CRUD가 있는 블로그 서버를 개발하며, 전체 아키텍처를 이해합니다.
- 서버에 대해서 학습하고 직접 서버 개발
- JS사용해서 서버코드 작성
- WAS만드는 연습
- 코드를 통해 스프린드와 Hands-on에서 사용되는 서버의 구조, 모듈을 이해하고 파악하는 것이 가장 중요
웹 서버
서버(Server)?
- 서버라는 용어 = 어떤 컴퓨터의 역할
- 어떤 컴퓨터 한 대가 요청을 이해하고, 처리하여 요청에 맞는 내용을 응답으로 전달하는 역할을 한다고 해서
serve + er라는 명칭 - 하드웨어적인 부분: 정적 파일들이 제공되거나, 서버 애플리케이션이 실행되는 컴퓨터를 말함
- 소프트웨어적인 부분: 정적 파일을 제공하거나, 서비스를 제공하는 애플리케이션 그 자체를 의미
- 사용자의 요청을 받고, 이에 따른 응답과 데이터를 보내주는 역할을 수행함
- 서비스를 제공하는 컴퓨터 내의 프로그램을 의미함
-이러한 프로그램(소프트웨어)이 실행되는 컴퓨터(하드웨어) 역시 서버라고 불림
서버의 종류
웹 서버(Web Server)
- 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 그대로 반환하는 서버
- 웹 페이지는 그림, CSS, JS를 포함(정적 파일)
- 정적 파일들을 그대로 전달하는 역할을 하기 때문에 '정적 웹 서버(Static Web Server)' 라고 부르기도 함
웹 애플리케이션 서버(Web Application Server)
- 웹 서버와 같이 웹 페이지를 전달하는 역할을 하기도 함
- WAS의 핵심 역할은 웹 페이지를 구성하는 동적인 컨텐츠를 생성하거나 업데이트 하는 비즈니스 로직을 수행할 수 있게 함
- 서버 측 비즈니스 로직에 클라이언트가 접근할 수 있도록 방법을 제공하는 것
- ① 웹 페이지를 구성하는 동적인 요소를 생성하는 서버 사이드 코드가 구동될 수 있는 프로그래밍 언어적 런타임 혹은 소프트웨어 엔진을 제공
- ② 웹 애플리케이션 서버의 클라이언트는 애플리케이션 그 자체가 될 수도 있고, 웹 서버나 다른 웹 애플리케이션 서버, 데이터베이스 서버가 될 수도 있음(웹 애플리케이션 서버를 사용하면 경우에 따라 다양한 형태의 아키텍처 생성 될 수 있음)
- 데이터를 동적으로 처리해서 제공하기 위해 만들어진 서버
- 동적으로 처리하기 위해 DB조회, 트랜잭션 관리, 비즈니스 로직 처리 등의 기능을 요구
- 사용자의 요청에 의해 다르게 보일 수 있는 웹사이트의 인터랙티브 부분을 처리
데이터베이스 서버
- 사용자가 데이터베이스에 연결할 수 있도록 해줌
- 사용자 정보, 사진, 동영상 등 정보를 담고 있는 서버
- MySQL, MongoDB, Oracle 등이 있음
프록시 서버
- 클라이언트(리소스 요청)와 서버(리소스 전달) 사이에 중계 역할을 하는 서버
- 위치에 따라 포워드 프록시, 리버스 프록시로 나뉨
- 기능으로는 보안, 캐시 로드밸런싱 등이 있음
정적 웹사이트와 동적 웹사이트
- 현대의 2-tier Architecture에서는 정적 웹사이트의 사용이 더욱 보편적
- 정적 웹사이트: HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)
- 동적 웹사이트: 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)
웹사이트 렌더링 방식의 변천
- 브라우저의 발달과 ATAX 기술이 보편화되면서, 동적인 정보들을 서버가 부담할 필요 없게 됨. 필요한 부분만 클라이언트가 요청, 서버의 부하가 줄어듦
- JSON과 같은 순수한 데이터 포맷만 제공해주는 형태로 흐름이 바뀌기 시작함(Single Page Application으로 변모)
빌드
- 프로그램의 소스 코드를 독립적인 아티팩트로 변환하는 과정
- 때로는 아티팩트 자체로도 실행 가능, 대체로 런타임이 필요한 경우가 많음
프레임워크
- 소프트웨어 개발을 쉽게 만들어주기 위해 필요한 도구, 규약의 집합체
- 프레임워크를 통해 만들고자 하는 소프트웨어의 기본 골격이 제공(소프트웨어 개발에서는 많은 부분 의존)
- 백엔드 웹 애플리케이션 개발용 프레임워크
- 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 생태계
- node.js 개발 환경 준비
- 프로젝트 폴더로 이동
- package.json 파일이 있는지 확인
- 의존성 (dependency) 설치
- npm install 명령 입력
- 빌드
- npm run build 명령 입력
- 빌드 결과물 확인
- build 폴더 확인
- React는 프론트엔드 웹 애플리케이션이므로 결과물로는 HTML, CSS, JS 파일을 포함
- 이후 이 파일들을 nginx 등에서 정적 호스팅할 수 있음
- create-react-app 또는 next.js 와 같은 프레임워크를 사용
- 각 프로젝트에서 사용하는 package.json 파일이 어떻게 구성되어 있느냐에 따라 달라질 수 있음
- 애플리케이션 실행
npm run start - 애플리케이션 테스트
npm run test
Java/Kotlin 기반의 Spring Boot 생태계 (Gradle)
- 자바 개발 환경(JDK, OpenJDK가 대표적) 준비
- gradle 설치
- 프로젝트 폴더로 이동
- 빌드
- gradlew build 명령 입력
- 자바 애플리케이션은 실행을 위해서 빌드가 필수
- 애플리케이션 실행
gradlew bootRun - radle에서 사용할 수 있는 다양한 태스크를 확인
gradle tasks
빌드가 필요없는 경우
- node.js 앱이나 Python과 같이 소스 코드 그대로 런타임을 실행할 수 있는 경우(다른 변환 작업이 필요없는 경우)
1. nginx 설치 >
2. 정적 콘텐츠 호스팅하기
nginx.conf 파일 구조
sudo find / -name nginx.conf
뭐지.. 유아클레스에는 6디렉 18파일 뜨는데.... 이상..하다..?ㅋㅋㅋ
conf.d/default.conf
원본 : listen 80; / root /usr/share/nginx/html;
http://localhost 접속 >
Hands-On) conf 파일에 Server 블록 작성
새로운 웹 페이지 확인
한주 마무리! 이제는 수업을 하면 40%? 60% ??? 이정도는 알아듣기 시작했다.
드디어 뭔가 발전이 있는 것 같다. 근디 아직도 코딩해야하는 과제나 문제가 있으면 어디에서 어떤 코드를 사용해야하는지
아직도 모르겠음 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 부족해 더더더더더더더더더더더더!!!!!!!!!!!!!!!!!! 파이팅이다
https://www.notion.so/a67850905fb843fc9cdcdb173f888338