사전캠프 시작!
백엔드 부트캠프 잘해서 취뽀하자!
웹 브라우저의 작동 원리
웹 브라우저는 주소에 대응 되어있는 컴퓨터에게 가서 무언가를 받아와서 보여주는 역할을 한다.
이를 우리는 클라이언트라고 부른다.
요청하는 쪽을 클라이언트, 주는 쪽을 서버라고한다.
서버에서 받아오는 것들은 다음과 같다.
- html
- css
- js
- json
- 등등
html은 뼈대, css는 뼈대를 꾸미는 것, js는 동작을 담당하고, json은 데이터이다.
HTML
HTML은 하이퍼 텍스트 마크업 언어의 약자이다.
html은 뼈대, css는 뼈대를 꾸미는 것, js는 동작을 담당하고, json은 데이터이다.
HTML의 구조
HTML의 구조는 head영역과 body 영역으로 나뉜다.
Tag
HTML의 요소는 위 사진과 같다.
html의 방대한 태그는 외우는 것이 아니라 제 때 갖다 쓰는 것이다.
HTML 문서 작성을 위한 DTD
DTD(Document Type Definition)은 문서 형식을 정의하는 컴퓨터 용어로, SGML 계열의 마크업 언어에서 문서 형식을 정의하는 것이다.
HTML5의 기본 구조는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>CSS
CSS는 HTML의 기본 뼈대를 멋지게 꾸며준다.
위 사진은 CSS를 적용한 것이고 아래는 HTML만 적용한 것이다. 꾸며져 있는 것은 부트스트랩이라는 라이브러리를 이용해서 남아있다.
CSS도 Tag처럼 방대하기 때문에 마찬가지로 외워서 쓰기보단 제 때 가져다 쓰는 것이 좋다.
부트스트랩 라이브러리를 이용하면 빠르게 이쁜 디자인을 만들 수 있기에 적극 활용해보자!
J-Query
js는 동작을 담당한다. J-Query는 자바스크립트를 작성할 때 보다 편하게 해주는 라이브러리이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$('#mytitle').text("제목이 아닙니다.")
</script>
</head>
<body>
<h1 id = "mytitle">제목입니다.</h1>
</body>
</html>위와 같이한 후 열어보면 "제목입니다."가 "제목이 아닙니다."로 바껴있다.
J-Query를 사용하면서 '#'을 빼먹는 일이 많았다.. 조심하자.
Fetch
https://movide.daum.net/moviedb/main?moveId=68590 이 사이트를 분석하면
movie.daum.net (창구의 위치)
moviedb/main (창구의 이름)
moveId=65890 (가져오는 데이터) 로 생각하면 이해하기 쉽다.
이러한 요청 방식을 GET 방식이라고 한다.
API를 Fetch해와서 다양한 것을 할 수 있다.
예를 들어 날씨 가져오기 등등
사용 방법은 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let url = 'http://spartacodingclub.shop/sparta_api/weather/seoul'
fetch(url).then(result => result.json()).then(date=>{
let temperature = date['temp']
$('#myTemp').text(temperature)
});
</script>
</head>
<body>
<h1>서울의 온도는 <span id = "myTemp"></span>도 입니다.</h1>
</body>
</html>여기서 온도를 표시할 때 온도 부분만 <span>태그로 집어주고 거기에 아이디를 부여해서 바꾸기 편하게 했다.
'부트캠프 > Dev' 카테고리의 다른 글
| 팀프로젝트 시작 (0) | 2024.08.02 |
|---|---|
| 미니프로젝트 회고록 (0) | 2024.07.20 |
| 미니 프로젝트 3일 차 (0) | 2024.07.18 |
| 미니 프로젝트 2일 차 (0) | 2024.07.16 |
| 미니 프로젝트 1일 차 (0) | 2024.07.15 |
