fullPage 플러그인
jQuery
웹사이트에서 자바스크립트를 쉽게 활용할 수 있도록 도와 주는 오픈 소스 기반의 자바스크립트 라이브러리
특징
• 웹 페이지 상에서 엘리먼트(Element)를 쉽게 찾고 제어
• 웹 브라우저 호환성이 뛰어남
• 애니메이션과 같은 다양한 기능 제공
jQuery CDN 링크 복사
• <head> 태그 내부에 다음과 같은 링크 추가
<script src="https://code.jquery.com/jquery-latest.min.js">
fullPage CDN 링크 복사
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.ful lpage.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.full page.extensions.min.js">
fullPage.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Create beautiful fullscreen snap scrolling websites - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudf
cdnjs.com
※ cdn을 사용하는 것이 더 좋음
(인터넷이 안 될 경우를 대비하여 미리 파일을 로컬에다 (개인pc) 다운받아 놓는 것이 좋음)
사용 예시)
fullPage.html
fullPage.js 플러그인
• fullpage 초기화
결과)
네비게이션 추가하기
navigation 옵션
| 속성 | 설명 |
| navigation | • false : 기본값 • true : 원으로 이루어진 이동 막대기 생성 |
| navigationPosition | • none : 기본값 • left : 왼쪽 • right : 오른쪽 |
실습) 네비게이션 추가하기
fullPage.js
결과)
구역 또는 슬라이드로 가는 링크 만들기
링크 만들기
• 이동을 원하는 각 영역에 “data-menuanchor” 클래스 추가
• <a> 태그의 링크와 연결
실습) 상단 메뉴 만들기
fullPage.html
fullPage.js
fullPage.css
실행 결과
페이지 배경색 추가하기
fullPage.js
구역을 작게 만들기
• 적용하고 싶은 영역에 “fp-auto-height” 클래스 추가
• 영역 컨텐츠에 맞게 높이 설정됨
footer 영역 높이 조절
결과)
CDN(Contents Delivery Network)
• 콘텐츠 전송 네트워크
• 콘텐츠를 인터넷망을 통해 빠르고 안정적으로 전달해주는 서비스
장점
• 클라이언트는 분산되어 있는 여러 개의 서버 중 가장 빠른 서버에서 데이터를 다운로드할 수 있음
• 서버 트래픽 감소 (cdn 안쓰면 애 파일에 용량이 많이 차지)
CDN 사용 방법
• 예시) jQuery
• 다음 script 태그를 html 파일에 추가해주면 사용 가능
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Swiper slider
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
그림자 효과
https://getcssscan.com/css-box-shadow-examples
CSS Scan - The fastest and easiest way to check, copy and edit CSS
Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.
getcssscan.com
JSON
• 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
• 대부분의 프로그래밍 언어에서 사용 가능
• 표기 방식
- 키와 값으로 구성
JSON.stringify()
• 객체 또는 배열을 JSON 포맷의 문자열로 변환
직렬화(serializing)
• 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데, 이를 직렬화라고 함
※ 키 자리에 따옴표가 다 있으면 jason 없으면 객체
JSON.parse()
JSON 포맷의 문자열을 객체로 변환
역직렬화(deserializing)
• 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열 타입
• 이 문자열을 객체로 사용하려면 JSON 포맷의 문자열을 객체화 해야 하는데, 이를 역직렬화라고 함
Fetch API
• 요청과 응답 등의 요소를 자바스크립트에서 접근하고 조작할 수 있는 인터페이스를 제공
• fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져 올 수 있음
fetch() 메서드
예시)
- 비동기 함수(작업이 다 끝날 때 까지 기다리는 것이 아니라 동시에 작업 진행)
첫번째 매개변수로 주소를 넣어주면 해당 데이터를 가져와줌
(이 실습의 경우 데이터가 없었기 때문에 남이 만들어 놓은 사이트 들어가서 데이터를 가져온거. (json 형식의 데이터예시))
데이터(객체)를 then의 response에 저장. (데이터는 우리 눈에 안보이고 정보만 보임) - 객체 이름 바꿔도 됨
두번째 then을 만들어서 then(data)에 전달이 되는 것이므로 두번째 then에서 데이터를 꺼내서 쓰면 됨
매개변수에는 응답에 대한 결과가 돌아옴
패치 함수 부르고 그게 성공적으로 실행이 잘 되면 then(response)을 부름 - 체인 형식
하지만 실패하면 (주소가 틀리거나 인터넷이 안 될경우) then 실행 안 되고 catch가 실행
* 첫번째 매개변수는 연결하고싶은url로 무조건 써야됨!
두번째는 메서드 방식으로 필요하면 쓰고 안필요하면 안 쓰는 옵션
get방식의 경우 첫번째 매개변수만써도 가능함
실습) fetch() 메서드로 데이터 읽어오기
fetch.html
• <body> 태그 안에 fetch.js 파일 추가
fetch.js
response 객체
response 객체
• HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 포함
• JSON 문자열 형태로 변환을 해줘야 처리 가능
• response → JSON 형태로 파싱
response 객체 메서드
| 메서드 | 설명 |
| response.text() | 응답을 텍스트 형태로 반환 |
| response.json() | 응답을 JSON 형태로 반환 |
| response.formData() | 응답을 FormData 객체 형태로 반환 |
데이터 처리
내 백엔드 파일에 접근하기 위해 이렇게 데이터를 끌고 온 거임
실행 결과)
Fetch API - GET
json-server
• json 파일을 사용하여 간단한 테스트를 위한 REST API server를 구축할 수 있는 패키지
• https://www.npmjs.com/package/json-server
json-server
Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.1, last published: 17 days ago. Start using json-server in your project by running `npm i json-server`. There are 294 other projects in the npm registry using json-serv
www.npmjs.com
fetch() 메서드를 이용한 GET 방식 호출
• fetch() 메서드는 디폴트로 GET 방식으로 작동
• 메서드 호출 시, 별도의 옵션을 추가하지 않아도 됨
실습)
로컬 JSON 파일 읽어오기
bookList 게시판 만들기)
Fetch API - POST
fetch() 메서드를 이용한 POST 방식 호출
• fetch() 메서드의 두 번째 매개변수 options 이용
• options - https://developer.mozilla.org/en-US/docs/Web/API/fetch
fetch() - Web APIs | MDN
The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.
developer.mozilla.org
| 속성 | 설명 |
| method | 데이터 전송 방식 |
| headers | HTTP 요청 헤더 |
| body | HTTP 요청 전문 |
실습) 도서 추가 기능 만들기
board.js
"POST" : 새로운 데이터를 갱신
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 5주차 블로그 포스팅
'Javascript' 카테고리의 다른 글
| 점 표기법 vs 대괄호 표기법 (0) | 2024.05.20 |
|---|---|
| [새싹 프론트엔드] 5주차 - 2 (0) | 2022.11.15 |
| [새싹 프론트엔드] 4주차 - 5 (0) | 2022.11.11 |
| [새싹 프론트엔드] 4주차 - 4 (0) | 2022.11.10 |
| [새싹 프론트엔드] 4주차 - 3 (0) | 2022.11.09 |
