- 👋 Hi, I’m @ksakae1216
- 👀 I’m interested in Angular
- 🌱 I’m currently learning Angular
- 📫 My blog is https://ksakae1216.com/
- 😄 My twitter is https://twitter.com/beltway7
angular2022's Introduction
angular2022's People
angular2022's Issues
ヘッダー、サイドナビ、メインの3パネル構成
mswの確認
-
リクエストURLの修正
https://myorg.com/api/api/loginとなっていてapiが1つで良い
→*/api/loginみたいにするので、ここは不要 -
postmanでapi callできるよう確認
→ postmanはダメだったけど、fetchは大丈夫だった -
ログインID、パスワードの組み合わせを複数持てるようにする
→ 複数は別に持たなくて良いか(現状、大丈夫) -
login-api.tsに直書きしてるから、別jsonファイルとかに持っておきたい
→ ここも別に今は対応しなくても良い
Material DesignのTokenを導入する
デザインやcolorのTokenを設定し、class定義で使えるようにする。
それぞれで幅や高さを指定しない
参照) 下記は color
https://m3.material.io/styles/color/the-color-system/key-colors-tones
GCPデプロイ環境だとクロスオリジンエラーが出る
ログイン画面作成
ログインボタンの横幅をログインID、パスワードと合わせて、ボタン下に余白を入れる
aタグの色をtext-cyan-700で統一したい
今は直接、classを指定
**管理したい
GCPデプロイ環境のURLをユニークにしたい
フォントサイズの統一
標準は16px
tokenをcookieにセット
複数のサービスを1回でcallする
Hubbleのserviceでたまにやってる
これを実装する
※他に良い方法がないか調査するのもあり
tailwindcssの適用
セッション切れの確認
cookieにdummyTokenを設定してる
これが30分で切れるか確認。
もしtokenが切れないなら、何かしら対応が必要
ログイン処理を作成
ログインボタン押下で、msw mockにapi callし、成功したらログイン後の画面に遷移
ログイン後の空ページを作成
HttpRequestにrootUrlの設定をする
開発環境だけなら、 http://localhost:4200/api/login みたいなコードをハードコードしても良いが、複数環境を想定しなければいけないので${rootUrl}/api/login
のようにしたい
login-container, storeのテスト追加
Cypress Update
featureをpushしたらGCPにデプロイされるが、mainにpull-req作成したらデプロイしたい
tableを作成
- ヘッダー固定でボディをスクロール(sticky header) -> done
- paging -> done
- ソート
- チェックボックス -> done
- 複数選択メニュー -> done
dependa-botの導入
pull-req作成時にテスト、lint, formatを動かしたい
GCPでも良いし、他のでも良い
container generateで作成されたcontainerをstandalone対応する
component storeも対応必要かも
mock作成
ログイン画面のテキストボックとカードの間にスペースが必要
ログインID、パスワードの両端と外側のカードの線がくっついてる
テキストボックスの外側に余白が必要
セッション切れのチェック処理を追加
tokenがcookieに存在するかチェック
top画面、その他の画面を作成した後でも良さそう
libs配下のフォルダをlibs/myorgに変更する
1つのアプリだけなら問題ないが、将来的に複数アプリになる場合に困るので、下記のイメージにする
現状
libs
|- feature-top
|- shared
変更後
libs
|- myorg
|- feature-top
|- shared
|- second-app
|- third-app
GCPにデプロイ環境を作る
pull-reqを作成したら、デプロイ環境ができるようにする
GithubのプルリクページでデプロイしたURLがわかる
下記を参考にやったが全然ダメだった。
https://cloud.google.com/run/docs/tutorials/configure-deployment-previews?hl=ja
また、いつか挑戦する
GCPでyarn installが遅い
- pnpmに置き換えられないか?
- GCPのPersistent Diskにキャッシュを置くことができそう(ChatGPTがそう答えてた)
- 他の方法
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.