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