[241001] 본캠프 2일차_학습 진행 팀

타임라인

• 09:00 ~ 13:00 (개인학습) 웹개발 종합반 3주차
• 13:00 ~ 15:00  TIL 특강
• 19:00 ~ 21:00 (개인학습) 웹개발 종합반 3주차

---

웹개발 종합반 3주차

 

jQuery

write less, do more

 

2주차 강의에서 간단하게 정리했던 개념을 떠올려 보면, jQuery는 웹사이트에서 자바스크립트를 쉽게 활용할 수 있도록 하는 오픈소스 기반의 자바스크립트 라이브러리이다. 라이브러리를 통해 입문자들도 쉽게 웹페이지 상에서 다양한 기능을 쉽게 조작할 수 있고, 높은 호환성을 기반으로 공개된 플러그인들을 직접 구현해보고 확장 가능하다는 장점이 있다.

 

자바스크립트를 공부하면서 느낀 점인데, 코드가 길고 보기 힘들다. 내가 초보라서 그런가 앞으로 배우게 될 React를 포함해서 Vue, jQuery 등은 모두 html 조작을 용이하게 해 주는 라이브러리들이다. 웹개발 종합반 강의 자료에서 수강생이 필요한 자료와 설치 프로그램을 쉽게 찾아 사용할 수 있도록 코드스니펫으로 정리되어 있는 점이 마음에 들었다.

document.getElementById('hello').innerHTML = '안녕';

$('#hello').html('안녕');

▷ Javascript와 비교했을 때. 복잡한 코드를 보기 편하게 작성할 수 있다.

 

• $("#textNode") jQuery는 기본적으로 $를 함수 이름으로 사용한다. css에서 선택자로 class를 썼던 것을 기억해 보자. css와 마찬가지로 jQuery에서도 특정 버튼, 인풋박스, div 등을 id값을 통해 가리켜서 조작할 수 있다.
• $(target).append(source)선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다. (source 개체를 target 개체의 마지막에 추가한다)

 

fetch

 

 

fetch 함수는 자바스크립트에서 웹 API를 호출할 때 사용한다. fetch 함수의 용도는 영단어만 봐도 충분히 어림짐작할 수 있었다.

fetching 하고 있는 강아지. 요구한 것을 가져오는 것이 곧 fetch다

 

서버에 요청을 보내고, 원하는 응답을 받을 수 있게 해 준다. 

fetch("url")
	.then(res => res.json()) 
	.then(data => {console.log(data)}

 

fetch() 괄호 안에 url만 들어 있는 상태라면 fetch() 함수는 디폴트로 GET 방식으로 작동한다. 특정 OpenAPI에 저장된 데이터를 보여주는 웹페이지를 만들기 위해서 사용할 수 있다. 응답(response) 객체는 json() 메서드를 제공하고, 이를 호출하면  객체로부터 JSON 형태의 데이터를 자바스크립트로 변환하여 얻는다.

 

공부하는 과정에서 모든 코딩 관련 용어들이 낯설고 처음 보는 것들 뿐이기 때문에 복습할 때 한 번 더 검색을 통해 자세한 해설을 찾아보기도 한다. fetch 자체는 단순히 네트워크를 통해 데이터를 요청하고 응답 처리하기 위해 사용하는 자바스크립트 API이다. 그리고 Promise를 반환하여 비동기적으로 네트워크 요청을 다룰 수 있다.

 

Promise는 뭐고 비동기적이라는 게 무슨 뜻이지? 🤔 🤔 🤔

 

사용자가 웹에서 로그인할 때, 아이디와 비밀번호를 입력하고 해당하는 로그인 버튼을 누르면서 페이지는 새로고침되어 로그인 상태로 바뀐다. 이처럼 데이터를 서버로 전송하고, 서버로부터 응답을 받은 후에 그 결과에 해당하는 페이지로 이동하는 것이 동기적(synchronous) 방식이다. 반면 자동완성 기능을 떠올려 보자. 사용자가 내용을 입력하는 동안 페이지는 새로고침되지 않고, 입력하려는 내용은 자동완성되면서 이를 기다리지 않고 다른 작업을 계속할 수 있다. 서버로 데이터를 요청하고, 응답을 기다리는 동안 웹은 다른 업무를 수행하고 응답을 받은 후에 작업을 진행하는 것이 비동기적(asynchronous) 방식이다.

 

Promise는 자바스크립트에서 비동기적 작업 처리를 돕는 객체이다. 특정 작업이 완료되거나 실패했을 때 그 결과를 나타낸다. 결국 fetch 함수는 비동기적 네트워크 요청을 다루기 위해 promise 객체를 활용한다고 설명된다.