서버시스템구축실습 (2) 웹서버와 데이터베이스 개요

끔벅이별 2024. 3. 19. 15:21

01. 프론트엔드 vs 백엔드

웹 개발의 분류에는 프론트엔드와 백엔드가 있다.

1. 프론트엔드

프론트엔드는 다른 말로 클라이언트 사이드로도 불린다. 사용자가 웹 브라우저에서 볼 수 있는 결과를 작성하는 코드를 개발하는 것을 의미한다. 웹 페이지가 로드될 때 사용자 경험을 애니메이션화 하는데 사용되는 Javascript도 포함된다.

2. 백엔드

백엔드는 다른 말로 서버 사이드로도 불린다. 애플리케이션 로직에 사용되는 코드를 개발하는 것을 의미한다. 즉, 눈에 보이지는 않지만 분명히 작동하고 있는 코드를 일컫는다. 한마디로 눈에 보이는 부분인 프론트엔드를 제외한 나머지 모두는 백엔드에서 개발한다.

*백엔드는 단순 프로그래밍 개발능력만을 요구하지 않고 전공자 지식을 필요로 하기 때문에 비전공자도 가능한 프론트엔드와 달리 난이도는 더 높지만 수요도 그만큼 더 높다.

02. 정적 웹 페이지 vs 동적 웹 페이지

1. 정적 웹 페이지 Static Web Page

서버에 미리 저장된 파일을 클라이언트에게 전달하는 웹 페이지이다. 사용자는 서버에 저장된 데이터가 변경되지 않으면 고정된 웹 페이지만 볼 수 있다. 과거의 웹 페이지 형태이며, 제공할 정보가 한정적이었기 때문에 정적 웹 페이지만으로 충분했다고 한다.

이때 훨씬 더 많은 웹 페이지가 요구된다면 어떻게 할까? 그 모든 웹 페이지를 전부 만들수는 없을 것이다. 또는 웹 페이지들이 서로 중복되는 부분이 많다면? 그때부터 사용되는 것이 동적 웹 페이지이다.

2. 동적 웹 페이지 Dynamic Web Page

서버에 있는 데이터를 가공한 후 생성되어 전달되는 웹 페이지이다. 이를 동적으로 생성된다고 말한다. 사용자는 상황, 시간, 요청에 따라 달라지는 웹 페이지를 보게 된다.

https://www.phpbb.com/community/viewtopic.php?f=14&t=2453376
https://www.phpbb.com/community/viewtopic.php?f=14&t=2453376

예를 들어, 위에서는 둘 다 viewtopic.php라는 똑같은 파일을 요청했지만 뒤에 있는 t의 값이 다르기 때문에 웹 브라우저에 표시되는 내용이 달라진다.

- 정적 웹 페이지는 클라이언트가 요청하면, 웹 서버가 받아서 미리 파일로 저장되어 있던 웹 페이지들 중 하나를 선택해 전송한다.

- 동적 웹 페이지는 클라이언트가 요청하면, 웹 서버가 받아서 로직을 처리하는 애플리케이션 서버에 필요한 정보를 요청한다. 애플리케이션 서버는 데이터베이스 서버를 참고하며 웹 페이지를 만들기 위해 필요한 정보를 모아 가공해서 웹 서버로 전달한다. 웹 서버는 웹 페이지를 다시 클라이언트에게 보내주는 전송의 역할만 한다.

03. URL 이해하기

URL의 구성은 다음과 같다.

http://openturorials.org:3000/main?id=HTML&page=12(1) 프로토콜 (2) 호스트(도메인 네임) (3) 포트 번호 (4) 경로 (5) 쿼리스트림 #해시(보이지 않음)

1. 프로토콜: 사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인지를 나타내는 부분이다. HTTP는 웹 브라우저와 웹 서버가 서로 데이터를 주고받기 위해 만든 통신 규칙이다.

* 프로토콜을 입력하지 않으면 사용하는 웹 브라우저의 기본 프로토콜로 입력된다. https는 http에 secure이 더해진 것이다.

2. 호스트(도메인 네임): 호스트는 인터넷에 접속된 각각의 컴퓨터를 의미하고, 도메인 네임은 인터넷의 실제 IP 주소와 연결된 기억하기 쉬운 이름이다.

* 즉 구분하기 위한 일종의 이름이다. 도메인으로 DNS 서비스를 이용해 대응하는 IP 주소를 얻는다. 호스트 자리에 IP 주소가 들어가도 기능한다.

3. 포트 번호: 한 대의 컴퓨터 안에 여러 서버 프로세스가 존재할 수 있다. 이때 클라이언트가 포트 번호를 명시하면, 해당 포트를 사용하고 있는 서버와 통신하게 된다.

* IP 주소가 원하는 서버로 가기 위한 주소라면, 포트 번호는 해당 서버에서 동작중인 여러개의 프로세스 중에서 원하는 포트를 지정해주는 번호이다. 웹 서버의 기본 포트 번호는 80이다. 즉, IP 주소와 통신하기 위해 필요하다.

4. 경로: 해당 컴퓨터 안에 있는 어떤 디렉토리에서 어떤 파일을 불러올 것인지를 가리킨다.

* 해당 웹 서버로 접근했을 때 '무엇을 요청하는지를' 알기 위한 주소이다. 다른 말로는 소스코드를 담고 있는 파일을 의미한다. 예를 들어 main.js 파일이라면 .js를 생략하는 식이다.

5. 쿼리 스트링: 이를 이용해 웹 서버에 데이터를 전달할 수 있다. 물음표?로 시작하며, 값과 값 사이를 &기호로 구분한다. 이름과 같은 값은 등호=로 구분한다. 예를 들어 ?id=HTML&page=12를 해석하면 원하는 정보는 HTML이며 12페이지라는 정보를 얻을 수 있다.

* 사용자가 요청한 것이 무엇인지를 url에 일부 담은 것이다.

- 쿼리 스트링을 활용한 앱 애플리케이션

http://localhost/?id=HTML
id값에 따라 사용자에게 적절한 콘텐츠를 보여준다. 웹 페이지에서 클릭하며 변경될 때마다 값이 변경되고 추가된다.

6. 해시: 웹 페이지의 위치를 표시한다. 해시는 HTTP 서버로 전달되지 않고 웹 브라우저로 전달된다. 웹 페이지를 서버로부터 전달받은 후 웹 브라우저가 해당 위치로 스크롤할 때 사용된다.

* 샵#을 사용한다. 보이지 않는다.