프로젝트/뉴스스탠드 (4) 썸네일형 리스트형 [기능 구현] requestAnimationFrame을 활용한 애니메이션 목표 - 뉴스스탠드 프로젝트에서 화면 상단의 뉴스 헤드라인이 5초마다 무한으로 롤링되는 애니메이션의 구현이 필요했다. - 즉, A, B, C, D, E라는 뉴스 헤드라인이 있을 때, 사용자에게 보여지는 헤드라인은 1개이며 처음에는 A가 보이고 5초가 있으면 B가 보이며 E 다음에는 다시 A가 보여야 한다. - 무한으로 E 다음에 다시 A가 나타나는 로직 또한 고민이 필요한 부분이었지만, 이번 글에서는 5초마다 다음 뉴스의 헤드라인이 애니메이션과 함께 나타나는 기능에 대한 내용을 다뤄보려고 한다. 문제정의 - JavaScript를 공부하면 일정 시간마다 반복되는 기능을 사용할 때 가장 먼저 setInterval() 메서드를 생각할 수 있고 나 역시 setInterval() 메서드를 사용하여 5초마다 헤드라.. 데이터 크롤링 및 json-server 활용 데이터 크롤링 - 뉴스스탠드 프로젝트는 네이버의 뉴스스탠드를 클론 코딩하는 프로젝트였다. - 처음 기획서를 보고 네이버의 뉴스 데이터를 어떻게 가져올 수 있을까 대한 고민이 생겼고, 동료의 도움으로 데이터 크롤링에 대해서 학습하고 사용했다. - 데이터 크롤링은 웹상의 정보들을 탐색하고 수집하는 작업을 의미하며 주로 규칙에 따라 자동으로 웹 문서를 탐색하는 컴퓨터 프로그램, 웹 크롤러(Crawler)를 사용한다. - 나는 네이버 PC 메인 화면에서 개발자 도구에서 DOM 요소를 선택하여 정보를 수집하는 방법을 사용했고, 실제 프로젝트에서 사용한 크롤링 코드와 db.json의 모습은 다음과 같다. // 데이터 크롤링 코드 const result = []; // DOM 요소를 선택하여 정보를 수집 docume.. Sass/Scss - 코드스쿼드 두 번째 개인 프로젝트인 News-stand를 CSS 전처리기 Sass/Scss를 활용했다.- 먼저 CSS 전처리기는 자신만의 특별한 syntax를 가지고 CSS 생성하며 중복 코드를 제거하고 재사용성을 높일 수 있다.- 여기서는 Sass/Scss를 사용하면 여러 장점들이 있지만, 실제 프로젝트에서 사용한 부분들을 다루도록 하겠다.믹스인(mixin)- 믹스인(mixin)은 코드 블록을 만들어 재사용 가능한 스타일을 정의할 수 있는 기능이다.- @mixin으로 선언하고 @include로 사용한다.- 다음은 실제 프로젝트에서 font 스타일을 정의하는 믹스인(mixin)을 선언하고 사용한 코드이다./* mixin 선언 */@mixin font($size, $weight) { font-size.. 옵저버 패턴 - 코드스쿼드 두 번째 개인 프로젝트인 News-stand를 진행하면서 옵저버 패턴이라는 학습키워드를 접하게 되었고, 프로젝트에 적용해보았다. - 옵저버 패턴은 프론트엔드 개발에서 자주 사용되는 디자인 패턴으로, 모듈간의 의존성을 낮게 하기 위해 사용된다. - 옵저버 패턴은 간단하게 말해 "구독"과 "발행" 개념으로 표현되며 View는 Model을 구독하고 Model의 상태가 변경되면, 이를 구독하고 있는 View의 렌더링 함수(혹은 등록해놓은 함수)가 실행된다. - 즉, Model의 상태가 변경함에 따라서 해당 Model을 구독 중인 View가 자동으로 렌더링이 되는 구조이다. Observer pattern 코드 및 사용 - 옵저버 패턴에서 옵저버를 구현해보자. - 옵저버는 다음과 같은 역할을 한다. .. 이전 1 다음
