Skip to content

Instantly share code, notes, and snippets.

@niceaji

niceaji/_test.md

Last active June 22, 2020 05:20
Show Gist options
  • Save niceaji/26ff806755efd9065370b9a5e4cc675e to your computer and use it in GitHub Desktop.
Save niceaji/26ff806755efd9065370b9a5e4cc675e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_test.md

1boon 서비스 만들기

1boon서비스의 JSON API를 이용해서 간단한 1boon 서비스 만들기

준비

  1. 기본 마크업에서 시작
  2. 크롬 확장프로그램 JSON Formatter 설치

API

  1. 트렌딩 https://1boon.kakao.com/ch/trending.json
  2. 이슈 https://1boon.kakao.com/ch/issue.json
  3. 엔터 https://1boon.kakao.com/ch/enter.json

파라미터

  1. https://1boon.kakao.com/ch/enter.json?pagesize=10&page=2
  2. https://1boon.kakao.com/ch/enter.json?pagesize=10&page=1&callback=done
pagesize = 한 페이지에 보여줄 글수 
page = 현재 페이지
callback = jsonp callback

주요 프로퍼티

data(Array)  리스트의 목록배열
  data[].title  제목
  data[].coverImage 이미지
  data[].path 링크  ( https://1boon.kakao.com/{path} 로 링크 걸어주세요)
  data[].totalView 조회수

미션

github

  1. private 레파지토리 생성 (daum-search)
  2. 의미에 맞는 commit 메세지 작성
  3. 완성된 웹앱 github pages로 배포

코드

  1. 1boon 채널 탭 UI구현 (트렌딩, 이슈, 엔터)
  2. 각 탭을 누를때마다 해당 API를 사용하여 결과 표시
  3. 각 탭이 선택되면 선택된 탭 class(active) 적용
  4. fetch 사용
  5. 가져온 데이터를 id=list 에 노출 ( 위에 주요 프로퍼티 에 정의된 내용 노출)
  6. 더보기 버튼 기능 구현 ( page파라미터를 이용 )
  7. 데이터가 로딩되는 동안 로딩마크업 보여주기 ( 기본마크업 참고)
  8. JS 에러 발생하면 안됨
  9. JS 네이티브 함수 사용, 최신 DOM 사용하여 구현
  10. JS 함수화
  11. 모듈별 외부 JS파일 사용
    • 인라인 CSS,JS 사용 안하기
  12. 웹팩,eslint,prettier사용

제출

Raw
base-1boon.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1boon</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>.list{margin:10px; padding:10px}</style>
</head>
<body>
<div class="container">
<h1>1boon</h1>
<div>
<ul class="nav nav-tabs">
<!-- 선택된탭:선택된 탭에 .active -->
<li class="active"><a href="#">트렌딩</a></li>
<li><a href="#">이슈</a></li>
<li><a href="#">엔터</a></li>
</ul>
</div>
<div id="list">
여기서 각 리스트 뿌려주기 <br><br>
http://1boon.kakao.com/ch/trending.json <br>
http://1boon.kakao.com/ch/issue.json <br>
http://1boon.kakao.com/ch/enter.json <br>
<!-- 로딩마크업: 로딩중일때만 표시 -->
<div class="text-center">
<span class="glyphicon glyphicon-refresh"></span> 로딩중
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-default">더보기</button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment