php 생활코딩 강의 - 1

따라하면서 배우는 웹애플리케이션 만들기

1. 오리엔테이션, 준비단계

1.1 웹 어플리케이션을 만드는 순서
smart small로 시작하는 게 좋다.

1.2 구상
생활코딩 블로그를 만들면서 정렬 방식에 대한 문제가 있었음.
학습은 순서가 중요하니까.
이 부분을 직접 구현해보려고 함

1.3 기획
UI 모델링
UI? 사용자가 시스템을 제어하는 조작장치..
모델링? 직접 만들기 전에 가상으로 만들어보는 것..
UI 모델링 = 사용자의 입장에서 동작하는 기능을 가상으로 만들어 보기.

 

1.4 인터넷과 웹의 역사
인터넷과 웹은 다른 말이다.
이들의 관계를 벤다이어그램으로 그려보면 다음과 같다.

인터넷 안에서 돌아가는 여러 기술 중에 웹이 워낙 중요하고 성공한 서비스이기 때문에
인터넷과 웹을 동의어처럼 사용하게 된 것.
하지만 우리는 웹 개발자이기 때문에 웹과 인터넷을 구분할 수 있어야 함

인터넷이란,
전세계에 있는 컴퓨터들이 이 네트워크를 통해 연결돼서 데이터를 주고 받을 수 있는 전세계에서 가장 거대한 네트워크.

웹이란,
이 전세계에 깔려있는 네트워크를 활용해서 HTML이라는 프로그램 언어로 만들어진 웹 페이지를 컴퓨터와 컴퓨터가 주고 받을 수 있도록 고안된 서비스
비유하자면, 도로와 도로 위를 달리는 대중교통시스템

팀버너스리라는 사람이 연구자들간에 효율적으로 데이터를 주고 받는 방법을 고안하다가 웹이라는 것을 만들게 됨
컴퓨터 간에 정보를 주고 받기 위해서 웹 브라우저라는 프로그램을 개발함
웹 브라우저의 카운터 파트너로서, 정보를 제공하는 컴퓨터에 설치되어 있는 웹 서버라는 소프트웨어를 개발함
이렇게 만들어진 2개의 소프트웨어가 각자 데이터를 주고 받으면서 이 정보를 주고 받을 수가 있게 된 것
이 과정에서 사용되는 통신 규약인 HTTP를 개발함
그리고 실제로 웹 페이지의 정보를 담고 있는 언어인 HTML이라는 언어를 고안하게 됨

이것이 웹의 가장 원시적인 모습이지만
현재의 웹은 훨씬 더 많은 사람들이 사용하면서 역할이 커졌고 훨씬 더 복잡해졌다.
우리는 이렇게 복잡해진 웹을 공부해야 하는 입장이지만
우선 이런 기본적인 웹 브라우저와 웹 서버간 HTML이라는 웹 페이지를 만드는 언어가 구성되고 있다는 것을 이해해야 함 
여기에서 이제 css, javascript, php, mysql 같이 웹 브라우저, 웹 서버, HTML이 일을 더 잘 할 수 있도록 도와주는 일종의 도우미 기술이라고 할 수 있다.

 

1.5 서버와 클라이언트
웹은 서버와 클라이언트라는 체계 안에서 동작하는 것이기 때문에 서버와 클라이언트에 대해 아는 것이 아주 중요하다.

2대의 컴퓨터 중 데이터를 요청하는 쪽을 클라이언트, 
요청 받은 데이터를 찾아서 응답해주는 쪽을 서버라고 한다.

그럼 우리도 2대의 컴퓨터가 필요하느냐?
공부하는 입장이니까 1대의 컴퓨터에 웹 브라우저와 웹 서버를 둘다 설치하면 됨
그러면 웹 브라우저와 웹 서버가 1대의 컴퓨터에서 통신을 하게 된다

웹 서버를 컴퓨터에 설치해야 함
웹 서버는 Apache, Nginx, IIS 등이 있다.

출시이후 점유율 1위를 놓친 적이 없는 아파치 서버를 설치하려고 하는데,
아파치 서버를 설치하는 것은 조금 까다롭다.
그리고 mysql이라는 데이터베이스와 php라는 서버사이드 언어도 필요한데
이렇게 서버쪽 소프트웨어들은 설치의 편의성이 나쁘다.
그래서 bitnami라는 것을 이용해서 복잡한 서버 소프트웨어를 한 번에 설치해보려고 함.
비트나미는 각각의 운영체제마다 다른 버전을 사용해서 설치해야 하는데,
나는 윈도우니까 WAMP를 선택해서 설치하면 된다.

 

1.6 윈도우에 웹서버 설치

영상을 따라서 순서대로 설치하면 됨설치가 완료되고 브라우저에 localhost/index.html을 입력하면 다음과 같은 창이 뜰거임
비트나미가 잘 설치되었고, 웹서버가 잘 동작하고 있다는 뜻.

현재 내 컴퓨터에 웹브라우저와 웹서버가 동시에 설치되어 있는 상황이다.
이 상태에서 웹브라우저에 localhost/index.html 이라고 입력하는 것은 뭘까?

웹 브라우저는 localhost라는 웹서버를 찾아서 index.html을 달라고 요청함.

localhost는 이 웹브라우저가 설치되어있는 컴퓨터를 의미함
웹브라우저가 설치된 컴퓨터에는 곧 웹서버가 설치되어있는 상태.
그래서 localhost라는 것은 웹브라우저가 설치되어 있는 컴퓨터의 웹서버를 가리키는 주소.

웹브라우저가 웹서버에게 index.html 파일을 요청하면 웹서버는 이 컴퓨터에 있는 디렉토리 중에 htdocs라는 document root에 있는 index.html 파일을 읽어서 웹브라우저에게 응답한다.
그러면 웹브라우저는 받은 index.html을 해석(파싱)해서 화면에 표시해주는 것.
이러한 과정을 통해서 웹페이지가 웹브라우저에 표시되는 것.

실제로는 별도의 서버 컴퓨터를 두고 웹서비스를 만든다.

 

1.9 서버 제어
Apache, PHP, MySQL을 제어하는 방법

아까 설치한 Bitnami 폴더에 가서 manager-windows라는 파일을 열자.
Manage Servers 탭에서 Apache Web Server와 MySQL Database가 잘 실행되고 있어야 함.

+) 근데 나는 왜 MySQL이 아니라 Maria DB가 있는지 검색해보니,

Maria DB란 MySQL의 발전된 형태의 대체제이고 MariaDB 는 현재까지 최신의 MaySQL 과 같은 브랜치로부터 릴리즈되며, 대개의 경우 MySQL과 마찬가지로 동작한다. MySQL의 모든 명령어, 인터페이스, 라이브러리와 API 가 MariaDB 에도 존재한다. 또한 MariaDB 로 데이터베이스를 변환할 필요도 없다. 즉, MariaDB 는 사실상 MySQL 의 완벽한 대체제라고 말할 수 있다! 게다가, MariaDB 는 많은 보다 훌륭한 새로운 기능들을 갖고 있다.
출처: https://mariadb.com/kb/ko/mariadb-korean-mariadb/

그렇다고 한다.
만약 한 컴퓨터 내에서 Maria DB와 MySQL을 따로 사용하고 싶다면 포트 번호를 다르게 지정하면 된다고 한다.
MySQL은 3306 포트를 사용함
출처: https://joalog.tistory.com/52

 

+) 윈도우에서 Apache2 + PHP + MariaDB 조합으로 웹서버를 쉽게 구축할 수 있게 도와주는 WampServer 설치 방법
https://webnautes.tistory.com/1206

Windows 10에서 웹 개발 환경 만들기 ( WampServer : MariaDB, PHP, MySQL, PhpMyAdmin )

 

 

다시 강의로 돌아가서, 
어쨌든 WebServer나 DataBase를 선택하고 Configure를 클릭하면
포트번호, 오픈로그 등을 선택할 수 있다.
open log를 선택하면 이 소프트웨어에서 일어나는 모든 일들을 로그로 확인할 수 있다.

 

1.10 프로그래밍 언어
언어: 사람과 사람 사이의 약속
프로그래밍 언어: 사람과 컴퓨터 사이의 약속