생활코딩님의 영상을 참고하여 웹 사이트 구현을 할 예정이다.
이미 HTML, CSS, JS 를 이용하여 웹 사이트를 만든 경험이 있기 때문에 영상의 기본적인 문법과 웹 사이트 구현 PART 는 생략하고,
인터넷이 동작하는 기본 원리, 웹 서버 설치, 통신 등
알고는 있지만 구체적으로 정리하지 않은 내용을 정리하는 용도로 활용했다.
<인터넷이 동작하는 기본 원리>
우리가 노트북을 키고 네이버 웹 브라우저에 들어가서 네이버 웹툰을 클릭한다. (= 클라이언트의 요청)
이때 뜨는 네이버 웹툰의 화면을 웹 서버에서 제공한다. (= 서버의 응답)
서비스를 요청하는 쪽이 클라이언트, 서비스를 제공하는 쪽이 서버이다.
전제 조건은 인터넷이 연결되어 있는 상태이다.
이 위대한 행위를 가능하게 만드는 방법은 2가지이다.
1. 서버의 일을 대행해주는 업체에 맡기는, 웹 호스팅
2. 실제 내가 서버를 설치하고 관리하는, 웹 서버
나는 이전에 사이트 구현을 했을 때 닷홈이라는 웹 호스팅을 이용해봤다.
따라서, 나는 2번 웹 서버를 설치하는 실습을 진행했다.
<웹 서버 운영하기 - Mac>
2022. 09. 26. 실습.
Mac OS 는 기본적으로 아팟치가 깔려있으나,
영상에서는 이를 이용하기보다는 MAMP Stack 을 이용하였다.
MAMP Stack 은 Mac, Apache, MySQL, PHP 를 뜻한다.
1. bitnami mamp stack 을 검색 후 사이트에서 최신 버전을 다운로드 받는다.
2. apache2/htdocs/index.html 파일이 http://127.0.0.1:8080/index.html 으로 열린다.
3. 결론적으로 외부에서 내가 만든 index.html 을 보이게 하려면 htdocs 폴더 아래에 만들어야 한다.
서버 관리 매니저를 키는 방법은,
맥의 오른쪽 위 스포트라이트에서 manager-osx 라고 검색한다.
<웹 브라우저와 웹 서버의 통신>
서로 다른 컴퓨터로 실습하는 게 중요함.
스마트폰으로 내 서버로 접속하는 실습을 진행함.
1. 필자의 Mac 환경설정에서 네트워크 - TCP/IP 를 통해 IPv4 주소를 확인함.
2. 이때, 현재 연결되어 있는 무선 네트워크가 스마트폰과 동일해야함.
3. 스마트폰을 켜서 http://IPv4:8080/index.html 로 접속함.
4. 접속 성공!
위와 같이,
이미 알고 있던 내용을 제외하고 전반적인 웹 개념에 대해 간단히 정리해봤다.
부록 영상에 댓글 기능 추가, 웹 사이트 방문자 분석기가 있어 과제 해결에 도움이 될까 싶어 시청했는데
알고보니 외부에서 가져다 쓰는 거라 별 도움이 되진 않았다.
실무에서는 직접 구현하는 것보다 외부에서 가져다 쓰는 경우가 많지만
지금은 내가 직접 구현하고 원리를 이해하는 것이 중요하므로
부록 영상들은 나중에 필요할 때 시청하면 좋을 것 같다.
'TeamH4C' 카테고리의 다른 글
| [빡공팟 5기] W4 : Mac OS 에서 Burp Suite 설치 및 기본 기능 이해 (0) | 2022.10.12 |
|---|---|
| [빡공팟 5기] W1 ~ W3 : 파이썬 기초 100제 중 5문제 블로깅 과제 (1) | 2022.10.10 |
| [빡공팟 5기] W1 ~ W3 : 웹 사이트 구현 완성 (0) | 2022.10.09 |
| [빡공팟 5기] W1 ~ W3 : 초기 화면 구성 및 DB 연결 (0) | 2022.10.04 |
| [빡공팟 5기] W1 ~ W3 : 웹 사이트 구현 초기 설정 (1) | 2022.09.30 |