We are team, "noSleepPlace"

「UDTが何回かフィットネスウィークのトレーニングをしていない場合は、

睡眠コードトレーニングnosleepppplaceの有無。💀"

git repo : https://github.com/wecode-bootcamp-korea/25-2nd-NoSleepPlace-frontend
チームメンバー:フロントエンド3個、バックエンド2個
Front_End
またはMain、実施場所詳細ページ
成久さん、Kakao SNS登録、サイトリストページ
太陽Nav,Footer,購読ページ,購読クエリーページ
Back-End
承俊のKakaoソーシャルログインAPI、予約カレンダーAPI、予約申請と照会API
主賢商品リストAPI(フィルタリング、検索、ソート)、商品詳細API
パブリックデータ構築、データモデリング
プロジェクト期間:10/18～10/29
コラボレーションツール:Trlo、Github、Slack
テクノロジースタック:react.js-スタイル化コンポーネント、クリック、データセレクタライブラリ

Collaboration

1.プロジェクトが始まり、計画会議が行われた。

2週間のプロジェクト期間中、実際のウェブサイトと同様の開発を行うのは不合理であるため、どのような機能を実現するかを検討した.初めて同じ機能に比べて体験が異なることが決定したので、一般的な登録会員費の他にKACA登録を実施.

フロントエンドとバックエンドのデータ構造について説明します.

毎朝11時に毎日立ち会議を行います。

進捗と当日それぞれのTaskを共有し、ブロッキングを共有する.

👨‍👨‍👦‍👦 よりスムーズなコミュニケーションと進行のため、私たちのグループは午後も頻繁に会話を行い、家に帰る前に短い5分間の明日の午前中の会議を行いました.

3. See U Tommorrow meeting.

平日

計画通りに進められず、反省すべき点があります.

を迎えるインターセプターの内容とサイズ、明日はどうしますか.

応援の一言

一日のスケジュールを整理しているショートメッセージがあります.
自分でも整理しておきましたが、
メンバーたちと状況を分かち合ったほうがいいと思います.
有意義な試みだと思います.

個人目標

functional componentとstyled-conntを使用してUIを実現します.

スライドバーとカレンダーを使用して所定の機能を実現するライブラリ.

ホームページ

Slider Libraryを使用する押しボタンスライド機能

を実現する.

を使用してパラメータを検索し、カテゴリボタンをクリックすると、商品ホームページ

に移動できます.

Category.js

重畳マッピングを用いてuiを構築し,カテゴリは固定データであるため,単独通信ではなく定数データとして接続した.

VerticalAd.js

slickライブラリを使用して、キー切り替えのスライドカテゴリと自動再生看板を作成します.

import React, { Component } from 'react';
import Slider from 'react-slick';
import styled from 'styled-components';

export default class SimpleSlider extends Component {
  play() {
    this.slider.slickPlay();
  }
  pause() {
    this.slider.slickPause();
  }

  render() {
    return (
      <VerticalAd {...settings}>
        <ImgWrap>
          <img alt="adImage" src="/images/coupon.png" />
        </ImgWrap>
        <ImgWrap>
          <img alt="adImage" src="/images/findPlace.png" />
        </ImgWrap>
        <ImgWrap>
          <img alt="adImage" src="/images/friend.png" />
        </ImgWrap>
      </VerticalAd>
    );
  }
}

const VerticalAd = styled(Slider)`
  margin: 200px auto;
  width: 1150px;
  border-radius: 10px;
`;

const ImgWrap = styled.div`
  display: relative;
  height: 157px;
  border-radius: 10px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 auto;
  }
`;

const settings = {
  dots: false,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 1500,
  slidesToShow: 1,
  slidesToScroll: 1,
};

slickライブラリを初めて使用するのはいくつかの困難に直面しました.
でも慣れてきて、滑らかな部分を別に作って整理しようとしています.

詳細ページ

このプロジェクトをコアとするカレンダーUI、保存機能!
実際、2日以内にホームページと詳細ページのレイアウトを迅速に完了し、ここにすべての時間と魂を投入します.ほほほ

Date-Pickerライブラリを使用して、カレンダーと時間選択ウィンドウを実装します.

const Time = styled(DatePicker)`
  width: 70px;
`;

slick,Date-Pickerの場合、
まずstyledコンポーネントを作成し、ライブラリであることを指定します.

論理はまだ完了していません...
気まずく見えるけど….

過去の日付と時刻を現在の時刻でスケジュールしない
無効化ロジックが実装されました.

フォーマット方法は、new DateおよびDATE FORMATをパラメータとして受け入れる.
DATE FORMAT形式に変換します.

パケットからサブスクリプションデータを受信し、サブスクリプションの重複を避けるために所定時間の無効化を実施したい.
この日のみタイムゾーンを無効にする機能はまだ実装されていません...
この期間は、他の日付でも無効になります.ううう
アルゴリズム解決能力.本当に重要です.

から名前が...名前を付ける...名前を付ける...上のコードもずいぶん修正されていて、その前に本当に...
「キーボードを触った瞬間から壊れていました.考えてみれば...名前を付けて「ちゃんとデザインして…」
はい......骨に完全に刻まれます.
論理が少し複雑でも、私が作ったコードでも、理解できない経験があり、涙を流しました.

の再包装はまだ完了していません.
プロジェクトが終わっても、Peer Reviewと再構築を行います.

終了時..。

初めてfunctional component、styledcomponent、Slick、Date-pickerライブラリを使って決定するのが良いと思います.これからも新しい技術や慣れない技術を使う可能性があるので、Juniorとして最大限の経験と勉強をしたいと思います.最初は難しくてプレッシャーがありましたが、使ってみるとstyledcomponentは本当に大きな発明でした.
scssを使うときも便利で、コードが非常に簡潔になり、メンテナンスに便利です.

styled-componentの便利さは理解できるが,ネーミングの重要性も考えられる.
最初に星コンポーネントを作成し、次の意味ラベルを書いてネストします.
「短いコードを作るために最善を尽くしました.指導者のコードコメント...」「メンテナンスが容易ではありませんので、できるだけネストを避けてください」.
名前がつけば可読性もスタイルも優先されます.感じました.
したがって,各造形要素にそれぞれの名前をつけるためには,想像以上に多くの名前をつける.
おもしろいおもしろい

slickライブラリはgooglingでインポートされ、ランダムに画面に表示されます.
猫を先に見たかったので、載せてすぐに造形開始.ライブラリにデフォルトCSSがあります.
それに触れて造形すればいいと思います私が作成したコードではないので、クラス名やタグ名を使用できます.
そうかもしれませんが、私たちは一つ一つスタイルを探して提供します.ここでは多くの開発者ツールを使用しなければなりません.
ここを押してそこを押して...へへへ...
そして他のチームと同じようにライブラリを書く動機でチャットしています...
node.をクリックします.cssに触れたらnodemodulesはgitignoreなので
チームメンバーはこれが適用されないことに気づいた...
基本cssはそのまま置いて、コピーして、スタイルコンポーネント内で修正します.
slickまたはDate Pickerは今後さらに検討した後、整理文を書く.

チームメンバーが実現したKakaoSocialの登録、キーワード検索、分類フィルタリング機能などの技術も共有され、これも個別に整理される.

まだ長い道がありますが、補足したい部分とおなじみの部分を造形素子とライブラリで埋めたいと思います.良い反応を使えば本当に開発しやすくなります