TIL044 CRA Settings

4998 ワード
React TIL テキストリンク
💁 CRA初期設定
Westagramチームが開始したCRAの初期設定を発表!Masterが行う場合はGit repoにプッシュし、残りのメンバーがクローンを作成し、ブランチを作成してから操作します.
📍 CRAのインストール
  • CRAをインストールするには、端末に次のコマンドを入力します.
    • 必要なフォルダ
  • に移動->npx create-react-appを介してプロジェクト
    • をインストールします.
    // 1. Desktop - wecode 폴더 진입
cd Desktop/wecode

// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react
    ✔️ npx? npm?
    なぜCRAをインストールするときにnpmではなくnpxを使用するのですか?
    npm
  • npmはnodeです.jsの依存性と管理パッケージのパッケージマネージャ.
  • 2npm installを実行することで、package.jsonファイルにパッケージを指定できます.
  • では、バージョン管理もサポートされています.
  • しかしいくつかの問題があります
    1.モジュールが更新されたかどうかを確認できません.
    2.更新を行うと変動し、他の項目にも影響します.
    3.CRAのようなボイラープレートには致命的です.
    • npx

  • 一方、npxはパケットを実行するツールであり、npm 5である.2バージョンからあります!

  • npxは以下の役割を果たす.
    1.まず、パスにデフォルトで実行するパッケージがあるかどうかを確認します.
    2.パス上であれば、そのまま実行します.
    3.そうでない場合、npxは最新バージョンのパッケージをインストールした後に実行されます.

  • つまり、モジュールをローカルに保存せず、最新バージョンのファイルを一時的にロードおよび実行するたびに、これらのファイルは失われます.

  • create-areact-appなどのボイラプレートモジュールに有効です.npxでcreate-act-appをインストールすると、毎回最新バージョンのみを取得してインストールするので、現在どのバージョンが使用されているか心配する必要はありません.どうせ最新バージョンしか使わないんだから!!!!(悟り)
    • 📍 React Routerのインストール
  • 反応ルータは、SPA反応器が1つのページ内に指定された経路で複数のページを表示するライブラリである.
  • をインストールするには、次のコマンドを使用します.
    • // 원하는 directory 이동 후 CRA 프로젝트를 설치 해주세요.
// ex. cd Desktop/wecode > npx create-react-app westagram-project  

$ npx create-react-app westagram-project
    📍 Sassのインストール
  • SASSは、CSSが起動する前に使用されるCSSプリプロセッサである.
  • CSSをより便利に使用するために作成されたライブラリです.
  • はもちろんWeb上では動作しないので、このように記述されたプリプロセッサは、Web上で動作可能な標準CSSにコンパイルされる.
  • このコンパイルには、node-sassをインストールするいくつかの方法があります.
    • npm install node-sass@4.14.1 --save
  • Yeonukは上位バージョンの設定時に上記の内容を書きましたが、筆者の場合は直接ダウンロードしても実行できます.ただ、すべてのチームメンバーが低いバージョンをインストールしているので、エラーを防ぐために低いバージョンもインストールしました.
    • 📍 .Eslintcacheファイル.gitignoreに追加
    // .gitignore
.eslintcache
  • .目的exlintcacheがプロジェクトの最上位パスで自動的に生成される問題を解決する.
  • exlintとは:ESLintはJavaScript構文のエラーにタグを付けるツールです.
  • .exlintcacheとは?eslintはファイルを保存するたびに適用され、eslintcacheファイルがある場合は、変更したファイルにのみ印刷が適用されます.
    • 💁 CRAフォルダとファイルの設定
  • ネクタイをプッシュする前に、フォルダを整理する必要があります.
    • 襟はファイルベースのプログラムなのでprを空のフォルダにアップロードするとファイルは表示されません.
  • にファイルを入れて、空のフォルダを防ぐ必要があります.
    • 📍 単一フォルダの作成
  • 名前のフォルダを作成し、結果をアップロードし、
  • フォルダにlogin、mainフォルダを作成し、js/scssファイルを追加しました.
    • 📍 共通コンポーネントの作成
  • navは汎用なので、コンポーネントフォルダに対応するフォルダとファイルが追加されます.
    • 📍 スタイルフォルダ
  • スタイルのフォルダに共通するreset.scss, common.scssが追加されました.
    • 📍 Routes.js
  • は,それぞれの結果に経路を付与する作業を行った.
  • login、mainには2つのページがあり、それぞれ異なる名前を付けています!
    • 📍 共通フォルダ
  • data、imagesフォルダが生成されました.
  • dataはmockデータを含み、画像はそれぞれのフォルダを生成する.
    • 💁 git git git
    以上のように作業が完了したら、襟に押してください!
    // add > commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."

// 설치한 CRA 프로젝트와 github repo를 연동시켜줍니다.
git remote add origin https://github.com/(해당 repo 주소 입력)

// 연동된 repository로 push 해주세요.
git push origin master

// remote master에 초기세팅 코드가 merge 되면 다른 분들도 clone 받고, branch 생성해서 작업 시작
git clone https://github.com/(해당 repo 주소 입력)
npm install > node-modules 폴더 생성(패키지 소스코드 생성)
git branch feature/name
    🙈 初期設定時の注意事項
    注釈
  • を必要とせず、ファイル
    • を削除する.
  • index.htmlファイルに不要なタグ
    • を削除
    アンドロイドベースの放送
    mysqlビッグデータ量時limitクエリー最適化