•
기획/디자인 (주제선정 이유): 1. SPA route, 상태관리; 2. 유저 관리(auth), 외부 API 사용; 3. 왓챠 피디아 유저로서 사용하던 서비스를 직접 개발해보고 싶었음 (클론 코딩)
•
일정 > 마일스톤...? (계획한 일정, 실제 일정) - 옵션: 더보기, 반응형...
미달성 목표 및 도전 과제 :
•
로딩관련 스피너와 스켈레톤스크린
•
캐러셀 컴포넌트 통합
•
반응형
•
테일윈드
•
fetch→axios, 에러 처리 보완
•
전역 상태관리 시스템(auth)
•
찜하기 등 부가 기능
•
타입스크립트 적용
•
그래픽 요소가 많고 인터랙션이 많은 웹 페이지를 만들때 전환을 부드럽게 처리.
•
전환은 delay() 메서드로 일정 시간 후에 발생하도록 설정하거나 duration() 메서드로 일정 시간 발생하도록 설정할 수 있다.
D3는 데이터 기반으로 쉽게 데이터를 처리하는 것이 목적이다. 아래와 같이 selectAll로 특정 요소들을 선택한다음 원하는 스타일을 추가하면서 각각의 dataset 프로퍼티로 계산한 height도 지정해주었다.
$starsGraph.innerHTML = freq
.map(
(num, i) =>
`<span class="stars-graph-item
bar--color-${num === max ? 'most' : 'normal'}" data-val='${(num / max) * 100}' data-score="${i}">
</span>`
)
.join('');
d3.selectAll('.stars-graph-item')
.datum(function () {
return this.dataset;
})
.style('height', '5%')
.transition()
.duration(1500)
.style('height', d => d.val + '%');
JavaScript
복사
D3.js은 웹페이지를 실시간으로 수정과 삭제 그리고 시각화를 할 수 있습니다. 자바스크립트로 표현 하려고 하면 불필요하게 많은 코딩량을 추가해야 합니다. 하지만 이런 기본 문법에서 몇가지만 추가하면 다양한 표현이 가능 해집니다. 자주 사용되는 함수들을 깔끔하게 정리해서 만들어 놓은 라이브러리죠.
재밌는 것은 모든 표현을 D3.js로 할 수도 있지만 다른 css, javascript 표현을 같이 사용할 수 있습니다. 어떤 분들은 css와 javascript로 많이 하신분들은 일부분만 D3.js를 이용하시는 분들도 있고 어떤 분들은 아예 D3.js로 하신분들은 css, javascript에서 사용되는 표현을 잘 모르니깐 모든 표현을 D3.js 문법에 맞게 표현하시기도 합니다. 어떻게 표현하는 것이 좋다고 할 수 없고 그냥 자신이 편한 코딩으로 하시는게 가장 좋겠죠.
•
설계 : 폴더 구조 (트리로) + 컴포넌트 기능
•
package.json : 현재 프로젝트에 대한 정보 저장
•
index.html : 브라우저에서 서버로 루트 요청을 보낼 때 자동적으로 보여주는 파일
•
src/js
◦
/css : css 파일이 위치한 폴더
◦
/img : 이미지 파일이 위치한 폴더
◦
App.js : URL 라우팅 역할
◦
components : 모듈화나 재사용이 가능한 단위를 분리
▪
Wrapper.js : 헤더, 푸터, 로그인, 회원가입을 다른 페이지에 포함시키는 역할
▪
StarsGraph.js : 영화 상세 페이지 내 별점 그래프
▪
SimilarWorks.js : 영화 상세 페이지 내 비슷한 작품 섹션
▪
SearchResult.js : 영화 검색 페이지 내 헤더와 캐러셀 배치 + 클릭이벤트 바인딩
▪
MyScoredMovies.js : 마이페이지 내 헤더와 캐러셀 배치 + 클릭이벤트 바인딩
▪
MovieRanking.js : 메인페이지 내 헤더와 캐러셀 배치 + 클릭이벤트 바인딩
▪
MovieDetails.js : 상세 페이지 내 헤더, 코멘트, 별점그래프, 비슷한 작품 배치
▪
global : 재사용이 가능한 컴포넌트 분리
•
BoxOfficeRankingCarousel
•
HighestRankingCarousel
•
MovieCommentCarousel
•
MyScoredMoviesCarousel
•
SearchedMovieCarousel
◦
eventListeners : 공통 이벤트 핸들러 바인딩(?)
◦
index.js : App 컴포넌트를 새로 만들어주는 역할
◦
pages : 필요한 데이터를 받아오고 view를 배치하는 역할
▪
initialState : 초기 데이터를 제공하는 파일
◦
router.js : URL 라우팅에 따라 커스텀 이벤트를 발생 및 이벤트 캐치
◦
services : 비즈니스 로직을 처리하는 함수를 분리한 폴더
◦
utils : 유틸리티 함수를 분리한 폴더
•
webpack.config.js : 웹팩 설정 파일
패턴
•
backend : mvc
•
front : flux 단방향
•
구현
MVC에선 Controller가 Model을 조회하거나 업데이트를 하고, Model이 업데이트 되면 View는 화면에 반영합니다. 또한 View도 Model을 업데이트 할 수가 있어서 Model이 업데이트 되면 다시 업데이트 된 View가 또 다른 Model을 업데이트 하게 됩니다.이런건 복잡하지 않은 애플리케이션에선 문제가 되지 않을 수 있습니다. 하지만 복잡해진다면 이런 양방향 데이터 흐름은 기능이 추가 될 때마다 더욱더 구조가 어렵게 되어서 개발자도 관리하기가 무척 힘들어 집니다.
회고
회고
평
다른 조 관련
코드분리
협업 커뮤니케이션 - 문서 : 글쓰기
