카테고리 없음

Haker News Part4 , 6 , 7

martinooo 2021. 7. 30. 08:45
728x170

part 4 6 7은 코드 양이 별로 없어서 같이 업로드 하겠습니다!

일단 Element 요소로 UI를 만드는 것은 비효율적이기 떄문에 문자열을 통해서 UI를 구현하고 라우터만들어 페이지 이동을하고 메인에 paging 을 구현했습니다!

 

제 git에서 코드를 보실수 있습니다!!!

https://github.com/yoogukhyeon/FrontendProject1/tree/code6

boommm

NewsList 빈 배열을 만들어서 push로 문자열을 구현했습니다! 

그리고 라우터 부분에 hash를 통해서 페이지 이동을 구현했습니다! 

paging 

paging을 구현해보겠습니다 가장먼저 store에 currentPage 저장소를 만들어 줍니다

그리고 페이지 이동을 UI를 만들고 속성에 저장된페이지 이동 값을 넣습니다 

결과물이 잘나오네요!!! url를 보시면 페이지 이동으로 인해 3번이 찍힌 것을 볼수있습니다 

페이지 이동을 하면 숫자가 바뀌네요!!ㅎ

 

그리고 라우터에 페이지이동 라우터를 만들어줍니다!

 

이번 part에 중요한것은 indexOf 활용과 배열에 push 그리고 삼합연산자 입니다! 

이부분에 공부는 따로 올리겠습니다!

 

다음 part는 template을 활용해서 UI를 구현해보겠습니다!

그리드형