새싹 프론트엔드

새싹 프론트엔드 실무 과정 5주차 Java Script 플러그인

튼튼한간 2022. 11. 15. 09:24
  • 5주차 월요일

11. Fullpage 플러그인

12. Swiper slider

13. JSON 데이터 통신

 

 

Fullpage 플러그인

헤드태그에 3개, 바디에 script 입력!

➡ 사이트를 가져오기 때문에, 인터넷이 연결이 되어있어야 함!

 

 

 

필요한 옵션(네이베이션) 추가

 

 a태그 옆 # 붙이기 

 

 네이케이션 아래에 넣기!

 

 

 

Swiper slider

https://swiperjs.com/

 복붙해서 이미지 태그 넣고, 우클릭 이미지 주소 복사!

 

 

JSON 데이터 통신

JSON.stringify() : 객체 또는 배열을 JSON 포맷의 문자열로 변환

직렬화 : 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데, 이를 직렬화라고 함

 직렬화 : 키 값은 "문자열"

JSON.parse() : JSON 포맷의 문자열을 객체로 변환

역직렬화 

Fetch API : 요청과 응답 등의 요소를 자바스크립트에서 접근하고 조작할 수 있는 인터페이스를 제공

fetch() 메서드 : fetch(resource, options)

JSON 문자열 형태로 변환을 해줘야 처리 가능

response.json()

json-server

- node.js가 설치되어 있어야 함

실행 : json-server --watch 파일명 --port 포트번호

주소 끝의 books는 "books"

방긋 ^_^ 하이~~

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 5주차 블로그 포스팅