이어서 할 곳

GitHub - fc-micro-frontends/career-up at step18

REACT_APP_AUTH0_DOMAIN=dev-vcrmf0xuep020tri.us.auth0.com
REACT_APP_AUTH0_CLIENT_ID=27LLb4I9cIjiiQNSjbNIX9sQM1KECUfk
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000

➜ pnpm i

➜ pnpm build

posting 에서 프레그먼트 사용할 수 있도록 설정

// career-up/apps/posting/webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const Dotenv = require("dotenv-webpack");

const deps = require("./package.json").dependencies;
module.exports = (_, argv) => ({
  output: {
    publicPath: "<http://localhost:3001/>",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3001,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new Dotenv({
      path: "../../.env",
    }),
    new ModuleFederationPlugin({
      name: "posting",
      filename: "remoteEntry.js",
      remotes: {
        **fragment_recommend_connections:
          "fragment_recommend_connections@<http://localhost:5001/remoteEntry.js>",
        job: "job@<http://localhost:3004/remoteEntry.js>",**
      },
      exposes: {
        "./injector": "./src/injector.tsx",
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        "@career-up/shell-router": {
          singleton: true,
        },
        "@career-up/ui-kit": {
          singleton: true,
        },
        "@auth0/auth0-react": {
          singleton: true,
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
});

// career-up/apps/posting/tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "jsx": "react-jsx" /* Specify what JSX code is generated. */,

    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */,
    **"paths": {
      "fragment_recommend_connections/container": [
        "../../fragments/fragment-recommend-connections/src/containers/recommend-connections-container.tsx"
      ],
      "job/fragment-recommend-jobs": [
        "../job/src/fragments/recommend-jobs-container.tsx"
      ]
    }** /* Specify a set of entries that re-map imports to additional lookup locations. */,

    /* Interop Constraints */
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,

    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

// career-up/apps/posting/src/pages/page-home.tsx

import "./page-home.scss";

import React, { **Suspense**, useEffect, useState } from "react";
import Profile from "../components/profile";
import Post from "../components/post";
import WritePost from "../components/write-post";
import { createPost, getPosts, removePost } from "../apis";
import { type PostType } from "../types";
import { useAuth0Client } from "@career-up/shell-router";

**const RecommendConnectionsContainer = React.lazy(
  () => import("fragment_recommend_connections/container")
);

const RecommendJobsContainer = React.lazy(
  () => import("job/fragment-recommend-jobs")
);**

const PageHome: React.FC = () => {
  ...

  return (
    <div className="posting--page-home">
      <div className="posting--page-home-left">
        <Profile />
      </div>
      <div className="posting--page-home-center">
        <WritePost writePost={writePost} />
        {posts.map((post) => (
          <Post key={post.id} {...post} deletePostById={deletePostById} />
        ))}
      </div>
      <div className="posting--page-home-right">
        **<Suspense fallback={<div>Loading...</div>}>
          <RecommendConnectionsContainer />
        </Suspense>
        <Suspense fallback={<div>Loading...</div>}>
          <RecommendJobsContainer />
        </Suspense>**
      </div>
    </div>
  );
};

export default PageHome;

// career-up/apps/posting/src/pages/page-home.scss

.posting--page-home {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin: 0 auto;
  max-width: 1128px;
  padding: 16px;

  .posting--page-home-left {
    display: flex;
    flex-direction: column;
    width: 225px;
  }

  .posting--page-home-center {
    display: flex;
    flex-direction: column;
    width: 555px;
    gap: 10px;
  }

  .posting--page-home-right {
    width: 300px;
    **display: flex;
    gap: 10px;
    flex-direction: column;**
  }
}

➜ pnpm dev

최종

GitHub - fc-micro-frontends/career-up at step19