우리가 배울 것 - Next.js
Next.js는 Vercel사가 개발하는 리액트 기반 프레임워크이다.
일단 완전 기본부터 알아보자.
웹페이지의 작동원리
우리가 브라우저로 어떤 웹사이트에 들어갔다고 하자. 이때 우리의 브라우저와 서버는 어떤식으로 작동해 우리에게 웹페이지를 보여주는 걸까?
이를 쉽게 정리하면 다음과 같다.
- 사용자의 브라우저가 서버에게 특정 URL을 요청
- 서버는 요청을 받고 어떤 데이터를 돌려주면 될 지 생각함
- 서버가 데이터를 돌려줌
- 사용자의 컴퓨터 상의 브라우저가 이를 렌더링함
이때, 서버는 데이터를 HTML의 형식으로 돌려준다. 이제 먼저 HTML에 대해 알아보자.
모든 웹페이지는 HTML, CSS, JS를 기반으로 작성된다.
HTML은 기본적인 레이아웃을 정하고, 모든 Element(요소)를 기술한다. 문법은 다음과 같다.
각 <…>와 <…/>의 대응이 하나의 요소라 생각하면 되겠다.
<!Doctype HTML>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
head 요소는 웹사이트의 제목, 크기, 등의 메타데이터를 기술한다.
일단은 body 요소에 집중하자.
body 요소에는 사용자에게 보이는 모든 요소들을 기술하는 곳이라 생각하면 좋다.
(Note. body밖에 요소를 놓는다 해도 브라우저는 이를 보여주긴 한다. 하지만 우리는 일단 정석적인 방법으로 하는게 좋으므로 그냥 body에 중요한 것들은 다 넣는다 생각하자.)
그러면 이제 HTML의 다양한 요소에 대해 알아보도록 하자.
HTML의 다양한 요소
1. div
우리가 가장 많이 사용하게 될 요소이다. 가장 다양한 용도로 사용된다.
2. img
이미지를 표시하게 하는 요소이다. 문법은 다음과 같다.
<img src="이미지URL" /> img는 Self closing tag라서 다른 요소들과 달리 슬래시가 앞 부분에 붙는다. 그냥 img 안에는 아무것도 넣을 수 없어서 그렇다 생각하고 넘어가자.
3. button
이름 그대로 버튼이다. 누르면 어떤 동작을 실행하게 할 수 있는데, 이 부분은 다음 Chapter에서 알아보기로 하자.
<button onclick="...">남훈이 머리 때리기</button>4. anchor (a)
이름을 보면 뭔지 잘 모를 수 있는데, 이는 페이지간 링크를 만드는 요소이다. 한 웹사이트 내의 페이지로 가는 것 일수도 있고, 외부 웹페이지의 링크로 가는 것 일 수도 있다.
<a onclick="링크123">단대소고 마이너갤러리로 가기</a>span
인라인으로 텍스트를 보여줄 때 쓴다. 그냥 텍스트 보여주는 요소라 생각하자.
참고로 저렇게 한줄에 적어도 되고,
이렇게 적어도 브라우저는 잘 알아듣는다.
<a onclick="링크123">
단대소고 마이너갤러리로 가기</a>심지어 이렇게 적어도 알아듣는다.
<a
onclick="링크123"
>단대소고 마이너갤러리로 가기</
a>HTML의 특징
1. 요소를 네스팅 할 수 있다.
<div>
<div>남훈이바보</div>
<div>
<div>
<div>
<button>
남훈이 때리기
</button>
</div>
</div>
</div>
<div>
2. 기본적으로는 스타일링이 되어있지 않다.
→ CSS로 스타일링을 하는거임
3. HTML만으로 작성한 웹사이트는 별로 쓸모가 없다.
순수한 정보제공의 목적만 달성할뿐, 사용자에게 유용한 기능을 제공하기는 어렵다.
다음으로 CSS에 대해 알아보자.
CSS가 뭐에요??
우리는 CSS라는 언어를 이용해서 웹사이트를 이쁘게 스타일링할 수 있다.
위의 내용을 잘 읽었다면(그랬기를 바라요), 서버가 HTML의 형식으로 데이터를 브라우저에게 반환한다는 것을 기억할 것이다.
그렇다면 CSS는 사용자의 브라우저에게 어떻게 전달될까?
이에 대한 답은 head 요소 안에 있다.
앞서 우린 head에 제목과 같은 메타데이터를 저장한다고 배웠다.
이러한 메타데이터 중에는 웹사이트에 필요한 자바스크립트 파일이나 CSS파일도 포함된다.
예를들어, 우리 웹사이트에 babo.css라는 파일이 필요하다면,
<head>
<link rel="stylesheet" href="babo.css" />
...
</head>같이 쓰면 된다.
이러면, 브라우저가 HTML 파일을 받자 마자 CSS파일이 필요하다는 것을 알게 돼 알아서 /babo.css 파일도 요청해 사용한다.
CSS 문법
대충만 배워도 될 것 같다.
CSS 문법은 인터넷에 찾아보거나 챗봇에게 물어보면 금방 알 수 있고, 많이 보다 보면 자동으로 외워진다.
// babo.css
#babo {
font-size: 120px;
color: red;
}
.namhoon {
font-size: 60px;
color: #0000FF;
}
a {
color: pink;
}
//index.html (안중요한건생략함)
<head>
<link rel="stylesheet" href="babo.css" />
</head>
<body>
<span class="namhoon">김남훈</span>
<span class="namhoon">김남훈</span>
<span class="namhoon">김남훈</span>
<span class="namhoon">김남훈</span>
<div id="babo">
바보
</div>
<a href="https://m.dcinside.com/board/dksw">
단대소고마이너갤러리
</a>
<button>
때리기
</button>
</body>위의 CSS파일을 보면
#, .(마침표)의 기호가 사용되는 것을 볼 수 있다. 눈치 빠른 분들은 # 가 id를 의미하고, .(마침표)는 class를 가리킨 다는 것을 알았을 수도 있다.
그렇다면 class하고 id는 무엇이 다를까?
가장 중요한 차이는 id는 웹페이지상 하나밖에 없는 요소를 가리킬 때 쓰고, class는 여러번 사용되는 스타일을 정의할 떄 사용된다는 것에 있다.
마지막의 a는 모든 anchor 요소에 적용되는 스타일을 정의한다.
중간 정리하기
오늘 많은 것을 짧은 시간안에 배웠다. 이를 복습해보기 위해 간단한 O/X 문제를 준비해봤다.
- 사용자가 웹페이지를 접속할 때, 웹 서버는 브라우저에게 HTML, CSS, JS 데이터를 동시에 반환한다. (O/X)
- CSS는 웹사이트를 스타일 할 때 사용된다. (O/X)
- class는 웹사이트상에 한번만 표시되는 요소를 가리킬 때 가장 적합하다 (O/X)