- 기본 마크업에서 시작
- 크롬 확장프로그램 JSON Formatter 설치
- 총 20개의 콘텐츠 묶음
{
"id": 문서ID,
"title": 콘텐츠 제목,
"img": 콘텐츠 대표 이미지,
"cp": CP,
"url": 콘텐츠주소
},
- private 레파지토리 생성 (contents-tab)
- 의미에 맞는 commit 메세지 작성
- https://github.com/{본인의ID}/contents-tab
niceajicollaborator로 레파지토리 초대
- 콘텐츠 탭 UI구현 (최근,많이본,실시간인기)
- 각 탭을 누를때마다 해당 JSON을 사용하여 결과 표시
- 각 탭이 선택되면 선택된 탭 class(active) 적용
- 가져온 데이터를 id=list 에 노출
- 로딩이미지 효과: 각 콘텐츠 노출시에 로딩이미지를 1초 노출후에 콘텐츠 노출
- API에서 제목, 링크, 이미지, CP 를 적절히 표시
- 처음 10개만 보여주고 더보기 클릭이 남은 10개 보여주기 (로딩이미지 효과도 구현)
- JS 에러 발생하면 안됨
- JS 네이티브 함수 사용, 최신 DOM 사용하여 구현
- ES6 사용
- JS 함수화
- 5월 2일 0시까지 제출
- 제출: https://forms.gle/hPqY4Z6XR1vCKa3s8
- 최초 한번만 제출 가능
- 여기서만 받을께요.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent