[새싹 프론트엔드] fullPage 플러그인과 JSON 데이터 통신

Ryu·2022년 11월 14일

새싹

목록 보기

17/36

FullPage 플러그인

fullPage 플러그인

fullPage.js

https://alvarotrigo.com/fullPage/ko/#page1

jQuery

웹사이트에서 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈 소스 기반의 자바스크립트 라이브러리
특징
- 웹 페이지 상에서 엘리먼트(Element)를 쉽게 찾고 제어
- 웹 브라우저 호환성이 뛰어남
- 애니메이션과 같은 다양한 기능 제공
공식 홈페이지
- www.jquery.com

jQuery CDN 링크 복사

head 태그 내부에 다음과 같은 링크 추가

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

fullPage CDN 링크 복사

https://cdnjs.com/libraries/fullPage.js/2.9.7

// CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css"/>

// JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>

다양한 옵션 설명

https://github.com/alvarotrigo/fullPage.js

네비게이션 추가하기

navigation 옵션

속성	설명
navigation	false: 기본값 true: 원으로 이루어진 이동 막대기 생성
navigationPosition	none: 기본값 left: 왼쪽 right: 오른쪽

구역 또는 슬라이드로 가는 링크 만들기

링크 만들기
- 이동을 원하는 각 영역에 ‘data-menuanchor’ 클래스 추가
- a 태그의 링크와 연결
```
<li data-menuanchor="menu1">
    <a href="#menu1">Slide1</a>
</li>
```

구역을 작게 만들기

적용하고 싶은 영역에 ‘fp-auto-height’ 클래스 추가
영역 컨텐츠에 맞게 높이 설정됨
footer 영역 높이 조절

<footer class="section fp-auto-height"><h1>footer</h1></footer>

Swiper slider

CDN이란?

CDN(Contents Delivery Network)

콘텐츠 전송 네트워크라는 뜻
콘텐츠를 인터넷망을 통해 빠르고 안정적으로 전달해주는 서비스
장점
- 클라이언트는 분산되어 있는 여러 개의 서버 중 가장 빠른 서버에서 데이터를 다운로드할 수 있음
- 서버 트래픽 감소

CDN 사용 방법

예시) jQuery
다음 script 태그를 html 파일에 추가해주면 사용 가능

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> </script>

Swiper slider

https://swiperjs.com/

JSON 데이터 통신

JSON이란?

JSON(JavaScript Object Notation)

클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
대부분의 프로그래밍 언어에서 사용 가능
표기 방식
- 키와 값으로 구성

{
	"name" : "Soo",
	"age" : 20,
	"alive" : true,
	"hobby" : ["traveling", "piano"]
}

JSON.stringify()

객체 또는 배열을 JSON 포맷의 문자열로 변환
직렬화(serializing)
- 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데, 이를 직렬화라고 함
객체 → JSON

const obj = { name: "Soo",
   age: 20,
   alive: true,
   hobby: ["traveling", "piano"]
};

const json = JSON.stringify(obj); 
console.log(json);

// 실행 결과
{"name":"Soo","age":20,"alive":true,"hobby":["traveling","piano"]}

배열 → JSON

const person = [
   { id: 1, name: "Soo", age: 20 },
   { id: 2, name: "Kim", age: 30 },
   { id: 3, name: "Lee", age: 40 }
];

const json = JSON.stringify(person);
console.log(json);

// 실행 결과
[{"id":1,"name":"Soo","age":20},{"id":2,"name":"Kim","age":30},
{"id":3,"name":"Lee","age":40}]

JSON.parse()

JSON 포맷의 문자열을 객체로 변환
역직렬화(deserializing)
- 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열 타입
- 이 문자열을 객체로 사용하려면 JSON 포맷의 문자열을 객체화 해야 하는데, 이를 역직렬화라고 함
JSON 포맷 문자열 → 객체

const obj = { name: "Soo",
   age: 20,
   alive: true,
   hobby: ["traveling", "piano"]
};

// 직렬화
const json = JSON.stringify(obj);

// 역직렬화
const parsed = JSON.parse(json); 
console.log(parsed);

// 실행 결과
{ name: 'Soo', age: 20, alive: true, hobby: ['traveling', 'piano'] }

JSON 포맷 문자열 → 배열

const person = [
	{ id: 1, name: "Soo", age: 20 }, 
	{ id: 2, name: "Kim", age: 30 }, 
	{ id: 3, name: "Lee", age: 40 }
];

// 직렬화
const json = JSON.stringify(person);

// 역직렬화
const parsed = JSON.parse(json); 
console.log(parsed);

// 실행 결과
[ { id: 1, name: 'Soo', age: 20 },
  { id: 2, name: 'Kim', age: 30 },
  { id: 3, name: 'Lee', age: 40 } ]

Fetch API

요청과 응답 등의 요소를 자바스크립트에서 접근하고 조작할 수 있는 인터페이스를 제공
fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있음

fetch() 메서드

fetch(resource, options)
// option은 선택사항

예시

fetch(url, options)
	// response 자리에는 객체가 들어옴
	// 응답은 response로 들어옴
	.then(response => console.log(response))
	.catch(error => console.log(error));

Fetch API - GET

json-server

json 파일을 사용하여 간단한 테스트를 위한 REST API server를 구축할 수 있는 패키지
https://www.npmjs.com/package/json-server

설치

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

$ npm install -g json-server

실행

$ json-server --watch 파일명 --port 포트번호

fetch() 메서드를 이용한 GET 방식 호출

fetch() 메서드는 디폴트로 GET 방식으로 작동
메서드 호출 시, 별도의 옵션을 추가하지 않아도 됨

로컬 JSON 파일 읽어오기

bookList.json

{
	"books": [ 
	{
		"id": 1,
		"title": "HTML+CSS+자바스크립트",
	  "publisher": "이지스퍼블리싱",
	  "price": "30,000"
	},
  {
		"id": 2,
		"title": "리액트 프로그래밍 정석", 
	  "publisher": "이지스퍼블리싱",
	  "price": "36,000"
	},
	// 생략 
	]
}

데이터 읽기 및 처리

bookList.json 파일의 모든 데이터 읽기

fetch("http://localhost:4000/books")
 .then((response) => response.json())
 .then((data) => console.log(data))
 .catch((error) => console.log(error));

bookList.json 파일의 일부 데이터만 읽기

fetch("http://localhost:4000/books")
 .then((response) => response.json())
 .then((data) => console.log(data[0]))
 .catch((error) => console.log(error));

// 실행 결과
{ 
	id: 1,
	title: 'HTML+CSS+자바스크립트', 
	publisher: '이지스퍼블리싱', 
	price: '30,000'
}

Fetch API - POST

fetch() 메서드를 이용한 POST 방식 호출

fetch() 메서드의 두 번째 매개변수 options 이용
options
- https://developer.mozilla.org/en-US/docs/Web/API/fetch
  
  속성 설명
  method 데이터 전송 방식
  headers HTTP 요청 헤더
  body HTTP 요청 전문

속성	설명
method	데이터 전송 방식
headers	HTTP 요청 헤더
body	HTTP 요청 전문

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

Ryu

이전 포스트

[새싹 프론트엔드] 이벤트

다음 포스트

[새싹 프론트엔드] fullPage 플러그인과 JSON 데이터 통신

새싹

FullPage 플러그인

fullPage 플러그인

fullPage.js

jQuery

jQuery CDN 링크 복사

fullPage CDN 링크 복사

다양한 옵션 설명

네비게이션 추가하기

구역 또는 슬라이드로 가는 링크 만들기

구역을 작게 만들기

Swiper slider

CDN이란?

CDN(Contents Delivery Network)

CDN 사용 방법

Swiper slider

Swiper slider

JSON 데이터 통신

JSON이란?

JSON(JavaScript Object Notation)

JSON.stringify()

JSON.parse()

Fetch API

Fetch API

fetch() 메서드

Fetch API - GET

json-server

설치

실행

fetch() 메서드를 이용한 GET 방식 호출

로컬 JSON 파일 읽어오기

Fetch API - POST

fetch() 메서드를 이용한 POST 방식 호출

[새싹 프론트엔드] 이벤트

[새싹 프론트엔드] API

0개의 댓글