본문 바로가기

코딩공부/WEB3 - Ajax

[6] fetch API polyfill 2018년 현재 fetch API는 비교적 최신 기능입니다. 따라서 아직 지원되지 않는 브라우저를 사용자가 사용하는 경우 동작하지 않을 수 있습니다. polypill을 이용하면 fetch API를 지원하지 않는 웹브라우저에서도 이용할 수 있습니다. 지원되지 않는 브라우저에서 코드가 실행되면 polyfill 이 활성화돼서 대신 동작하게 됩니다. 이번 시간에는 fetch API의 ployfill을 적용해봅니다. https://developer.mozilla.org/ko/docs/Web/API/Fetch_API Fetch API Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API.. 코딩공부/WEB3 - Ajax 2019. 9. 13.
[5] 글 목록 ajax 로 구현하기 데이터와 애플리케이션(로직) 구분 프로그래머는 데이터와 로직, 데이터와 애플리케이션을 구분한다. index.html 은 데이터와 로직이 섞여 있다. '글 목록' 은 데이터이다. 즉, 바뀔 수 있는 부분이다. 데이터와 로직을 구분하고 싶다. 데이터가 변경되었다고 애플리케이션을 고치는 상황이 나오지 않는다. 따라서 데이터의 성격인 부분을 따로 떼어서 새로운 파일(list)로 만든다. ol 태그에 id 값을 설정 fetch API를 이용해서 글 목록을 가져오기 Javakong Cafe 리팩토링 list 파일 내에 중복이 존재한다. 커피 차 빵 중복을 모두 제거하고 본질적인 내용만 컴팩트하게 남기고 싶다...? coffee,tea,bread fetch 로 받아오는 response의 text 값의 데이터 타입은 .. 코딩공부/WEB3 - Ajax 2019. 9. 12.
[4] 초기 페이지 구현 - 해쉬뱅(HashBang)#! ajax를 이용해서 리로드 없이 정보를 부분적으로 변경할 수 있게 되었지만, 사용자가 자신이 보고 있는 정보를 다른 사람에게 공유할 수는 없게 되었다. 이런 문제를 개선하는 방법을 알아보자 ( 본문이 커피이든 차이든 url 이 같기 때문에 페이지 링크 공유로 알려줄 수가 없음 ) 목표 : 해쉬뱅을 이용해서 어떤 웹사이트에 처음 들어왔을 때 초기 페이지를 로드 ajax 로 생긴 부작용 1. 목록 링크가 순수한 상태로 활성화되었으면 좋겠다. 2. 우리가 알고 있는 웹페이지는 주소가 페이지 별로 달라지는 걸 통해서 url로 공유할 수 있는 특징이 있었다. 해결책 1. 해쉬(hash) 방식을 적용 어떤 페이지는 URL 을 통해서 접근할 수 있다. 이런 경우 페이지 안에서 어떤 특정한 부분으로 접근해보자 ( * .. 코딩공부/WEB3 - Ajax 2019. 9. 11.
[3] Ajax 의 적용 Ajax 적용 목표 : Ajax 를 사용하여 각 목록의 본문 내용만 웹서버에게 요청하여 브라우저에 출력 Javakong Cafe 커피 차 빵 리팩토링 - 함수화 현재 각 a 태그의 onclick 이벤트에 fecth() 코드를 각각 집어넣어 중복이 존재한다. Javakong Cafe 커피 차 빵 코딩공부/WEB3 - Ajax 2019. 9. 10.
[2] fetch API ajax를 구현하는 여러 가지 기술 중 최신 기술인 fetch API를 이용. fetch API는 기존의 방식에 비해서 더 유연하고, 분명하다. 1. fetch API 기본 사용법 버튼을 클릭하면 부분적으로 내용을 가져와서 경고창의 내용, article로 보여지도록 코딩 fetch.html 파일 생성 버튼을 눌렀을 때 fetch API 동작하도록 코딩 css 파일 생성 fetch 버튼을 누를 때마다 css 파일을 웹서버로부터 다운받는다. css 파일 안의 내용이 경고창의 내용으로 보여진다. article 태그 내에 html에 대한 설명이 보여지게 하려면..? fetch('html') 로 수정하면 되고, response.text().then(function(text){ .... code .....}) co.. 코딩공부/WEB3 - Ajax 2019. 9. 9.
[1] Ajax 로 얻을 수 있는 장점 Ajax 의 탄생 "웹 페이지의 정보를 부분적으로 변경하고 싶다." 웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것은 효율적이지 않습니다. Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술입니다. 오늘날 검색엔진들이 추천검색어들을 제공하고 있다. a를 입력할 때, b를 입력할 때 마다 제공해주는 추천 검색어들을 웹페이지를 로드할 때 전부 다운로드한 것일까? 아니다. 브라우저와 웹서버가 서로 통신을 주고 받을 때 보는 개발자 도구를 확인 사용자가 j를 입력하면, 사용자 모르게 웹브라우저가 Ajax를 통해서 웹서버와 통신을 하고, 추천 검색어를 받아온다. 이 것이 가능한 것이 바로 'Ajax' 이다. 페이지 전체를 로딩하면 사용자의 관심이 분산될 수밖에 없.. 코딩공부/WEB3 - Ajax 2019. 9. 9.

티스토리툴바