pipx를 통해 poetry를 설치한다. python 3.12.3 을 사용한다는 메세지가 출력된다.
pipx install poetry
// result message
installed package poetry 1.8.3, installed using Python 3.12.3
These apps are now globally available
- poetry
poetry를 실행한다.
poetry
// result mesage
Poetry (version 1.8.3)
Poetry 다음 Tab으로 명령 목록 보기
oh-my-zsh 설정이 .zshrc 에 있음을 가정한다
// .zshrc 에서 ZSH_CUSTOM 주석 풀고 계정 폴더 밑으로 oh-my-zsh 설정
# Would you like to use another custom folder than $ZSH/custom?
ZSH_CUSTOM=/Users/peter/oh-my-zsh
// 저장후 변경 적용
. .zshrc
// 폴더 생성
mkdir $ZSH_CUSTOM/plugins/poetry
oh-my-zsh 의 plugins 에 poetry 추가
// .zshrc oh-my-zsh의 plugins 에 poetry 추가
plugins=(git poetry)
// .zshrc 변경 적용
. .zshrc
테스트 "peotry in" 까지 입력하고 tab key를 치면 아래와 같이 init, install 등의 poetry 명령 목록이 출력된다.
$ . .zshrc
$ poetry in
init -- Creates a basic pyproject.toml file in the current directory.
install -- Installs the project dependencies.
Poetry 통한 프로젝트, 패키지 추가
[1] Poetry 기반 프로젝트 생성
- poetry new [project-name]
poetry new ai-agent
[2] 프로젝트로 이동해서 가상환경을 프로제트내로 설정한다.
poetry config virtualenvs.in-project true
[3] poetry 프로젝트 가상환경으로 변경
poetry shell
[4] ai_agent 패키지 폴더에 __main__.py 추가
- 폴더 지정으로 run 하기 위해 __init__.py 위치에 __main__.py 파일을 추가한다.
- .env 파일 생성후 KEY 값 설정
- 명령
- poetry shell 미수행시 : poetry run python [folder-name] 또는 [file-name]
- poetry shell 수행시 : python [folder-name]
// .env 파일
OPENAI_API_KEY=sh-proj-xsdhfdrerjelrelreahahhahahaahaha
// __main__.py 내역
import os
from dotenv import load_dotenv
load_dotenv()
print(f"[API KEY]\n{os.environ['OPENAI_API_KEY']}")
// 실행
poetry run python ai_agent
[API KEY]
sh-proj-xsdhfdrerjelrelreahahhahahaahaha
+ Host 앱이 되어서 portal의 exposed module을 async loading하여 사용한다.
Dashboard App에서 widget을 사용, Portal App 에서 Dashboard App을 사용한다
Portal App 모듈과 Micro App 모듈의 분리
- Micro App은 필요한 모듈을 Portal App (remote app) 으로 부터 로딩하여 사용한다. 따라서 Micro App에서 필요한 모듈을 package.json에 설정하여 npm install 하여 로컬에 설치 후 사용하는 것이 아니라, runtime에 로딩하여 사용할 수 있다.
- Micro App 개발시 참조하는 모듈을 로컬에 설치할 필요없이 개발을 진행할 수 있다.
- 즉, Micro Frontend의 개념을 적용하여 개발을 진행한다.
명령어 예
- host라는 host app이 자동 생성된다
- store 이라는 remote app이 자동 생성된다.
- @nx/react:host 의 명령어에 따라서 module federation 관련한 설정 내역이 자동으로 생성된다.
nx g @nx/react:host mf/host --remotes=mf/store
mf폴더 밑으로 host, store app 생성
- host app 생성파일들
+ main.ts 에서 bootstrap.tsx를 import 형식: project.json에서 main도 main.ts 로 설정됨 (기존은 main.tsx 하나만 존재)
+ module-federation.config.js 파일 생성: remote 설정
+ webpack.config.<prod>.js 파일들 생성
+ project.json: serve 의 executor가 @nx/react:module-federation-dev-server 로 변경됨
또는 remote app만들 별도로 생성할 수 있다.
npx nx g @nx/react:remote portal/store
- remote app 생성파일들
+ remote-entry.ts
+ main.ts 에서 bootstrap.tsx를 import 형식: project.json에서 main도 main.ts 로 설정됨 (기존은 main.tsx 하나만 존재)
+ module-federation.config.js 파일 생성: exposes 설정
+ webpack.config.<prod>.js 파일들 생성
+ project.json: serve 의 executor가 @nx/react:module-federation-dev-server 로 변경됨
host를 실행하면
+ 관련된 remote도 자동으로 실행된다. (remote는 project.json의 static-server의 port로 자동 실행된다.)
+ 즉, host app과 remote app이 동시에 구동된다.
nx serve mf-host --open
NX 기반 설정파일 이해하기
remote app 설정 파일들
- webpack.config.js
+ withModuleFederation은 node_modules/@nx/react/src/module-federation/with-module-federation.js 위치하고 있고, remote와 shared할 libraries를 자동으로 설정해 준다. 즉, remote빌드시 shared libraries는 external libs로 취급되어 번들파일에 포함되지 않는다.
+ nx 명령을 통해 생성한 remote app에는 webpack.config.js와 webpack.config.prod.js 파일이 자동 생성 및 설정되어 있다.
// 5개의 애플리케이션을 생성하고, SASS, webpack을 선택하여 생성한다.
nx g @nrwl/react:app micro-apps/dashboard
nx g @nrwl/react:app micro-apps/asset
nx g @nrwl/react:app micro-apps/management
nx g @nrwl/react:app micro-apps/system
nx g @nrwl/react:app micro-apps/user
패키지를 생성한다.
// SASS, jest, rollup 을 선택한다.
nx g @nrwl/react:lib web/login/default --publishable --importPath=@gv/web-login-default
새로운 패키지와 애플리케이션이 생성된 폴더에 모든 soucre files 을 copy & paste 한다.
버전업 이후 수정사항
React v17 -> v18 업데이트후 변경점. main.tsx 에서 root 생성 방법이 변경되었다.
// React v17
import * as ReactDOM from 'react-dom';
...
ReactDOM.render(
<Suspense fallback={<GVSpinner isFull />}>
<GVMicroApp />
</Suspense>,
document.getElementById('root')
);
// React v18
import * as ReactDOM from 'react-dom/client';
...
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<Suspense fallback={<GVSpinner isFull />}>
<GVMicroApp />
</Suspense>
);
AntD v4 -> v5 로 변경되면서 v5에서 cssinjs 방식을 사용하면서 *.less 방식이 사라졌다. 기본적인 reset.css만을 설정한다.
// styles.scss 에 reset.css 포함
// AntD reset
@import "~antd/dist/reset.css";
// project.json에 styles.scss 포함
"options": {
"compiler": "babel",
...
"styles": ["apps/micro-apps/dashboard/src/styles.scss"],
...
"webpackConfig": "apps/micro-apps/dashboard/webpack.config.js"
},
Webpack의 min-css-extract-plugin을 사용하면서 build warning 나오는 import ordering 메세지 제거하기
// webpack.config.js
module.exports = composePlugins(withNx(), withReact(), (config) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
// .tsx 에서 import 구문 ordering 경고 문구 발생 해결하기
// https://github.com/facebook/create-react-app/issues/5372
const instanceOfMiniCssExtractPlugin = config.plugins.find(
(plugin) => plugin.constructor.name === 'MiniCssExtractPlugin'
);
if (instanceOfMiniCssExtractPlugin) {
instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
}
return config;
});
Nx를 업데이트하면 기존의 workspace.json 파일을 사용하지 않는다. 그리고 webpack v5.* 버전을 사용한다. webpack v5는 Module Federation을 지원하므로 이에 대한 설정을 진행해 본다.
