Javascript
html은 뼈대, css는 꾸미기, javascript는 움직이기!
Javascript?
객체 기반의 스크립트 프로그래밍 언어로
쉽게 말하면 웹 브라우저가 알아 들을 수 있는 언어
Javascript 문법
예제: onclick
<head>
...
<script>
function hey() { // 1) 함수를 만들고
alert('안녕하세요!') // 알림창이 뜸
console.log('안녕하세요!') // 개발자도구 로그에 찍힘
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button onclick="hey()">영화 기록하기</button> <!-- 2) 으로 연결해주기 -->
</div>
...
</body>JQuery
html 뼈대를 선택해서 쉽게 조작하게 해주는 Javascript 라이브러리
필요성
Javascript로만 구현하면
1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서
JQuery가 등장하게 되었음
Javascript와 Jquery 비교
Javascript
document.getElementById("element").style.display = "none";JQuery
$('#element').hide();예제: append()
- 백틱(`)은 문자와 변수를 함께 써줄 수 있도록 하는 특수기호
<p>${a['name']}는 ${a['age']}입니다.</p>이렇게 html태그를 변수와 함께 쓸 수 있다$('#아이디').append(변수): 아이디에 해당하는 요소에 변수를 추가한다
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jquery 가져오기 -->
<script>
function checkResult() {
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
]
$('#q1').empty() // 지우기
people.forEach((a) => {
let temp_html = `<p>${a['name']}는 ${a['age']}입니다.</p>`
$('#q2').append(temp_html) // 추가하기
})
}
</script>
</head>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br>
<h2>함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>리스트 붙이기</h2>
<div id="q1">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>Fetch API
HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공하는 API
- 짧은 코드로 요청을 보내고 받아올 수 있음
서버-클라이언트 통신 이해
요청 타입
API는 은행 창구와 같은 것!
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
GET
- URL 뒤에 물음표를 붙여 key=value로 데이터 전달(&뒤에 데이터추가)
http://naver.com?param=value¶m2=value2 - 주로 데이터 조회(Read)를 요청할 때 사용
- 예) 영화 목록 조회
POST
- 보통
json형태로 데이터 전달
data: { param: 'value', param2: 'value2' } - 주로 데이터 생성(Create), 변경(Update) 요청 할 때 사용
- 예) 회원가입, 회원탈퇴, 비밀번호 수정
GET 요청 확인 Fetch 코드
fetch("URL") // 해당 URL로 웹 통신 요청(기본값: GET방식)
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화
.then(data => {
console.log(data) // 개발자 도구 콘솔에 찍어서 확인
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용POST 요청 확인 Fetch 코드
let formData = new FormData(); // formData 인스턴스 생성
formData.append("title_give", "제목"); // {'title_give':'제목} 데이터 추가
fetch("/test", { method: "POST", body: formData }) // 해당 URL로 웹 통신 POST 요청, 데이터형식은 formData
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화
.then(data => {
console.log(data) // 개발자 도구 콘솔에 찍어서 확인
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용
공부한 내용은 바로바로 기록하자!