개발일지📝_10

💡 이번 주에는 라이브러리와 API에 대해 배웠으며 이와 관련된 실습도 해보았다.

새로 배운 내용🌼

✔ 라이브러리
: 재사용할 수 있는 코드 kit
: 웹/앱에서 많이 사용되는 기능들을 재사용할 수 있는 코드로 구현해 놓은 것
👉라이브러리를 많이 사용하면 랜딩 페이지의 로딩 속도 등 웹페이지 성능에 문제가 발생할 수 있다는 점 유의해야 함

🔗상황별 JS 라이브러리

▪ 데이터 시각화 (지도, 네트워크, 차트 그리기)
D3.js
Chart.js
leaflet.js

▪ DOM 조작
jQuery

▪ 애니메이션 효과
GSAP
Anime.js

▪ 수식, 날짜 처리
Date.js

▪ UI 컴포넌트
React.js

👀 라이브러리 사용방법
: 개발 중인 앱에서 사용하고 싶은 라이브러리가 있다면, 프로젝트 폴더에 직접 라이브러리를 설치하거나, CDN으로부터 import해올 수 있음

1. 프로젝트 폴더에 직접 라이브러리를 설치하는 경우에는 npm, yarn 등의 패키지 매니저로 간단한 명령을 실행하면 됨
   ex) swiper 라이브러리를 설치하고 싶을 경우, 터미널을 열고 프로젝트 폴더의 루트 디렉토리에서 다음 명령어를 실행하면 됨
   👉$npm install swiper
2. CDN으로부터 필요한 라이브러리를 import하는 경우에는 html 문서의 부분에 <script src="라이브러리 경로"></script> 를 복사+붙여넣기하게 됨

✔ Ajax
: 브라우저에서 서버로 데이터에 대한 요청을 보내고, 서버가 응답한 데이터를 이용하여 웹페이지를 동적으로 업데이트하는 비동기 프로그래밍 방식
👉비동기로 처리 : 여러 작업이 동시에 이루어질 수 있음을 의미함

▪ Ajax 가 등장하면서 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해짐! 성능도 개선되고 부드러운 화면전환도 가능해지게 됨

✔ XMLHttpRequest
: 브라우저에서 자바스크립트를 사용하여 HTTP 요청을 전송할 때 XMLHttpRequest 객체를 사용함. Ajax는 XMLHttpRequest를 기반으로 동작함. XMLHttpRequest 객체에는 HTTP 요청 전송 및 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티가 있음.

// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();

✔ Json
: JavaScript Object Notation의 준말로, 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷

▪ 클라이언트에서 서버로 객체를 전송하려면 객체를 문자열화(직렬화 serializing)해야 함.
👉 JSON.stringify 메서드는 객체를 JSON 포맷의 문자열로 변환함.

const dog = {
	name: '댕댕이'
	age: 5,
	sound: '멍멍'
}

// 객체를 JSON 포맷의 문자열로 변환
const json = JSON.stringify(obj);

console.log(typeof json, json)
// string {"name": "댕댕이", "age": 5, "sound": "멍멍"}

▪ 서버로부터 클라이언트에 전송된 JSON 데이터는 문자열임. 문자열을 객체로 사용하려면 JSON 포맷의 문자열을 객체화(역직렬화 deserializing)해야 함.
👉JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환함.

  const dog = {
	name: '댕댕이'
	age: 5,
	sound: '멍멍'
}

// 객체를 JSON 포맷의 문자열로 변환
const json = JSON.stringify(obj);

// JSON 포맷의 문자열을 객체로 변환
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
/* object {
	name: '댕댕이'
	age: 5,
	sound: '멍멍'
} */

📌프로젝트 진행상황

: 중간고사 프로젝트에서 CSS로 구현한 슬라이더 부분들을 JS를 이용하여 화살표 버튼을 눌렀을 때 한 블럭만큼만 슬라이더가 넘어가도록 해보았다. 기존 사이트에서는 마우스를 갖다댔을때 화살표 버튼이 보이는 형태라서 그 부분에 대해서 수정이 더 필요할 거 같다. 저번부터 계획은 해놨는데 미뤄왔었던 스마트폰, 태블릿pc, pc에 해당하는 각각의 미디어쿼리를 완성하는 것도 남은기간동안 해낼 수 있었으면 좋겠다.

느낀점

이번 주에 새로 배운 내용 중 '라이브러리'에 대한 내용을 배웠는데 누군가가 미리 만들어놓은 코드를 가져다가 매뉴얼에 따라 사용하거나 커스터마이즈하여 웹 페이지를 구현해낼 수 있다는 점이 흥미로웠다. 상황별로 다양한 JS 라이브러리들이 있다는 것에 신기하기도 했다. 코로나 뉴스 API로 수직 슬라이더 만들기 실습에서는 공공데이터 API 활용 신청을 어떻게 하는것인지, 그리고 API 기술문서에서 API 서비스를 활용할 때 필요한 부분들은 뭔지 알아갈 수 있었다. 사실 API 관련 내용을 들을 때 이해하지 못한 부분들이 있어서 노션의 강의자료를 보며 복습을 하고 실습도 해봐야 겠다는 생각을 했다. 기말고사가 얼마남지 않아 그때까지는 프로젝트에 집중을 해야겠지만 방학 때라도 따로 공부를 해야할 것 같다.

웹 프로그래밍 기초 수업을 통해 HTML, CSS, JS 관련 이론적인 내용들을 배우고 직접 실습도 해보며 웹 페이지의 다양한 요소와 기능들을 알아갈 수 있었다. 프로젝트로 클론코딩을 해보면서 웹 페이지를 구현해내기 위해 고려되어야 할 것들이 많으며 그것들 하나하나를 나타내기 위해 HTML, CSS, JS 코드를 작성한다는 것이 쉽지 않다는 것을 경험할 수 있었다. 이 수업을 통해 지금까지 배워보지 못한 새로운 내용들을 알아갈 수 있어서 좋았고 웹 프로그래밍 분야에 관심을 갖게 되는 계기가 되었다. 앞으로 남은 2주동안 더욱 힘을 내서 프로젝트를 잘 마무리할 수 있었으면 좋겠다. 한 학기동안 매주 실시간 수업으로 하나라도 더 우리에게 도움이 될만한 내용들을 가르쳐주려고 하셨던 교수님께 감사하다고 전하고 싶다😊복습할 때 이해가 잘 되도록 노션에 수업에서 다룬 내용들과 그에 대한 예시들을 포함하여 작성해주신 강의자료들도 감동이었다✨