웹 서비스

dev.dave·2023년 7월 24일

개발지식

목록 보기
4/53

웹서비스

pwd
웹 기본 경로
현재 위치한 경로를 확인하는 명령어

요 경로에 파일을 올리면,
그 웹서버에 들어가서,
그 파일을 받아올 수 있습니다.

--

웹 서비스는,
파일을 주고 받는다는 개념임.

즉,
클라이언트가 어떠한 파일을 요청한다.
서버는 그 파일을 준다.

이게 기본 개념임.

--

예를들어,
test.php 파일을 만들고,
test 파일을 주세요 한다치면,
그런 어떤 약속이 있다.

그 약속을
HTTP 프로토콜 이라고 합니다.
*프로토콜 : 데이터 교환 방식을 정의하는 규칙(약속)

요청방법이 있다.

http://[IP주소]/파일경로

예를들어,
IP주소가
192.168.50.154
라고 하면,

http://192.168.50.154/test
라고 적으면 됨.

만약,
jpg 그림 파일을 받고싶으면,
서버에 올린다음,

http://192.168.50.154/그림파일.jpg

하면
사진이 뜹니다.
즉, 사진 파일도 주고 받을 수 있다.

즉,
글자 뿐만 아니라,
다양한 유형의 파일을 주고 받는다.

그게 웹 서버 입니다.
간단한 웹서버의 개념이고,

더 자세히 설명하자면,

대학 교수가,
웹서버를 통해서,
학생들에게 성적표를 주고싶다면,

교수는
grade.html 이라는 파일을 만들었습니다.

내용은,

학생 성적표

학생이름 : 김철수

수학 : 100점

영어 : 100점

이런식의 내용이 든 html 파일입니다.

자,
이거 올렸으면,
학생이 이 파일 성적표 받아갈려면 어떻게 해야되요?

http://192.168.50.154/grade.html
이 주소인데,

교수가 이 링크를 학생한테 주면,
학생은 여기 엔터 딱처서 받으면 된다.

일단 이렇게 돌아 간다.

클럽맨 피노드 성분
자 디테일 하게 들어가자면,

학생이 100명이면,

일일이,
html 파일을 100개 만들어서 보내야되는데,
자,
10000명이면?
10000개 만들면,
서버 용량이 부족합니다.

그래서,
점수 부분만 바꿔서
보내주면 좋겠죠.

그게 동적 페이지 라고 하는거다.

http://192.168.50.154/grade.html
요 주소로 들어가는데,
내용은,

학생 성적표

학생이름 :

수학 :

영어 :

이런식으로,

서버에서 실행할 코드를 작성합니다. 서버에서 실행하는 코드 입니다.

그러면,
어떻게 보내냐면,

http://192.168.50.154/grade.php?name=normaltic&math=100&eng=100
이런식으로 주소가 되어진다.

해석하자면,

192.168.50.154
요부분은 서버의, 아이피 주소고,

grade.php
요거는 요청하는 파일의 이름이다.
즉, grade.php 파일을 주세요 라고 말하는거고,

?물음표는,
구분자 입니다.
항목을 구분하는 역할을 하는거고,

그럼 구분자 뒷부분은 무엇이냐면,
name=김철수&math=100&eng=100

파라미터 부분이다.
즉,
서버한테 전달을 할떄,
데이터를 보낼꺼에요,
형식은,
name = 김철수
math = 100
eng = 100
이렇게 이런 형식으로 보냅니다.
라는거다.
파라미터로
즉,
김철수를 name이라는 상자 안에 넣을꼐,
이런뜻이다.
100이라는 숫자는 math에다 넣을꼐,
100을 eng에 넣을꼐
입니다.

왜 이렇게 상자에 넣어서 보내냐?

아까 위에 소스코드 보면,

echo 는 문자열을 출력해라는 문법이고,

name이라는 상자를 가져와서 출력하라는 명령어 문법입니다.

이렇기 때매,
파라미터로
김철수
100 이런
문자열 데이터를 보내면,
문법에 따라
서버딴에서 미리,
처리되어
적용되서

화면에 렌더링되는거다.


정리하자면,

아까는 막 페이지 10000개 만들어야 하는 문제가 있었는데,

이런 방식은,
grade.php 파일 하나 만들고,
파라미터만 바꿔서,
서버에다가 파라미터로 전송시키면
서버에서 뚝닥해서 페이지를 보낸다.


좀더 나아가자면,
DB에서 데이터를 가져와서,
실어 보내는 식으로

즉,
서버 단에서
디비에서 데이터 꺼내와서
클라이언트에 뿌리는 식으로 해도된다.

동적으로 (파라미터 이용해서...페이지 하나로 ,,,)
이렇게 만들어도됨

정적페이지는 1000개 10000개 일일히 다 만들어야했다면, 불가능...


네이버 사이트를 보면,
https://www.naver.com/
이런데,

약속된 프로토콜 방식으로 되어있고,

http://[IP주소]/파일경로
https://www.naver.com/

이렇게,
보면,
www.naver.com
이 부분은 지금 ip주소로는 안되어 있는 이유는,
ip주소 대신,
DNS 를 즉, 도메인을 써서 그런거다.
DNS : ip주소를 도메인으로 바꿔준다.

그리고,
http://[IP주소]/파일경로

https://www.naver.com/ 이 뒤에 파일경로가 안보이는데,
이유는,
index.html 을 요청하는거랑 같기떄문에,
저렇게 해논거다.
즉,

https://www.naver.com/

https://www.naver.com/index.html

이나, 똑같다는 것임.

즉,
index.html 을 주세요 라고 요청을 한것이다.
생략하고,
https://www.naver.com/
만 해도 된다.


더 나아가서,

네이버 검색창에
nomaltic 이라고 검색을 하면,
https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=nomaltic
이런 주소가 보이는데,

이게 요청을 보낸 내용인데,
보시면,

nomaltic 이라고 검색창에 치고 엔터를 누르면
https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=nomaltic
요 요청이 서버로 간거고,

보시면,

https://search.naver.com/search.naver

https://search.naver.com
이라는 웹서버 에다가,

search.naver
이라는 파일 주세요.

그리고

? 물음표 뒤에 나오는 파라미터 부분 보면,

where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=nomaltic

query=nomaltic
뒤에 요부분만 보면,
nomaltic이라는 분자열을 query에 넣어서 보낸거다.

그럼,
웹서버는
search.naver 라는 파일 안에,
(서버에 코드로 작성을 해놨겠죠,)

query 상자를 가져와서,
데이터베이스를 조회한뒤,
거기에있는 데이터 가져와서,
페이지를 만든후
클라이언트에 전달한다.
그럼 렌더링이 되고,
끝이다.

어느페이지를 가든,
어떤 사이트를 가던,
이 원리는 똑같다.


하나만,더 설명을 드리자면,
html 코드는,
클라이언트 측으로 전달이 되는데,

요 부분은 서버에서 실행이 된다고, 설명을 드렸는데,
즉, 저런 코드들을 서버 측 코드라고 합니다.
즉, 벤엔드 라고 합니다.

클라이언트 측 코드는 html css js 가 있죠.
프론트엔드이죠.

즉,

백엔드는 서버에서 실행되는 코드들을 만드는 작업이고,

프론트엔드는 클라이언트단에서 실행되는 코드를 만드는 작업입니다.

즉,
디비 DB 데이터 베이스 코드와 디비 서버가 존재를 하고,

백엔드 프로그램(코드) 과 백엔드 서버가 존재를 하고,

프론트엔드 프로그램과 (코드) 프론트엔드 서버가 존재를 하는것이다.

총 3개의 서버가 돌아간다고 보면된다.

뭐 옛날에는
프론트엔드 서버는 존재하지 않았고, 그냥 백엔드 서버에서 만들어서
브라우져로 전달해서, 렌더링 시키는 방법이 있었는데,

요즘은,
프론트엔드 서버에서
백엔드 서버랑 데이터를
처리를 하는 방식을 쓰고,

백엔드에서는
디비랑 주고받는 데이터를 다루고,

이렇게 연결, 연동이 된다 라고 보면된다.
그만큼
동적사이트를 만드는데 있어서,
처리할 데이터가 많아지다보니까,
백엔드 서버에서
만들어서 주면
화면이 깜박이고,
실시간 렌더링 의 한계가 있으므로,

그런 실시간 데이터 처리를
프론트엔드 서버를 둬서,
백엔드랑 연결시켜
좀더 부드럽게 처리를 하는 방식으로,
하는것이다.

profile
🔥개인 메모 / 다른블로그 자료 참조 / 다른블로그 자료 퍼옴 (출처표기) /여기저기서 공부 했던 내용 개인메모 & 참고 / 개인 기록 용도 블로그 입니다.🔥

0개의 댓글