1일차

(블로그 리뉴얼)

분석

1. 블로그의 게시글은 서버와 통신하여 데이터베이스에 있는 데이터를 가져온 것이라고 생각해서 axios를 이용해 데이터를 요청해야 겠다고 생각했습니다.

2. 공통적으로 사용하는 데이터 == [제목, 작성 날짜, 업데이트 날짜, 내용]

 

1. 막힌 부분

(메인페이지, 게시물 리스트 페이지, 게시물 페이지)

3페이지에서 공통적으로 사용하는 데이터는 처음에는 게시물 리스트 페이지에서 모두 가져올수있다고 생각하였는데

내용부분에서 특정 문자길이를 넘어가면 ... 처리를 하는것을 확인했습니다. 그렇기때문에 내용은 모두 얻어올수 없었습니다.

 

1. 문제 해결

게시물 페이지에서 데이터를 axios로 받아왔습니다.(하지만 이 부분에서 문제가 또 생겼습니다.)

 

2. 막힌 부분

게시물 페이지의 URL 주소

ex)

blog.sinsiway.com/newsroom/406/

blog.sinsiway.com/newsroom/52/

 

인덱스가 규칙적이지 않았지만 1000을 넘기지 않았기때문에 반복문에서 1000번까지만 돌리면 된다고 생각했지만

요청을 너무 많이해서 ip블락을 당했습니다..

 

2. 문제 해결

해당 URI의 인덱스를 배열로 저장하여서 [368, 352, 304, 171, 315]

배열의 인덱스로 반복문을 돌려서 더이상 ip벤을 받지 않았습니다.

    getInside({state, commit}, data) {
      // inside 게시글 총 갯수 index 배열에 담아두기
      var insidePage = [368, 352, 304, 171, 315]

      // 반복문을 통해 모든 게시글 크롤링
      for(var i=0; i<insidePage.length; i++) {
        axios.get('http://blog.sinsiway.com/inside/'+insidePage[i]+'/')
        .then(res => {
          var $ = cheerio.load(res.data)

          // title == 제목
          // published == 게시글 작성 날짜
          // updated == 게시글 업데이트 날짜
          // content == 게시글 내용
          var title = $('#content > div:nth-child(2) > article > div > h1').text()
          var published = $('#content > div:nth-child(2) > article > div > p > time.published').text()
          var updated = $('#content > div:nth-child(2) > article > div > p > time.updated').text()
          var content = $('#content > div:nth-child(2) > article > div > div.entry.themeform > div.entry-inner > p').text()

        }) //axios 요청 끝
      } // 반복문 끝
    }, // insideData함수 끝

 

3. 막힌 부분

axios는 비동기로 처리하기때문에 작성 날짜 최신순으로 요청을 했지만 배열에 저장되는것은 먼저 처리가 되는 순서로 배열에 저장 되었습니다. 

 

3. 문제 해결

그래서 작성날짜의 년도/월/일 을 따로 변수에 slice함수를 사용하여 저장하고

모든 요청이 끝나고 배열에 변화가 없을때 sort함수를 이용하여 오름차순으로 데이터를 변경했습니다.

          // 날짜별로 게시글을 표현하기위해서 날짜 숫자만 출력
          var checkYear = "";
          var checkMonth = "";
          var checkDay = "";

          for(var j=0; j<published.length; j++) {
            if(published[j]>=0 && j<5) {
              checkYear += published[j]
            } else if(published[j]>=0 && j>5 && j<7) {
              checkMonth += published[j]
            } else if(published[j]>=1 && j>7 && j<11) {
              checkDay += published[j]
            }
          }


          state.insideData.push([checkYear, checkMonth, checkDay, title, published, updated, content])

          if(state.insideData.length ==5) {
            state.insideData.sort()
          }

 

 

 

 

(결과물)

1. inside 카테고리 데이터

2. newsRoom 카테고리 데이터

3. trend 카테고리 데이터

 

내일 할일

- 메인페이지

1. 메인 사진 카테고리별 최신글

2. 메인 중앙 카테고리별 최신글 2~3개