最近 MERN Stack と呼ばれる技術スタックをを学んだ。
( MERN: MongoDB, Express, React, Node )
せっかく学んだので MERN な構成で Trello っぽいのをつくってみる。
段階的に作っていく。
① ToDoItem の CRUD
② ユーザの認証
③ Category の CRUD
④ ToDoItem を Draggable にする
⑤ Board の CRUD
⑥ ユーザの Board への招待
開発ログ
① ToDoItem の CRUD
2021/06/15
MERN のそれぞれはある程度わかったけど Express と React をどうつなげるのかよくわかってない。
とりあえずそれぞれで ToDoItem の操作をできるようにして、つなげ方ググりながら進めていこうと思う。
ちなみに ToDoItem は ToDo の一個一個を想定してる。
Express 側の Item の GET と POST はできるようになった。
https://github.com/RyuGotoo/trello-clone/commit/0083aac0f508d438e188ce354af5f5865f9eb91f
ちょっとルーティングの書き方で詰まったけど、いい感じ！
次は React 側の Get と Post を書いていく。
2021/06/16
React 側の GET と POST できた！
client と server をつなぐのに苦戦した。
勉強した教材に繋ぎ方までは入ってなかったんだよね。
MERN それぞれを勉強するって感じの教材だった。
でも、なんとかできた！
axios いいね。
フロントエンドは最近勉強し始めたばかりだから新しいことたくさんあって楽しい。
次は Item の UPDATE と DELETE を実装していく。
DELETE はできたけど UPDATE に苦戦中。
別ページに遷移してそこで編集するんじゃなくて、Trello みたいにテキストをクリックしたら編集が開始されるようにしたい。
contenteditable 属性をつければいけると思ってたけど、なんか動かなかった。
なんかそれようのライブラリが必要なのかな。
今回使う予定の技術スタック
MERN Stack (MongoDB, Express, React, Node)
mongoose
MongoDB Atlas
Material UI
やりたいけど今はやらない技術スタックもある。
Redux, Testing, CI/CD とか。
これらはまだ良くわかってなくて別途勉強が必要で、今後勉強する予定ではあるけど、今はやらないでおこうと思ってる。
とりあえず学んだことだけでなんか作ってみるのが必要な時期だと個人的に思ってる。
勉強は楽しいけどずっとやってても自分ではなにも生み出せないから、下手でも作ってみるのがいい気がしてる。
伏黒も下手な領域展開してたけど、あんな感じ。
ああいうのが結局成長にはいいんじゃないかなって思ってる。
だから、今回は Redux とか使ってないけど、勉強した知識を総動員してひとつアプリを作ってみる。