개발세발

[새싹(SeSAC) 프론트엔드] day21 221114 본문

직업훈련/새싹(SeSAC)

[새싹(SeSAC) 프론트엔드] day21 221114

뉼👩🏻‍💻 2022. 11. 14. 19:18
728x90
반응형
SMALL

 

JQuery

: 웹사이트에서 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈 소스 기반의 자바스크립트 라이브러리 

 

- 웹 페이지 상에서 엘리먼트(Element)를 쉽게 찾고 제어

- 웹 브라우저 호환성이 뛰어남

- 애니메이션과 같은 다양한 기능 제공

 

** JQuery CDN

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

- 인터넷이 되는 경우에만 사용 가능하므로 인터넷 사용이 불가능한 경우 파일을 다운받아서 링크연결 

 

 

fullPage.js (plugin)

** fullPage CDN

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

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

 

 

 

(*)실습

[코드]

 

$(document).ready(function () {
  $("#fullpage").fullpage({
    //options here
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    keyboardScrolling: true, //키보드로 스크롤 가능

    //내비게이션
    navigation: true,
    navigationPosition: "right",

    //링크 연결
    anchors: ["menu", "menu2", "menu3", "menu4"],

    //페이지 별 배경색 지정
    sectionsColor: ["yellow", "orange", "green", "blue"],
  });
});

 

[결과]

 

 

 

CDN (Contents Delivery Network)

: 콘텐츠 전송 네트워크 

- 콘텐츠를 인터넷망을 통해 빠르고 안정적응로 전달해주는 서비스 

 

장점)

클라이언트는 분산되어 있는 여러 개의 서버 중 가장 빠른 서버에서 데이터를 다운로드할 수 있음 

➡️ 서버트래픽 감소 

 

 

Swiper slider 

 

 

 

** Swiper slider CDN

https://swiperjs.com/get-started#use-swiper-from-cdn

 

Getting Started With Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

 

** Swiper slider DEMO

https://swiperjs.com/demos

 

Swiper Demos

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

(*)infinite loop

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper {
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>

 

 

 

위의 이미지를 아래와 같이 css조정하여 맞출 수 있음 

 

 

자동 재생 추가하기

autoplay: {                     //자동재생
  delay: 2000,                  //속도
  disableOnInteraction: true,   //스와이프 후 자동 재생 여부 - 한번이라도 수동으로 스와이프 한 뒤 적용됨
},

 

(*)infinite loop with slides per group 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        //반응형
        breakpoints: {
          320: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
          1024: {
            slidesPerView: 5,
            spaceBetween: 30,
          },
        },
      });
    </script>
  </body>
</html>

 

 

 

JSON (Javascript Object Notation) 

: 클라이언트와 서버 간의 HTTP통신의 위한 텍스트 데이터 포맷

- 대부분의 프로그래밍 언어에서 사용 가능 

 

* 표기 방식 : key, value로 구성 

- 객체와 달리 key에 무조건 "" 를 붙여줘야 함

 

JSON.stringify()

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

*직렬화 (serializing) 

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

 

 

(*)실습

[코드]

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

console.log(typeof obj);

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

console.log(typeof json);

[결과]

 

 

JSON.parse()

- JSON 포맷의 문자열을 객체로 변환

*역직렬화(deserializing)

- 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열 타입

- 이 문자열을 객체로 사용하려면 JSON 포맷의 문자열을 객체화 해야 하는데, 이를 역직렬화라고 함 

 

 

데이터 통신방식 

-xml, ajax, fetch 등등

 

Fetch API

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

- fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있음 

 

//무조건 한 개 이상의 매개변수를 사용해야 함 
fetch(resource, options) 

// resource : json파일의 경로
// options : [선택사항] 

fetch(url, [options])
//response, error는 화살표 함수의 매개변수로 사용자가 직접 지정한 것으로 바꿀 수 있음 
 .then(response => console.log(response))
 .catch(error => console.lg(error)); 

 

동기 비동기
절차적으로 진행 절차적이지 않고 작업이 각자 알아서 하는 것
➡️ 앞선 작업을 기다리는 시간이 줄어듦 

 

 

https://jsonplaceholder.typicode.com/

 

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1.7 billion requests each month.

jsonplaceholder.typicode.com

 

 

(*)실습

[코드]

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

 

[결과]

https://jsonplaceholder.typicode.com/todos 

의 값 가져오기 

 

 

 

status : HTTP 응답 상태

headers : HTTP 응답 헤더

body : HTTP 응답 전문

https://articles09.tistory.com/5

 

HTTP에러 정리(400에러,404에러,500에러)등

HTTP 에러 코드들 정리 기본적으로 우리가 JSP나 웹서버를 통신할때 일어나는 에러들을 정리했습니다. HTTP ERROR CODE 200 에러없이 성공적으로 페이지를 불러오거나 데이터를 전송 400 Bad Request로써,

articles09.tistory.com

 

 

메서드 설명
response.text() 응답을 텍스트 형태로 반환
response.json() 응답을 JSON 형태로 반환
resopnse.formData() 응답을 FormData 객체 형태로 반환

 

 

json-sever 

: json 파일을 사용하여 간단한 테스트를 위한 REST API server 구축할 수 있는 패키지 (실무에서 사용 X. 간단한 테스트용 서버)

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: 11 days ago. Start using json-server in your project by running `npm i json-server`. There are 293 other projects in the npm registry using json-serv

www.npmjs.com

** node.js 설치 후 이용 

 

https://nodejs.org/en/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

LTS (Long Term support)

- 30개월의 장기적인 지원을 약속 받은 버전

- 실무에서 사용할 때 권장

 

current 

- 어떠한 변화가 일어나고 있는 상태의 버전

- 안정적지지 않음

-> 최신 기술을 사용해 볼 수 있음 

 

 

-만약 DB가 필요하다면 과정 중 DB를 배우지 않으니 json 파일을 만들어서 이를 활용하여 사용. 

 

bookList.json 파일

{
  "books": [
    {
      "id": 1,
      "title": "HTML +CSS + 자바스크립트",
      "publisher": "이지퍼블리싱",
      "price": "30,000"
    },
    {
      "id": 2,
      "title": "리액트 프로그래밍 정석",
      "publisher": "이지퍼블리싱",
      "price": "37,000"
    },
    {
      "id": 3,
      "title": "Do it! SQL 입문",
      "publisher": "이지퍼블리싱",
      "price": "22,000"
    },
    {
      "id": 4,
      "title": "Do it! 자료구조와 함께 배우는 알고리즘 입문 - C 언어 편",
      "publisher": "이지퍼블리싱",
      "price": "24,000"
    }
  ]
}

 

 

 

 json-server --watch bookList.json --port 4000

 

[코드]

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

[결과]

 

 

(*) bookList 게시판 만들기 

/*
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json())
  .then((data) => {
    console.log(data.title);
    console.log(data.id);
  })
  .catch((error) => console.log(error));
*/

//promise chain
//fetch("url").then(response).then(data).then(data.title).catth(error)

let table = document.querySelector("table");
fetch("http://localhost:4000/books")
  .then((response) => response.json())
  // .then((data) => console.log(data))
  .then((data) => {
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      let tr = `<tr>
      <td>${data[i].id}</td>
      <td>${data[i].title}</td>
      <td>${data[i].publisher}</td>
      <td>${data[i].price}</td>
      </tr>`;
      table.innerHTML += tr;
    }
  })
  .catch((error) => console.log(error));

 

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

: fetch()메서드의 두 번째 매개변수 options 이용

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

 

[코드]

const form = document.getElementById("bookReg");
let table = document.querySelector("table");

form.addEventListener("submit", (e) => {
  // 디폴트 행동 제거 e.preventDefault();
  // FormData 객체 생성
  const formData = new FormData(form);
  // URLSearchParams 객체 생성
  const bookInfo = new URLSearchParams(formData);
  // 서버에 데이터 전송
  fetch("http://localhost:4000/books", {
    method: "POST",
    body: bookInfo,
  })
    .then((response) => response.json())
    .then((data) => console.log(data))
    .then((data) => console.log(data.id))
    .catch((error) => console.log(error));
});

 

 

 

 

 

 

**json-server : 이 시스템에서 스크립트를 실행할 수 없으므로 ...  에러가 뜨는 경우

https://godnr149.tistory.com/m/193

 

JSON-SERVER : 실행시 ERR 해결

JSON-SERVER --WATCH db.json json-server : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\godnr\AppData\Roaming\npm\json-server.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.micros

godnr149.tistory.com

 

 

 

 

 

 

 

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

728x90
반응형

'직업훈련 > 새싹(SeSAC)' 카테고리의 다른 글

[새싹(SeSAC) 프론트엔드] 5주차 회고  (0) 2022.11.18
[새싹(SeSAC) 프론트엔드] day22 221115  (0) 2022.11.16
[새싹(SeSAC) 프론트엔드] 4주차 회고  (0) 2022.11.11
[새싹(SeSAC) 프론트엔드] day20 221111  (0) 2022.11.11
[새싹(SeSAC) 프론트엔드] day19 221110  (0) 2022.11.10
'직업훈련/새싹(SeSAC)' Related Articles more