괜찮아 잘하고있어 힘내

XMLHttpRequest 와 같은 비슷한 api가 존재한다. 하지만 새로운 Fetch API가 좀더 강력하고 유연한 조작이 가능하다. fetch API 는 최슨 브라우저에서는 사용가능하지만 오래된 브라우저에서는 사용할 수 없다. can i use 라고 구글에 검색해보자 fetch API 는 XMLHttpRequest를 대체하는 근대적인 방법이다. [fetch api polyfill] 과거 브라우저를 사용하는 사람들을 지원하기 위한 방법이 polyfill 이다. github.com/github/fetch github/fetch A window.fetch JavaScript polyfill. Contribute to github/fetch development by creating an account on..

list 파일에도 중복이 존재한다. list파일의 내용을 html,css,javascript,ajax 이런식으로 바꾸면 얼마나 간단할까 33) console.log(text); 를 사용해 text의 내용을 출력해 본다. fetch('list')를 해줬기 때문에 서버에 list파일을 요청하고 응답으로 list파일의 내용을 받았기 때문에 콘솔에 text를 출력해보면 list 파일의 내용들이 나오게 된다. list파일의 내용을 html,css,javascript,ajax로 간단하게 바꿔준다. 그리고 다시 console.log(text); 를 실행해 보면 바뀐 내용으로 콘솔에 출력된다. 컴마(,)를 기준으로 각각의 항목들을 원소로 하는 배열을 만들어 준다. [how to make array from string..

index.html은 데이터 이면서 로직이 같이 있다. 이부분이 데이터 이다. 물론 데이터 이기 때문에 언제든 바뀔 수 있다. 데이터가 바꼈다고 application을 뜯어 고쳐선 안된다. 이 부분을 잘라내서 list라는 파일을 만들고 붙여넣는다. 그리고 원래있던 태그에 id값으로 nav를 넣어준다. fetchPage()함수의 내용을 복사 붙여넣기 한다. 리스트라는 파일을 읽어서 거기에 있는 내용을 id값이 nav인 태그 안쪽에 낑겨 넣어라. 라는 뜻이다. 그런데 오류가 뜬다. innerHTML을 할 수 없다는 뜻이다. 33번 줄에서 nav는 태그 이름이 nav를 가리킨다. 우리가 원하는 것은 id 값이 nav인 태그이다. 그렇기 때문에 #nav 라고 적어줘야 한다. list파일에 ajax 부분을 추가하..

index.html로 돌아와 해쉬 공부한것을 적용한다. 현재는 링크 표시가 뜨지 않는다. 일반 글자처럼 보이고 주소창에 특별한 표식이 없다. 그점을 보완하려한다. 태그에 링크 값으로 해쉬를 적는다. #이라는것은 기본적으로 북마크 기능이다. 용도를 구분하기 위해 관습적으로 #!(해쉬뱅)로 사용한다. css 태그가 링크 표시로 변했고, css를 클릭하면 주소창 맨 뒤에 #!css 라고 변한게 보인다. javascript를 클릭하면 #!javascript로 바뀐다. 그런데 이 주소를 카피해서 누군가한테 공유했을때 그 사람이 저걸 클릭해서 들어왔을때 똑같은 화면을 보려면? 이 웹페이지가 시작될때 28) 만약 해쉬가 있다면 29) fetchPage()를 통해서 해쉬값을 주는데 해쉬값은 #!javascript 이니..

hash의 기능 : 북마크 기능 how to get hash from url javascript 15) 태그에 id값으로 url 뒤에 #을 붙여 찾을 수 있다. 8) 태그의 주소값에 #three를 넣어 링크를 걸어둔다. 링크를 클릭하면 3번째 태그로 화면이 전환된다. location.hash를 이용하면 현재 페이지의 해시 값을 알 수 있다. 그런데 #three중 #이 필요하지 않을 때가 있다. 문자 전체중 일부만 때서 쓴다 를 sub string 이라고 한다. 20) location.hash 뒤에 .substr(1)을 붙여주면 맨 앞글자 #을 제외한 three만 출력된다.

함수를 이용해 중복을 제거해야 한다. 태그 밑에 태그를 만들고 그안에 fetchPage 함수를 만들어준다. 코드를 재활용하기 위한 함수이며 fetchPage 함수의 매개변수로 name을 가져오고 fetch의 인자로 name을 사용한다. onclick=" " 부분에 함수명과 인자값만 넣어주면 굉장히 간략해 진다.

이제 index.html로 돌아와서 배운것들을 적용해 본다. onclick= " " 안에 부분을 수정해 주면된다. 22) fetch('html') -> 서버에 html파일을 요청 .then(function(response){ -> 요청이 끝나면 그때 익명함수를 실행한다. 그때 response라는 객체가 생성되고 이 response는 응답에 대한 자료들이 저장되어있고 활용할 수 있는 부분이 많다. 23) 몰라 24) 이 페이지 내에 article 태그를 선택하고 response와 연관있는 text에 있는 html문법을 넣는다.

1번과 2번 둘다 함수이다. 하지만 1번 함수는 이름이 없는 익명 함수이고 2번 함수는 이름이 있는 함수이다. 함수가 이름이 필요한 경우는 여기저기서 함수를 부를때 필요하다. 그래서 22번 줄에 then 안에서 독점적으로 사용할 함수이기때문에 사실 이름이 필요 없다. 그렇다면 원래 19번의 callbackme() 함수를 23번의 callbackme 함수로 바꿔도 똑같다. 그러면 callbackme라는 함수명의 내용만 가져다 써도 무관하다. 그래서 then 안에 익명함수를 넣어도 되는 이유이다. -----------------------------------------------------------------------------------------------------------------------..

fetch('html'); 이란 첫번째 인자로 전달된 데이터를 서버에게 요청하는 파일 이렇게 한 부분이다. 13) then 은 서버가 응답할때까지 다른일을 하게 한다. 22) .then(callbackme); -> fetch API 에게 응답이 끝나면 정의한 함수 callbackme()라는 이름의 함수를 실행시켜달라는 의미 20번과 23,24번줄에 콘솔창에 출력 문장을 넣고 실행해보면 서버에 html 파일이 요청되고, 콘솔에는 1,2, response end 순으로 출력된걸 볼 수 있다. 즉, 22) fetch('html')에 의해 서버에 html파일이 요청되고, then(callbackme)로 인해 맨 마지막에 callbackme 함수가 실행된다.

웹브라우저에서 자바스크립트를 이용해 웹서버에 접속하고, 정보를 가져오는 방법 즉, ajax를 공부한다. ajax를 구현하는 여러가지 방법 중 최신방법인 fetch API를 사용할것이다. fetch 버튼을 누르면 css의 데이터를 다운받고, css 파일에 담겨있는 내용이 경고창으로 나온다. 9) fetch('css') -> html이라는 파일에 있는 내용을 경고창으로 띄우고 싶다면 fetch(' ') 이부분에 html을 넣으면 된다. 11) 모든 작업이 끝난 다음에는 alert(text); 이 부분이 호출되도록 약속되어있다. 10) .then(function(text) 의 text와 11) alert(text)의 text라는 변수 안에 서버가 응답한 데이터가 들어가 있다. fetch('html')에 의해서..