Crab Book🦀
수집해조
이한결 임소형 박준규 김정호
❗️Problem
to be solved 🤯

💡Idea
Kanban board


💡Idea
Open Graph protocol
<meta property="og:title" content="Example title of article">
<meta property="og:site_name" content="example.com website">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/example-title-of-article">
<meta property="og:image" content="http://example.com/article_thumbnail.jpg">
<meta property="og:image" content="http://example.com/website_logo.png">
<meta property="og:description" content="This example article is an example of OpenGraph protocol.">
💡Idea
Open Graph protocol


💡Idea
Initial plan

Feature
Scrap web article📝

Feature
Easy categorizing🗂

Features
Link to page🔗

Feature
Personal recommendation⭐️

Feature
Analyzing Scrap📊

Skills
Bundler📦

Skills
Transfile 🔄

Skills
Package📦





Challenge
SPA(Single Page Application)❓


Fake SPA with Vanilla🍦
Challenge
Drag & Drop🖱

const createLinkCard = data => {
const $fragment = document.createDocumentFragment();
const linkCard = new LinkCard(data);
const $linkCard = linkCard.cardElement;
$linkCard.draggable = true;
$linkCard.classList.add('kanban__item');
$linkCard.dataset.id = data.id;
$linkCard.ondragstart = e => {
e.dataTransfer.setData('text/plain', data.id);
};
$fragment.appendChild($linkCard);
if (data.id !== 0) $fragment.appendChild(createDropZone());
return $fragment;
};Challenge
Class component for "Reusable"♻️

Challenge
Crawling🪝


Challenge
Chart.js


Demo 🎬
Review
DB - firebase

Review
Feature - Login

Review
Responsive layout


Review
CORS, Proxy

느낀점
- 초기 기획의 중요성
- 라이브러리 사전조사의 필요성
- Client-side task, Server-side task
- 결측치 이상치에 대한 예외 처리의 필요성
- RESTful API 설계의 어려움
Crab book
By hoya
Crab book
Scrapbook of online articles
- 116