[개발협업을 위한 개발 상식] 웹의 발전과정 (1)

최초의 웹 페이지는 html 정적 페이지* 로 시작 되었다.

*정적 페이지: 동적 페이지의 반댓말로 페이지에 이미지 텍스트 등을 지정해 두고 
데이터의 변경에 따른 화면 변경이 이루어 지지 않는 페이지를 말한다.

 

HTML은 Hyper Text Markup Language의 약어로 마크업 언어라는 문법을 사용해 문서를 작성하면 지정된 포멧에 맞게 이를 화면에 포매팅 해주는 역할을 한다.

예를들어 한글(HWP) 파일도 이러한 마크업의 한 예인데, HTML과의 차이점은 글씨의 크기나 위치 마진 장평 등을 사용자가 UI 에디터(한글 프로그램)로 변경하면 한글에 맞는 형식으로 <xxxtag>안녕하세요</xxxtag> 저장이 되지만 HTML은 브라우저의 종류가 다양하고 윈도우 크기 등이 다양하고 또한 데이터가 동적으로 변화하면서 각종 이벤트(버튼 이벤트 등)를 적용해야 하기 때문에 가볍고 빠른 텍스트 위주의 수정 방식이 주를 이루게 되었다. (초창기에는 나모 웹 에디터 등의 UI 에디터를 제작하기 위한 노력이 있었으며 현재도 wix, webflow 등으로 웹 개발 난이도를 낮추는 작업이 계속 시도 중이다.)

기본적으로 HTML은 텍스트를 사용한 문서이기 때문에 메모장으로 편집이 가능하다. 하지만 자동완성이나 문서 자체의 탭 들여쓰기를 자동으로 해주는 포메팅등을 이유로 다양한 IDE(통합개발환경 프로그램)를 사용하며 대표적으로는 무료로 사용가능한 visual code 등이 존재한다. 

HTML 문서의 작성중에는 글씨로 된 태그들의 집합으로 보이지만 브라우저가 이들을 원하는 포멧의 형태로 보여주는 역할을 하며 실제 사용자가 보는 웹 페이지는 이 태그의 형식을 분석하여 브라우저가 화면에 그려준 것이다.

 

1. 태그

HTML은 다양한 태그(span, div, a, li, ul, img)들로 구성이 되어있고, 각각의 태그들은 각자 다른 역할로 구성되어있다.

div 는 기본이 되는 네모 박스를 말하고 
a 태그는 클릭하면 다른 페이지로 이동할 수 있는 링크를 위한 태그이며, 
li나 ul은 list와 unordered list 를 말하며 list 형태를 그려 주는데 사용된다. 
img는 이미지를 화면에 출력하는 역할을 한다.

태그들은 속성 값을 태그의 안에 넣고 내용을 내부에 감싸서 사용하고 태그로 또다른 태그를 감쌀 수도 있다.

<div attr="값1">안녕하세요</div> <p> <span>글1</span> <span>글2</span> <p/>

태그는 태그 타입과 속성, 그리고 innerText으로 이루어 지는데 div, span 등이 태그의 타입이고 속성은 태그 내부에 내가 포함시키길 원하는 값이다. 보통 클래스 속성(class="classA")과 id 속성(id="idA") 등이 많이 사용된다. innerText은 태그와 태그 사이에 포함된 값으로 실제 화면에 표시되는 텍스트를 말한다. (ex. 안녕하세요, 글1, 글2)

최초의 HTML은 태그로만 구성되어있었으며 여러개의 HTML 파일을 만들어두고 이들간의 이동을 위해 a 태그를 활용한 link 방식의 이동을 사용했으며 링크로 이동된 히스토리가 브라우저에 저장되어 브라우저에 뒤로가기 버튼을 누르면 이전 html 파일로 이동이 가능했다. 따라서 화면 한개에 하나의 HTML 파일이 필요했고 iframe을 사용해서 하나의 HTML에 다른 HTML을 일부 포함시켜서 보여주기도 했었다.

 

2. 웹의 배포

이러한 웹 페이지를 개발하면 이를 서버에 배포를 해야 외부접근이 가능하다. 따라서 컴퓨터의 인터넷망에 이를 연결시키는 역할을 해주는게 톰캣, ngnix 등의 서버 프로그램이다. 이들은 서버 프로그램에서 설정한 폴더에 html 파일들을 넣어두면 내 ip와 port 로 접근했을때 지정한 폴더에 파일들을 접근 가능하게 만들어 준다.

 

3. HTML의 한계

하지만 정적 웹만으로는 사용자 입력을 받아 데이터를 저장하거나 계산하는등의 유저 인터렉션을 지원하지 않는다. 예를들어 HTML만으로는 로그인을 하고 블로그나 카페에 글을 올리거나 하는 식의 사용자 행동을 처리하지 못한다. 따라서 계산을 수행하고 데이터를 저장/불러오는 기능을 위해 PHP, JSP, ASP 등의 서버페이지가 필요해졌다.

예를들어 더하기 계산을 수행해서 값을 보여주는 웹 페이지를 작성해보자. 입력을 받기 위한 태그는 input 이다. 따라서 다음과 같이 input 태그를 작성한다.

<input> + <input>

그러면 아래 그림과 같이 두개의 input 박스가 나타난다. 그런데 여기에 입력된 값들을 계산해 줄 방법이 존재하지 않는다.

그래서 예전에는 이를 form 태그로 감싸서 서버 페이지로 넘겨줬다. input 태그는 여러가지 타입을 가지고 있는데 이중 submit 타입은 form에 데이터를 action에 지정된 url로 함께 보내주는 역할을 한다. 서버 페이지에서 이 input값을 구분하기 위해서 name 속성이 필요하기 때문에 name 속성을 각각 지정했다.

<form method="post" action="test.php">
	<input name="add1"> + <input name="add2">
	<input type="submit">
</form>

4. method

form에 method는 HTTP 통신 규약 중 하나로 데이터를 전달하는 방식을 명시한다. GET 방식은 데이터들을 url 뒤에 파라미터로 붙여서 보내주는 것이고 post 방식은 post 형태로 숨겨서 전달되는 형식을 말한다. GET 방식으로 submit을 전달하면 test.php?add1=123&add2=345 이런식으로 url에 붙어서 값이 전달되기 때문에 내가 입력한 정보가 훤히 보인다. 반면에 post 방식으로 보내면 test.php의 url로 이동하면서 내 입력값들은 숨겨져서 전달이 된다. 하지만 새로고침을 하거나 test.php를 입력해서 직접 링크 이동을 하면 post에 숨겨진 값을 함께 보낼수 없기 때문에 내가 검색한 페이지 링크를 공유하는 것 같이 내가 원하는 결과의 검색된 데이터를 보고 싶을때는 GET 방식을 자주 사용한다. 

 

5. 데이터 처리

form 태그 내에 id가 지정된 값들은 submit 버튼을 클릭하면 그 데이터가 get방식이든 post 방식이든 새로운 페이지로 전달이 된다. javascript가 활성화 되지 않았던 시절에는 서버 페이지에서 이 데이터들을 처리해야 했는데 서버페이지는 동적 프로그램과 html의 중간 형태로 예를들어 다음과 같이 작성한다. 

<?php
	$add1 = $_POST["add1"];
    $add2 = $_POST["add2"];
    echo "계산 결과는 ".($add1 + $add2)
?>

다시 아까 페이지로 돌아와 값을 입력하고 submit 버튼을 클릭하면 페이지 이동이 일어나면서 다음과 같이 화면에 표시된다.