꾸준2

참고 사이트

스크롤 이동시 fixed
https://m.blog.naver.com/PostView.nhn?blogId=sin_uu&logNo=220456726774&proxyReferer=https:%2F%2Fwww.google.com%2F

슬라이드 이동
https://im-developer.tistory.com/97

메인페이지 레이아웃 잡기

1.막힌 부분

스크롤을 내릴때(스크롤위치가 300이상일때)

1. left메뉴가 전체 height를 출력못하고 짤림

2. left메뉴 position이 fixed로 변경되어서  center부분이 왼쪽으로 밀림

  $(document).ready(function(){
    $(window).scroll(function(){
      var scrollValue = $(this).scrollTop()
      if(scrollValue>300) {
        console.log(scrollValue)
        $(".left").css("position", "fixed");
        $(".left").css("top", "50");
        $(".left").css("left", "0");
        // $(".center").css("margin-left", "15%")
      } else {
        // $(".left").css("position", "relative");
        // $(".center").css("margin-left", "0%")
      }
    })
  })

1.문제 해결

1. 스크롤 300이상 일때

center태그 margin-left : 15%   -> position이 fixed로 변경되기때문에

left태그 top : 0   -> left메뉴가 전체 height를 출력못하고 짤리기 때문에

2. 스크롤 300이하 일때

center태그 margin-left : 0%로 원상 복귀

left태그 position : relative

  $(document).ready(function(){
    $(window).scroll(function(){
      var scrollValue = $(this).scrollTop()
      if(scrollValue>300) {
        console.log(scrollValue)
        $(".left").css("position", "fixed");
        $(".left").css("top", "0");
        $(".left").css("left", "0");
        $(".center").css("margin-left", "15%")
      } else {
        $(".left").css("position", "relative");
        $(".center").css("margin-left", "0%")
      }
    })
  })

2. 막힌부분

메인페이지와 게시물 리스트 페이지에서 출력할 content는 일정 문자열이 지나면 ...으로 표시할려고 했는데

데이터를 만들어두지 않아서 데이터 수정이 필요했습니다.

2. 문제 해결

          // axios.get 요청 끝났을때 상황
          if(state.insideData.length == insidePage.length) {

            // inside데이터 최신순으로 바꾸는 과정
            state.insideData.sort()
            console.log(state.insideData)

            // inside데이터 내용 부분 120글자 넘어가면 substr으로 자르기 - 게시물 리스트 페이지에서 사용할거
            state.listInsideData = JSON.parse(JSON.stringify(state.insideData))
            for(var k=0; k<state.insideData.length; k++) {
              state.listInsideData[k][6] = state.insideData[k][6].substr(0, 120)
            }
            console.log(state.listInsideData)

            // 120글자로 자른 데이터를 2개만 출력하는 부분 - 메인페이지에 최신글 2개만 출력하려고
            state.recentInsideData = state.listInsideData.slice(state.listInsideData.length-2,state.listInsideData.length)
            state.recentInsideData.reverse()
            console.log(state.recentInsideData)
          }

(블로그 리뉴얼)

분석

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개

주의 사항

- 페이지 최소 3개 이상

- 난이도 있는 자바스크립트 구현

- 퍼블리싱 소스 및 화면 구성

1단계

(블로그)

1. 메인페이지

(메인 상단)

- 메인 사진 3개 슬라이드 효과(각 메인 사진은 카테고리별 대표사진 1개씩)

- 해당 글 마우스 이동시 opacity효과 주기

(메인 중단)

- inside, trend, newsroom 카테고리별 상, 중, 하 레이아웃 구성

- 각 카테고리별 최신글 2개 화면에 표시

- 각 카테고리별 최신글 위에 페이지 이동 태그 만들기

(메인 하단)

- 회사소개, 이용약관 등등

- 개인정보보호정책, 이용약관 클릭시 페이지 이동

(메인 왼쪽 메뉴)

- 최신글, 인기글 화면에 출력

2. 게시물리스트

- 사진, 제목, 내용 순으로 레이아웃 구성

- 내용 일정 넘어가면 ...으로 대체

3. 게시물 페이지

- 똑같이 구현

(todo)

1. 할일 추가

   (배열.push) 사용

2. 할일 목록 조회

   (배열[0]~배열[?] html에서 반복문으로 출력)

3. 할일 수정, 삭제

   (목록에서 수정, 삭제 버튼 아이콘 사용해서 오른쪽에 위치시키고)

    수정 - 2번 내용에서 updata(index) 함수 호출해서 해당 인덱스 배열 내용 바꾸면 될듯 

    삭제 - 2번 내용에서 delete(index) 함수 호출후 splice(i, 1)

4. 할일 완료 처리

   (목록에서 오른쪽에 체크박스 만들어서 누르면 background : gray하고 

    새로운 배열에 .push 하고, 하단으로 내용 이동)

   이때 count 변수 만들어서 완료 버튼 누르면 count++

5. 완료 처리된 할일 전체 삭제 

   (오른쪽 하단에 해결한일 내용 부분 위에 전체 삭제 버튼 생성후 누르면 함수실행 시켜서 빈배열로 초기화)

6.  todo페이지 카테고리 전체/완료/미완료 카테고리 만들기

2단계

(todo)

- 블로그 오른쪽 하단에 기존 홈페이지와 비슷한 모양의 todo 아이콘 만들기

- todo 버튼 클릭시 오른쪽에 메뉴 div 태그 만들기

- vuex를 이용해서 1단계에서 사용했던 데이터 화면에 출력

- 일별, 시간별 카테고리 2개만들어서 두가지 종류의 todo 만들기

- todo페이지로 이동하는 버튼 생성

3단계

(todo)

- myInfo 카테고리 추가

- todo 완료한것과 미완료한것 데이터 chart.js로 차트 만들기 

번외

- 3단계에서 구현한 차트 주간, 월간 으로 사용할 수 있게 구현하는법 생각하기

- 수정 부분을 어떻게 처리할지 고민

- 지금은 vue로 구현하지만 javascript로 구현 할 수있게 공부하기