웹개발 종합반 2주차

박성우·2023년 3월 21일
0

1주차에서 배운 HTML과 CSS에 이어서 2주차에는 웹페이지에 생명을 불어넣어줄 JavaScript와 JQuery, Fetch에 대해 공부했다.

JavaScript의 핵심 - 함수

웹페이지를 동작할 수 있도록 HTML에 함수를 연동시켜서 원하는 작업을 수행할 수 있도록 한다.

JavaScript를 통해 반복문을 사용할 경우, 리스트-딕셔너리 자료와 같은 경우 요소를 뽑아써야 하는데

fruits.forEach((a) => {
	console.log(a)
}) 

이런 식으로 forEach 함수를 사용해서 fruits라는 리스트-딕셔너리로부터 각 요소를 처음부터 순회하며 a에 넣어준다.

문자와 변수를 함께 써야할 때 백틱(``)을 사용하면 편리하다.

`${}의 나이는 ${}살 입니다`

jQuery의 핵심 - id

  • jQuery는 미리 작성된 JavaScript 코드를 가져와서 더 간단하게 쓸 수 있게 만들어놓은 라이브러리
  • CSS가 태그를 가리킬 때 class를 쓰듯이, jQuery는 id 값을 통해 가리켜야한다.

jQuery를 통해 특정 태그에 데이터를 넣거나 뺄 때, 다음과 같이 append()와 empty()를 사용한다.

$('#id').append(temp_html)
$('#id').empty()

클라이언트-서버

클라이언트가 서버로부터 무언가를 요청할 때

  • GET: 단순히 데이터를 조회(Read)할 경우
  • POST: 데이터를 생성(Create), 변경(Update), 삭제(Delete)할 경우

GET 또는 POST를 할 경우, 서버와 통신하기 위해서 fetch를 사용해야한다.

fetch("URL")                 // 이 URL로 웹 통신을 요청. 괄호 안에 다른 것이 없다면 GET
	.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화
	.then(data => {          // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용
		console.log(data) 
	}) 
profile
Backend Developer

0개의 댓글