fork download 
  1. <script>
  2. export default {
  3.   name: "PostList",
  4.   data() {
  5.     return {
  6.       posts: [],    // 기사 객체 담을 배열
  7.       page: 1,      // 불러올 API page
  8.       blogNum: 16   // 불러올 데이터 개수
  9.     };
  10.   },
  11.   created() {},
  12.   methods: {
  13.     infiniteHandler($state) {
  14.         // 기사 데이터
  15.         let post = function(
  16.         index,
  17.         imageUrl,
  18.         postUrl,
  19.         title,
  20.         author,
  21.         authorThumbnailUrl,
  22.         writtenOn
  23.       ) {
  24.         this.index = index;
  25.         this.imageUrl = imageUrl;
  26.         this.postUrl = postUrl;
  27.         this.title = title;
  28.         this.author = author;
  29.         this.authorThumbnailUrl = authorThumbnailUrl;
  30.         this.writtenOn = writtenOn;
  31.       };
  32.       // 해상도에 따라 데이터 불러오는 개수를 다르게 함
  33.       if (window.innerWidth >= 1024 && window.innerWidth <= 1279) {
  34.         this.blogNum = 9;
  35.       } else if (window.innerWidth < 1024) this.blogNum = 4;
  36.       let request = new Request(
  37.         `/wp-json/wp/v2/posts?tags=4690&per_page=` +
  38.           this.blogNum +
  39.           `&page=` +
  40.           this.page +
  41.           `&_embed`
  42.       );
  43.       // 디코더 함수
  44.       const decoder = function(str) {
  45.         return str.replace(/&#(\d+);/g, function(match, dec) {
  46.           return String.fromCharCode(dec);
  47.         });
  48.       };
  49.       // API 데이터 전체
  50.       async function fetching() {
  51.         return fetch(request)
  52.           .then(function(response) {
  53.             if (!response.ok) {
  54.               throw response;
  55.             }
  56.             return response.json();
  57.           })
  58.           .catch(function(error) {
  59.             console.log(error);
  60.             // 더 이상 데이터가 없을 시 로딩 종료
  61.             $state.complete();
  62.           });
  63.       }
  64.       // posts에 post 객체 넣는 함수
  65.       async function pusher(post, posts) {
  66.         posts.push(post);
  67.         return posts;
  68.       }
  69.       // 각 데이터 post에 저장하는 함수
  70.       async function makeBlogData(idx, devIoJson) {
  71.         // 기사 index 0번부터 최신
  72.         post.index = idx;
  73.         // 순회하여 돌 아이템
  74.         if (devIoJson[post.index] == null) { // 데이터가 없다면 로딩 종료
  75.           await $state.complete();
  76.           return false;
  77.         }
  78.         let embedded = devIoJson[post.index]._embedded;
  79.         // 썸네일
  80.         if (embedded["wp:featuredmedia"] != null) {
  81.           post.imageUrl = embedded["wp:featuredmedia"]["0"].source_url;
  82.         } else
  83.           post.imageUrl =
  84.             "/wp-content/uploads/2018/11_1200x630.jpeg";
  85.         // 실제 기사 링크
  86.         post.postUrl = devIoJson[post.index].link;
  87.         // 제목
  88.         post.title = decoder(devIoJson[post.index].title.rendered);
  89.         // 작성자 이름
  90.         post.author = embedded.author["0"].name;
  91.         // 작성자 아이콘 썸네일
  92.         post.authorThumbnailUrl = embedded.author["0"].avatar_urls["24"];
  93.         // 작성 날짜
  94.         post.writtenOn = devIoJson[post.index].date.substring(0, 10);
  95.         // 객체 생성
  96.         let postData = new post(
  97.           post.index,
  98.           post.imageUrl,
  99.           post.postUrl,
  100.           post.title,
  101.           post.author,
  102.           post.authorThumbnailUrl,
  103.           post.writtenOn
  104.         );
  105.         return postData;
  106.       }
  107.       // 블로그 리스트 만드는 함수
  108.       async function postMaker(posts, blogNum) {
  109.         let devIoJson = await fetching();
  110.         for (let index = 0; index < blogNum; index++) {
  111.           let blog = await makeBlogData(index, devIoJson);
  112.           if (blog == false) return;
  113.           await pusher(blog, posts);
  114.         }
  115.       }
  116.       // 무한 스크롤 로딩 함수
  117.       async function loader(posts, page, blogNum) {
  118.         await postMaker(posts, blogNum);
  119.         await $state.loaded();
  120.       }
  121.       // 로딩 함수 실행
  122.       loader(this.posts, ++this.page, this.blogNum);
  123.     }
  124.   }
  125. };
  126.  
Runtime error #stdin #stdout #stderr 0.02s 16784KB
comments (?)
stdin 
Standard input is empty
stdout 
Standard output is empty
stderr 
prog.js:1:0 SyntaxError: expected expression, got '<':
prog.js:1:0 <script>
prog.js:1:0 ^
https://ideone.com/X6zKOi
language:
JavaScript (SMonkey 60.2.3)
created:
6 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!