항해 99 5기
항해99 5기 시작전 웹개발 종합반 1주차 리뷰
65살까지 코딩
2021. 12. 11. 14:34
728x90
반응형
1주차에서 중요하게 생각하는 부분만 다시 복기해보도록 하겠음
- 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 그려주는 것이다.
- 클라이언트가 요청을 보내면 서버가 만들어 놓은 API라는 창구에 요청을 보내는 것이다.
그럼 API란 무엇일까???
API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 다음과 같은 역할을 한다.
1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
: 데이터베이스에는 소중한 정보들이 저장되는데요. 모든 사람들이 이 데이터베이스에 접근할 수 있으면 안 되겠지요. API는 이를 방지하기 위해 여러분이 가진 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해줍니다.
2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
: 여기서 애플리케이션이란 우리가 흔히 알고 있는 스마트폰 어플이나 프로그램을 말합니다. API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 역할을 합니다.
3. API는 모든 접속을 표준화한다.
API는 모든 접속을 표준화하기 때문에 기계/ 운영체제 등과 상관없이 누구나 동일한 액세스를 얻을 수 있습니다. 쉽게 말해, API는 범용 플러그처럼 작동한다고 볼 수 있습니다.
- 요청은 다양한 형태로 들어오는데 데이터를 내려줄 때 주로 json 형식으로 내려주게 된다.
- 부트스트랩을 알긴 했지만 사용하면 실력이 안늘거라는 편견때문에 사용하지 않고 평소에 html,css,js 써서 만들었는데 과거의 내가 후회되었음 부트스트랩을 사용하니 인생이 편해지는 걸 느꼇다. 부트스트랩을 사용할 때 필요한 코드는 다음과 같다.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>자바스크립트 관련 문법은 단단히 알고 있기 때문에 pass~
1주차 과제 완성본
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
* {
font-family: 'Black Han Sans', sans-serif;
}
.wrap {
width: 500px;
margin: auto;
}
.image {
width: 500px;
height: 400px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEBRVdDHxxmfslbKBP1zErGvWZIlQ83Fj0VQ&usqp=CAU");
background-size: cover;
background-position: center;
}
h1 {
display: inline;
}
.mybtn {
text-align: center;
width: 500px;
margin: auto;
}
</style>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<div class="wrap">
<div class="image">
</div>
<div class="content">
<h1>아이맥을 팝니다</h1>
<span>가격:100만원/대</span>
<p>
이 컴퓨터는 어마무시한 성능을 가지고 있으며 디자인도 탁월해 많은 사람들이 사용하는 컴퓨터입니다.
</p>
</div>
<div class="form">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>--수량을 선택하세요--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">주소</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<div class="mybtn">
<button type="button" class="btn btn-primary">주문하기</button>
</div>
</div>
</body>
</html>
728x90
반응형