웹사이트 제작의 기초 (5)

세션, 쿠키, State

자, 이제 기초의 대망의 마지막 편이군요. 아쉽네요ㅠ

이번에 다뤄볼 내용은.. 저번편들로부터 이어진 거라고 볼 수 있는데요.

잠깐 복습하자면, 유저는 서버에게 기능을 요구할 수 있습니다. 인풋 값을 넣어서, 그 인풋값을 데이터베이스와 나름의 처리를 통해 처리하고 나온 아웃풋 값으로 받아올 수 있단 말이죠.

유저가 로그인 정보를 넣었을 때, 서버가 로그인 정보가 정확한지 확인하고, 유저의 브라우저에게 유저가 로그인 되었다..라고 말해줄 수 있다는 겁니다.

잠깐만요. 로그인 되었다라고 어떻게 말하나요?

로그인 된 화면을 다른 페이지로 보내주나요? 왜 로그인 된 사람과 안 된 사람은 다른 페이지가 보이죠? 그리고 브라우저는 로그인 되었나 안되었나를 어떻게 알죠????

답은 생각보다 간단해요. 서버쪽에서 유저에게 값을 보내줄 때, 쉽게 사라지지 않는 종이에 로그인 되었다는 정보를 적어두고, 유저의 브라우저는 HTML의 태그를 통해 그 값이 있나 없나만 확인하고 다르게 render 하면 되는 것인거에요.

그 잘 사라지지 않는 종이를 세션, 쿠키 같은 것이라고 보면 됩니다.

브라우저는 원래 상태를 저장하지 않아요. 세션과 쿠키가 없이는 매 페이지는 그저 서버에게서 받아온 독립적인 페이지일 뿐이죠.

하지만 세션과 쿠키는 잘 사라지지 않는 매개체로서 유지되어야 할 정보들을 저장하는 요소로 쓰인답니다.

그래서 쿠키를 훔치는 해커들이 자주 뉴스에 나오는것이에요. 그 쿠키를 훔치면 자기도 다른 컴퓨터에서 같은 사이트에 들어가서 쿠키만 살짝 바꿔주면 로그인이 된 것처럼 되는 것이거든요..

자, 이제 웹 구조에 대한 기초가 끝났습니다.

매우 얕게 겉핥기식으로만 진행해 보았는데요!

앞으로 진행될 수 있는 조금 높은 단계에서는 디테일을 좀 더 알려드리도록 하겠습니다. 감사합니다!

웹사이트 제작의 기초 (4)

데이터베이스

저번 편에서는 유저에게서 값을 받아서 다른 언어로 처리할 수 있다는걸 알았는데요.

사실 그것만으로는 조금 아쉽죠.. ㅎㅎ

이번에는 유저에 관련한 데이터가 어떻게 저장이 되는지, 그리고 어떻게 꺼내서 처리에 쓸 수 있는지 생각해봅시다.

하나의 시나리오를 생각해볼까요? 유저가 로그인을 하려고 한다고 쳐볼게요.

그럼 로그인 아이디와 패스워드를 받아야겠죠. 그런데.. 이 아이디와 패스워드, 맞는지 틀린지 어떻게 알죠?

어떤 문서에 적어두나요? 이 유저가 맞는 정보를 갖고 있나 비교해보면 될까요? 정확합니다. 그게 데이터 베이스에요!

유저의 데이터를 마치 엑셀에 테이블로 적어두듯, 적어두기만 하고 꺼낼 수만 있다면 오케이죠!

이 데이터 베이스를 위한 언어로는 SQL, NoSQL (다른 데이터베이스) 등등 여러가지가 있지만. 기본적인 컨셉은 그저 문서에 정보를 적어두고 꺼낼 수 있다입니다.

물론 그 속도도 빠르고 컴퓨터 안의 가상적인 문서기 때문에 다른 기능들도 많아요.

(겹치는) 정보를 더 효율적으로 저장하고, 여러가지 테이블에서 하나의 정확한 값을 찾아내는 것 같은거 말이죠.

이번 편은 좀 짧았네요. 직관적이라 그런것 같아요! 현실에서 어떤 사람의 정보를 적어두는거를 어떤 문서에 적어놓은것처럼, 데이터베이스도 그저 정보를 적어 둔거랑 같거든요. 간단하게는 말이죠.

웹사이트 제작의 기초 (3)

기능의 기초

오랜만에 철학적인 질문을 하나 던져봅니다.

기능이란 무엇인가..?

각각 다들 다른 정의를 내려놓겠지요. 근데 제가 말하려는 주제에서의 기능을 말해볼게요. 너무 진지하게 받아들이진 마세요. 전 철학과는 거리가 먼 사람입니다. 사실 이게 제 인생에 첫 처음 하는 “철학적인” 질문이니까요 ㅋㅋ. ㅠㅠ

제가 생각하는 컴공에서의 기능은 프로그램이 무언가를 받으면, 그 순간으로부터 무언가를 해나가는겁니다. (문자열을 출력을 한다던가..?)

무슨 뚱딴지같은 소리냐구요? 컴퓨터란 계산 하는 기계잖아요. 무언가 “인풋”이 있어야 “아웃풋”이 있는 것이죠. 우리가 아무 시작도 안했는데 혼자 뚝딱뚝딱 해나가는 녀석이 아니잖아요?

이번 글에서는 그 기능, 즉 무언가를 유저에게서 받으면 서버가 할 수 있는 일에 대한 기초를 알려드린다는겁니다.

일단 크게 구조로 봤을때, 웹사이트상의 마크업 언어로 만들 수 있는 이쁜 화면은 한계가 있습니다. 그래서 다른 언어와 마크업 언어를 연결해주는 식으로 생각하면 편합니다. 저희가 원하는 다른 높은 수준의 기능들은 우리가 쓰는 다른 프로그래밍 언어로 구현하면 좋으니까 말이죠.

그러면 웹 브라우저를 우리가 원래 만들던 GUI 라고 생각하고 인풋만 받아와서, 그걸 우리가 쓰던 프로그래밍 언어에 넣어주면 되겠죠?

그게 바로 백엔드 프로그래밍 이라고 하는겁니다.

잠깐 복습하자면, 원래 우리가 보는 웹사이트들은 멀리 지구 어딘가에 존재하는 다른사람의 서버 컴퓨터에서 보내준 HTML 파일이란 말이죠. 그 파일에 어떠한 값을 넣고 엔터를 누른다고 했을때, 고작 페이지 뿐일 녀석이 어떻게 그 지구 어딘가에 존재하는 컴퓨터에 도달할까요..?

한 10초간 생각해봅시다.

일단, 페이지를 받아온 우리 유저 컴퓨터가 다시 서버에 값을 보내줘야겠죠.
그러면 서버는 그걸 유저에게서 받아서, 자기가 하고 싶은 일을 합니다.
그리고 다시 새로운 페이지를 보내주거나, 아니면 유저에게서 온 요청에 작은 메모를 적어줘서 다시 보내줍니다.

참 쉽죠?

자, 그러면 첫번째 과정입니다.

클라이언트(유저)가 서버(멀리있는컴퓨터)에게 어떠한 값을 보내줄 수 있게 하는것

이는 HTML의 태그들로 쉽게 구현할 수 있답니다.

<form action="?">
	<input type="text" name="first">
	<input type="submit" value="Submit">
</form>

자 위에 코드를 보면, form 이라는 녀석이 있고, input이라는 녀석이 있습니다.
form 은 input에서 넣은 값을 받았을 때 무슨 action을 취할지 정합니다.
저 물음표 부분에 이제 유저에게서 받은 값으로 무슨 일을 할지 적어놓은 코드의 파일이름을 넣으면 되는것이지요.

자, 그러면 유저가 어떤 숫자 정보를 넣었다고 가정합시다..? input 태그 두개 (숫자, 로그인 버튼)를 form 안에 넣고 보냅니다. 서버는 이제 (숫자)라는 이름을 가진 input을 쓸 수 있게 됩니다.
이걸 쓰는 방식은 자유입니다. php, servlet 등등과 같은 프레임워크를 이용하여, 우리가 쓰던 프로그래밍 언어로 유저의 요청값을 추출 해서 그 값으로 뭔가 할 수 있는거죠..! 서버쪽에서의 입장에서는 form 의 action 부분에 서브렛이 들어가고, 예를 들어 자바 서블렛이라고 하면, 그 서블렛은 .java 파일로 된 어떠한 파일을 가리키게 됩니다. 그 파일안에서는 HTTPServlet이라는 라이브러리를 통해 유저의 요청을 Request라는 오브젝트의 형식으로 받을수있고, request.getParameter(숫자)를 이용해서 유저 input을 받을 수 있게 됩니다!! 그 후는 우리가 흔히 아는 자바 코드로 그걸 곱하기 2를 하던 해서, response라는 오브젝트로 다시 보내줍니다.

유저의 브라우저는 그걸 받은 값을 토대로, 하나의 태그를 새로 생성하거나 혹은 보내진 값을 갖고 다른 페이지로 보내질 수도 있습니다.

하지만 기본적인 구조는 서버가 유저에게서 값을 받고, 다른 프로그래밍 언어로 처리를 한 뒤, 유저에게 다시 보내준다는 것에 있습니다.

웹사이트 제작의 기초 (2)

우리가 보는 화면의 비밀

우리가 브라우저를 통해 보는 웹 페이지를 만드는 방법은 가지각색이니, 이 프로젝트에서는 그 중 한 가지 방법을 써보겠습니다.

참고로, 글로서 이해하려고 하면 더 이해하기 힘드니, 직접 메모장을 켜보고, 제작을 해보면서, 예시를 보면서 설렁설렁 대충대충 읽으면 오히려 더 빨리, 정확하게 알 수 있답니다. ㅎㅎ

그림도 비슷해요. 크게 구도를 볼려면 실눈 뜨고 보면 더 잘 이해되거든요? 디테일은 나중에 살리고 일단 대충대충 읽어보세요! visualize가 제일 중요합니다!

웹 페이지의 보이는 부분을 개발하는것을 프론트엔드 개발이라고 부릅니다.

이 프론트엔드의 부분에서는 HTML, REACT, JSP, JS등 여러가지의 언어로 제작을 할 수 있습니다. 실생활에서 마크업 언어 등으로 불리는 것이 그것입니다.

이 중 단연코 웹 프로그래밍을 시작하는 사람에게 제일 처음 접해지는것은 HTML 이라고 볼 수 있겠죠.

HTML을 이용하기 위해서는 tag와 content만 알면 됩니다.

HTML의 구조는 “태그”들과 그 안의 “컨텐츠” 들로 제작되어있습니다.
사실상 이 구조만 알면 HTML로만 보이는 모든 것을 제작 할 수 있습니다.
물론 HTML 자체는 정적인 언어이기에, 동적인 요소를 표현하는 것에는 조금 무리가 있겠습니다.

어쨋든! “태그”라고 불리는 것들은 쉽게 말해서 <와>사이에 들어가는 것이라고 보면 됩니다.

<html></html>

의 태그 한 쌍과 저 사이에 들어가는 또 다른 태그들

<head></head>, <body></body>

로 시작하여 조금씩 채워나가는 html의 요소들은 결국 하나의 페이지로서 웹 브라우저에 의해 “render”(그래픽화)되어 진다고 보면 됩니다.

저번 편에서 다루었던 누군가의 IP를 통해 받아오는 페이지는 이 HTML로 되어있는 페이지를 받아온다고 볼 수 있습니다. 그리고 그 중 제일 첫번째 페이지를 index.html이라고 하죠.

이해가 안된다구요? 예를 들어서 google.com 이라는 주소를 크롬에 치게 되면 크롬은 구글의 ip 중 하나인 x.x.x.x의 컴퓨터에게 가서 index.html을 달라고 합니다.

그 이후 받아온 HTML의 파일을 이용해 우리가 보는 웹 페이지를 만들어 주는것이지요.

HTML의 예시를 하나 주어 페이지 하나를 보여주겠습니다.

<html>
<head>
<title>World Page!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

지금 당장 이 코드를 메모장에 index.html이라는 이름으로 저장하고 나서 웹 브라우저에서 실행하게 되면, 텍스트로만 이루어진 하나의 화면이 눈에 보이게 됩니다.

…

허접하죠?

허접할 만 합니다. HTML의 style이라는 요소를 쓰지 않았거든요.

HTML을 이용하기 위해서는 tag와 content만 알면 됩니다.

HTML을 “아름답게” 이용하기 위해서는 style만 알면 됩니다.

HTML의 태그에는 attribute라고 하는 속성을 부여할 수 있습니다.
<tag attribute1=x attribute2=y> 이런식이죠.
style 또한 이 attribute라고 볼 수 있습니다.

<p style="color:red; background-color:blue">
이런식으로 쓰일 수 있습니다.

이렇게 쓰인다고 하면, 저 태그안에 들어있는 컨텐츠는 스타일이 적용되게 됩니다.

참 쉽죠?

자, 여기까지만 알면, 아름다운 HTML을 만들 수 있습니다.

HTML을 이용하기 위해서는 tag와 content만 알면 됩니다.

HTML을 “아름답게” 이용하기 위해서는 style만 알면 됩니다.

HTML을 “깔끔하고” 아름답게 이용하기 위해서는 class/id만 알면 됩니다.

“깔끔하게” 가 무슨 뜻이냐고요? 지금 당장 웹페이지를 만들려고 해보세요..

…

어때요, 알겠죠? HTML 컨텐츠와 태그가 뒤섞여서 알아보기 힘들죠?
제작하기 힘들죠?

사실, 가능하다면 태그안에 존재하는 style attribute만 없애줘도, 정말 HTML이 깔끔하게 보일텐데 말이죠.. 그게 가능합니다!

tag에게 class/id라는 이름을 부여했을시, style이 그 이름을 가지고 그 녀석의 스타일을 다른 파일에서 바꿔줄 수 있어요.

그리고 그 역할을 하는 녀석을 CSS라고 부릅니다. 들어봤죠? css는 HTML의 style 요소를 빼서 따로 존재하는 파일의 확장자로서 존재합니다.

일단 css의 설명을 하기 전, html의 class 와 id를 알려드릴게요!

class와 id또한 attribute입니다.

<tag class="이름" id = "이름">

라는 식으로 쓰일 수 있죠, 물론 class와 id 둘 다 쓸수도 있답니다.

이 “이름”들은 결국 나중에 css라는 파일에

.이름{
	color=red;
}

라는 식으로 쓰인답니다.

물론 저 {랑 }사이에 들어가는 것은 style의 들어가는 그것과 같답니다!

마지막 단계로는 html에 css가 쓰일 수 있게 head 태그 안의 컨텐츠로서

<link rel="stylesheet" href="./style/styles.css">

이런 식으로 넣어주면 되는것이죠!

자 그럼 html의 태그에는 무엇이 있으며, style에는 무슨 종류가 있냐고요?

그런거는 IDE를 써보면서 직접 이것 저것 속성을 알아보시거나, 구글링 해보세요.
사실 개발자들도 외우는것보다 구글링을 더 애호한답니다! ㅎ

웹사이트 제작의 기초 (1)

풀 스택을 위한 첫 발자국 지침서

우리가 크롬과 같은 웹브라우저의 검색창 부분에 웹사이트의 주소를 입력하게 되면, 브라우저는 그에 맞는 웹페이지의 정보를 받아 우리의 화면에 띄어주게 됩니다.

…

자, 웹사이트의 구조란 위의 문장 하나만으로도 요약하기 충분하나, 조금.. 아주 조금만 더 자세히 알아보겠습니다.

생각을 아주 조금만 더 확장해봐서.. 웹 페이지의 정보는 어디서 받아오는 걸까요?

사실은, 웹 페이지에 대한 정보는 하나의 파일로써 지구의 어느 다른 장소에 있는 컴퓨터에서 존재한다고 생각하면 편합니다.

이해를 돕기 위해 비유를 해보자면, 우리가 방이 두개가 있는 집에 산다고 생각해봅시다. 그리고 각 방에 하나씩 컴퓨터가 하나 있습니다.

유저의 컴퓨터, 즉 클라이언트라는 이름의 컴퓨터는 한 방에 있을 것이고, 웹사이트, 즉 서버라는 이름의 다른 컴퓨터는, 다른 방에 있는 상황입니다.

그 두 컴퓨터들은 “네트워크”라는 하나의 조직에 가입이 되어있습니다.

그 네트워크라는 조직에서의 컴퓨터들은 모두들 같은 생김새를 가지고 있기 때문에, 서로 알아보기 위해서 숫자를 부여를 해줬습니다.

이 숫자를 “IP”라고 부른다고 하네요. 우리 세계에선 우리 컴퓨터를 컴퓨터 1, 서버 컴퓨터를 컴퓨터 2라고 이름 붙여줬습니다.

이제 숫자라는 이름이 생긴 컴퓨터들은, 서로 알아 볼 수 있게 되었고, 소통을 할 수 있게 된 것입니다!

컴퓨터 1은 컴퓨터 2와 만나기 위해서, 브라우저라는 녀석을 이용합니다.

(다른 방식으로 소통 할 수도 있습니다! 이 부분에 대해 더 궁금하시면 질문하세요!)

컴퓨터 1의 브라우저 검색창 부분에 “2”를 입력하면, 컴퓨터 2안에 있는 파일 중 하나가 컴퓨터 1의 브라우저로 보내지게 됩니다.

컴퓨터 1을 하고 있는 우리 유저들은, 그 컴퓨터 2의 파일을 보게 되는 것입니다.

하지만 현실 세계에서 우리는, 숫자를 검색창에 입력하는 경우는 없죠? 그 이유는 사실 컴퓨터의 이름을 하나하나 외우는 것은 상당히 귀찮은 일이기 때문입니다.

그걸 위해서 우리 인간들은, 제 3의 컴퓨터가 인간이 쉽게 기억하는 단어를 컴퓨터의 숫자, IP로 바꿔주게끔 해놨답니다.

컴퓨터 1의 브라우저 검색창에 google.com을 검색하게 되면, 컴퓨터 3이 등장해서 2로 바꿔주는 것이죠.

자, 이제 아까 보았던 문장을 다시 보도록 하겠습니다.

우리가 크롬과 같은 웹브라우저의 검색창 부분에 웹사이트의 주소를 입력하게 되면, 브라우저는 그에 맞는 웹페이지의 정보를 받아 우리의 화면에 띄어주게 됩니다.

이를 비유적으로 수정하게 되면, 다음과 같이 됩니다.

(컴퓨터 1이) 크롬과 같은 웹 브라우저 검색창 부분에 (컴퓨터 2의) 주소를 입력하게 되면, 브라우저는 (컴퓨터 3에게 주소를 건내주고, 컴퓨터 2의 숫자를 받아옵니다. 그 후,) 그에 맞는 (컴퓨터 2의) 웹 페이지의 정보를 받아 (컴퓨터 1의) 화면에 띄어주게 됩니다.