Written by java-style
on 2021-10-06

javascript hacker new app 두개의 화면 웹앱 만들기

//xmlhtpp을 저장 할 저장소 생성 const ajax = new XMLHttpRequest(); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json' ajax.open('GET', NEWS_URL, false); ajax.send(); // 데이터 가져오기 //responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다. // 객체로 변환 json형식만 변환 가능 const newsFeed = JSON.parse(ajax.response); const ul = document.createElement('ul'); window.addEventListener('hashchange', function(){ const id = location.hash.substr(1); //id 값 가져오기 ajax.open('GET', CONTENT_URL.replace('@id', id), false); //replace 값을 대체해주는 함수 ajax.send(); const newsContent = JSON.parse(ajax.response); console.log(newsContent); }); for(let i =0; i< 10; i++){ const li = document.createElement('li'); //타이틀에 a태그 추가하기 const a = document.createElement('a'); a.href = `#${newsFeed[i].id}`; a.innerText = `${newsFeed[i].title} (${newsFeed[i].comments_count})`; li.appendChild(a); ul.appendChild(li); } //1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다. document.getElementById('root').appendChild(ul);

싱글 페이지 어플리케이션(SPA)

하나의 어플리케이션이 화면을 여러 개를 갖고 있고,

일반적인 앱처럼 화면을 계속 전환하는

현재 액티브한 화면을 페이지로 보여주는 형식을 SPA

//xmlhtpp을 저장 할 저장소 생성 const ajax = new XMLHttpRequest(); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json' ajax.open('GET', NEWS_URL, false); ajax.send(); // 데이터 가져오기 //responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다. // 객체로 변환 json형식만 변환 가능 const newsFeed = JSON.parse(ajax.response); const ul = document.createElement('ul'); for(let i =0; i< 10; i++){ const li = document.createElement('li'); //타이틀에 a태그 추가하기 const a = document.createElement('a'); a.href = '#'; a.innerText = `${newsFeed[i].title} (${newsFeed[i].comments_count})`; li.appendChild(a); ul.appendChild(li); } //1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다. document.getElementById('root').appendChild(ul);

이벤트

코드상으로 특정한 코드의 실행을 확정할 수 없는 경우가 많다

사용자가 언제 UI에 반응할지 알 수 없으니 그래서 등장한 것이 이벤트 시스템이 등장함.

#을 이용해 a태그 경로를 지정 하였다

a는 해시라고 하고

hashchange라는 함수를 이용하여 a태그가 바뀔때마다 이벤트로 호출하였다.

location.hash.substr을 이용하여 내가 원하는 값의 위치를 정하여 자르고 가져옴

replace는 값을 대체해주는 함수 사용

타이틀을 클릭했을때마다 div태그를 생성하여 h1태그로 출력

//xmlhtpp을 저장 할 저장소 생성 const ajax = new XMLHttpRequest(); const content = document.createElement('div'); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json' ajax.open('GET', NEWS_URL, false); ajax.send(); // 데이터 가져오기 //responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다. // 객체로 변환 json형식만 변환 가능 const newsFeed = JSON.parse(ajax.response); const ul = document.createElement('ul'); window.addEventListener('hashchange', function(){ const id = location.hash.substr(1); //id 값 가져오기 ajax.open('GET', CONTENT_URL.replace('@id', id), false); //replace 값을 대체해주는 함수 ajax.send(); const newsContent = JSON.parse(ajax.response); const title = this.document.createElement('h1'); title.innerHTML = newsContent.title; content.appendChild(title); console.log(newsContent); }); for(let i =0; i< 10; i++){ const li = document.createElement('li'); //타이틀에 a태그 추가하기 const a = document.createElement('a'); a.href = `#${newsFeed[i].id}`; a.innerText = `${newsFeed[i].title} (${newsFeed[i].comments_count})`; li.appendChild(a); ul.appendChild(li); } //1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다. document.getElementById('root').appendChild(ul); document.getElementById('root').appendChild(content);

from http://qweiop3334.tistory.com/36 by ccl(A) rewrite - 2021-10-06 22:01:12

Top