Cola? Gola! プロジェクトは。

コーラ.選びましょう.プロジェクトは東芝チームによるJavaScript実行時のNodejsとreact.これは、jsを使用する開発者がサービスを導入するために学習し、作業している小さなプロジェクトです.
このプロジェクトは心の3000元を目指して作られた.胸中3000元のアプリとは異なり、ユーザーがkakao APIに格納している店舗に基づいて、どのような種類のコーラを販売し、コメントを残すプロジェクトです.

メンバー＃メンバー＃

フロントエンド(2人)

me 📍

バックエンド(2個)

スタックの使用

Front-end

Back-end

コラボレーションツール

勤務期間

05.17-進行中

私の仕事(PRベース)

1.開発環境の設定

2.検索結果リストにインポート

3.メインスライダ機能の実現

4.スタックデータで地図タグを表示する

5.詳細ページを作成して通報する

6.個人ページの詳細な造形と反作用操作

7.カテゴリを選択してデータサーバに転送

8.ソーシャル・ログインの実施（フロントエンド・タスク）

9.ソーシャルログインバックエンドと連携して使用

プロジェクトを行うときの感想

一人じゃ井の中の蛙

フロントエンドの開発者を夢見る学生なら、誰もが聞くことができる「反応国ルール」の授業、Zero ChoのノードBUDDGRAMを通じて、サーバー全体とのデータ連動方法とコミュニケーション方法を知ることができます.だから私はOkkkyというコミュニティで一緒に開発したチームメンバーを募集するDong-jiチームに参加して、一員として開発した自信があります.
一人で勉強しているうちにチームプロジェクトに入って、本当に井戸の中の蛙だと感じました.SlakのKakaoTalkのようなサービスでコミュニケーションをとり,集合−都市などで非対話ビデオ会議を行った.またgit-flowが問題やprを発表するにつれて、多くの有意義な活動をすることができます.
見知らぬ環境に慣れるのは誰にとっても難しいことですが、協力の最大の楽しみは何かと聞かれると親切に答えてくれる人がいてよかったです.一人だと本当にフンフンして諦めてしまうかもしれませんが、いろいろな環境や分野の人と話をしたり、関心を共有していることや会話は、開発外でも非常に重要な部分です.

2.何でも企画から

天から与えられた天才開発者ではない以上、私が仕事をしている間に、コードで私の考えを一気に解いて問題を解決するのは容易ではありません.今回のプロジェクトを通じて、私は実際に多くの本を通じて勉強した部分を開発する必要があります.
例:
1.KACA APIによるキーワード検索データのマッピング操作
2.Kakao登録による登録データの保守
3.ユーザが飲料を選択した割合を計算し、棒グラフで表示するロジック
背中がある.
最初は天才開発者のように無条件に開発していましたが、本当に大変だと気づき、一つ一つ計画や分析を始めました.
ユーザが飲料を選択する割合を計算することによって、棒グラフ形式で表示される論理.
0.バックエンドのリクエストを分析します.

一度に思い出せないデータストリームについては,最初の整理を行い,その内容を詳しく紹介したため,論理を構築するのにあまり時間がかからなかったようである.
1.データの積み重ね、コメントリスト

// reviewList(리뷰 리스트)를 더미데이터로 가지고 있다.
export const reviewList = [
  {
    id: 1,
    storeName: '헤반트 범계점',
    userName: '윤성님',
    comment: '존맛탱 가게입니다 추천해요',
    category: '펩시',
  },
  {
    id: 2,
    storeName: '헤반트 범계점',
    userName: '도해님',
    comment: '튀김이 바삭바삭해용.튀김이 바삭바삭해용',
    category: '코카콜라',
  },
  {
    id: 3,
    storeName: '헤반트 범계점',
    userName: '진수님',
    comment: '여긴 왜 제로콜라 없나요?',
    category: '펩시',
  },
  {
    id: 4,
    storeName: '헤반트 범계점',
    userName: '준희님',
    comment: '펩시 제로 라임맛 최고',
    category: '펩시',
  },
  {
    id: 5,
    storeName: '헤반트 범계점',
    userName: '준희님',
    comment: '펩시 제로 라임맛 최고',
    category: '코카콜라',
  },
];

2.ReviewListを計算してペプシコーラの割合を返す関数

// 파라미터로 더미데이터인 reviewList를 받는다.
 export const calCategory = (reviewList) => {
  // 펩시 개수, 콜라 개수
  let pepsiArr = [];
  let cocaArr = [];

  reviewList.map((r) => {
    if (r.category === '펩시') {
      pepsiArr.push(r.category);
    } else if (r.category === '코카콜라') {
      cocaArr.push(r.category);
    }
  });
  return Math.floor((pepsiArr.length / reviewList.length) * 100);
};

3.calCategory関数の操作が完了したら、それをusStateに入れる

useEffect(() => {
    const categoryResult = calCategory(reviewList);
    setCategoryRate(categoryResult);
  }, [reviewList]);

4.この値を感情的支柱に渡す.

// emotion을 사용하였음

<MyGraph>
	<InnerGraph width={categoryRate} />
</MyGraph>

5.propsに値を渡して造形する

// width를 props로 전달받음
export const InnerGraph = styled.div`
  background: #bbdefb;
  width: ${(props) => props.width}%;
  padding: 8px;
  border-radius: 20px;
`;

適切な論理成果物の表示

3.話題は後悔しないで、私が満足するまで、よく...

最近任務を終えたPRは

9.ソーシャルログインバックエンドと連携して使用

はい.
プロジェクトが面と向かって行われていないため、すべてのチームメンバーはすべての論理を把握することが難しい.
そのため、意見の伝達に問題が発生しないように、より細かく書くように努力しています.
イベントの作成

フローチャート

追加ビデオ

少し時間がかかるかもしれませんが、論理学習を振り返ることもできます.

4.足りないと感じて勉強し直す

今回のプロジェクトを進めていく中で、「本当にjsだけを味わって来た」という思いを感じました.scopeに関する概念がないため,es 6環境に反するvarキーワードを書き散らすことは,関数がどのように返されるかについても正確な感覚がない.だからもっと基本に忠実で、jsを勉強しています.
また,授業中に学習したCookie<->セッションでログインを保持している部分のみで,今回はローカルストレージとJWTを用いてより深く学習することも可能である.サーバにAPIをaxiosに送信する場合,ヘッダファイルにトークンデータが含まれている部分も初めて行う.しかし、googling、bellog、各種ブログなどを通じて、先輩の先端開発者の様々な知識を提供しています.
勉強好きな環境はすべてそろっているので,実行に移せばよい.

n/a.結論

1.チームプロジェクト、決して軽視してはいけない

例えば,初めて試したもの(Kakao登録,Kakao検索キーワードなどのAPI)をサービスに適用するためには,知らない文書を読んで学習する必要がある.チームメンバー同士の約束なので、期限が決まっていれば、その期限内に解決するように努力すべきです.学習と挑戦の心理状態を備えてこそ、プロジェクトに良好な成果をもたらすことができる.

2.しかし、準備ができたら、どうしてしないのですか。

適切なプロジェクトを行い、対応するサービスを導入するプロセスは非常に複雑で困難です.しかし、そのように空き地でヘディングで学んだ知識は決して忘れないと思います.現在も開発中であり、上記のサービスの導入に努めています.本当に多くの苦難と逆境を経験して、今も多くのことを経験しましたが、本当に損をしないと思います.動機付けを含めた独自の計画を通じて、意志の弱さで失敗する決意を3日間維持することができる.
現在進行中のため、CRUD操作が完了した後、レビューを再作成します.その時になったら、分布の住所を含めます.😁