フロントエンドデベロッパーのメモ

スキル: HTML/Jade/Jinja2, CSS/SCSS, JavaScript(ES6), Angular, React,Next, Redux, Node, Express, Python, Flask, Postgres, Redis, MongoDB, Kafka, Knex, SQLAlchemy, React Native, EXPO, GraphQL/Apollo, REST, AWS, Heroku, Docker, CircleCI, SCRUM, XP, Vim, TDD

Error handling about Eureka on Intellij with Java

error list

  • ~/eureka/eureka.iml does not exist Please correct the file content

Just reopen Intellij again

  • Failed to bind properties under 'logging.level.com.netflix.eureka' to org.springframework.boot.logging.LogLevel This link helped.

https://stackoverflow.com/questions/62352998/failed-to-bind-properties-under-logging-level-com-netflix-eureka-to-org-spring

  • Error creating bean with name 'configDataContextRefresher' defined in class path resource [org/springframework/cloud/autoconfigure/RefreshAutoConfiguration.class]: Bean instantiation via factory method failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.springframework.cloud.context.refresh.ConfigDataContextRefresher]: Factory method 'configDataContextRefresher' threw exception; nested exception is java.lang.NoClassDefFoundError: org/springframework/boot/env/BootstrapRegistry

Spent enough time but no solution that I could find.

  • no jkd for module 'eureka'

This might help to solve with the below screenshot setting.

f:id:morita657:20200827160746p:plain
Project Settings > Modules

GraphQL on Spring Boot

REST vs. GraphQL

REST:

  • returns all of data points as designed by developer whether or not you need it.

GraphQL:

  • is flexible in return response
  • is a query language for API
  • is used to load data from a server to a client
  • enables client can specify when it needs
  • allows to provide aggregated data from multi data source with one call.

Packages

  • graphql-spring-boot-starter - This starter is very helpful because it will add and automatically configure a GraphQL Servlet that you can access at /graphql . This starter will also use a GraphQL schema library to parse all schema files found on the classpath. The starter will also set up an endpoint that can access POST requests.

  • graphql-java-tools - A helper library to parse the GraphQL schema.

source:

Udacity

画像のリサイズのために未だにGulpを使ってる

Gulpと言うと、数年前に開発プロセスを高速化するために流行ったのを覚えてる。Gulpを3Pdependencyと組み合わせることで、画像のリサイズや自動ページリロード、自動デプロイなどなど便利なことができてしまう。今ならそのほとんどの機能はwebpackで代用することができてしまうが、個人的には画像のリサイズは未だにGulpが便利なので使用している。 ここ数年は画像をいじる機会がなかったが、昨日突如その機会ができてしまったので改めて設定し直した。その設定プロセスやハマったエラーなどについてシェアする。 ます、過去に作成したgulpfile.jsをそのまま使えると思い、terminalでgulpを実行するとgulpは定義されてないと早速エラーが吐き出された。なので、gulp-cliをインストールしたわけだが、そうすると cannot read property 'apply' of undefined gulpとエラーが出た。まずはcliがインストールできない状態になっているので、対処するために npm uninstall gulp --global npm uninstall gulp-cli --global を実行。 その後、npm install --global gulp-cliを実行することでgulp-cliを再インストールができた。なお、この時にインストールしたバージョンはそれぞれ "gulp": "^4.0.2", "gulp-cli": "^2.3.0"

これでterminal上でgulpコマンドを認識できるようになったので、実際にtaskを作成していく。 今回の目的は画像のリサイズなので、リサイズと最適化で画像のバイトサイズを行う。 外部パッケージとしては、以下を使用。 "gulp-image-resize": "^0.13.1", "gulp-image": "^6.2.1"

実装コードは、 const { gulp, task, series, src, dest } = require("gulp"); const imageResize = require("gulp-image-resize"); const image = require("gulp-image");

function resize() { return src("img/*.png") .pipe(imageResize()) .pipe( imageResize({ width: 239, height: 180, crop: true, upscale: false, }) ) .pipe(dest("dist/")); }

function optimize() { return src(["img/*.png"]) .pipe( image({ optimizationLevel: 5, progressive: true, interlaced: true, }) ) .pipe(dest("dist/")); }

exports.default = series(resize, optimize);

で無事に画像のリサイズと最適化が行えました。

AWSでのシステムデザインのためにキャッチアップした知識

クラウドでゼロからサーバーありでのシステム構築する時に困っていたことが、物理サーバーのスペック選定やネットワーク関連の設計だった。なので、この辺りの知識を補うために何冊か本を読んでみたので、今回はその中でもよかった本について紹介する。

ネットワークや物理サーバーのスペック HTTP・TCP/IPに関しての知識は、クラウドサービスを構築する時には必須。 「マスタリングTCP/IP―入門編―」は、TCP/IPの全体像把握だけでなく、ネットワーク内のIPアドレス範囲の表記方法であるCIDRブロック、ゲートウェイ、異なるレイヤーでロードバランサー が必要な理由など、多くを学ぶことができた。

www.amazon.co.jp

3分間ネットワークは非常にお世話になった。マスタリングTCP/IPだけだと、まだまだTCP/IPの全体像しか把握することができず、一歩踏み込んだ知識を身につけようと思った時は、3分間ネットワークが頼りになった。どの記事も分かりやすく、かつ、詳しい説明がされている。 個人的には、DNSについては、色々とメモを取りたかったので物理本を購入したが、物理本も変わりなく素晴らしかった。本にも記載されているが、DNSはインターネットのインフラと呼ばれるだけあり、普段は意識することはないが、インターネットの根幹を射させる技術だ。この技術抜きでは、ドメインに関する知識や、どのように名前解決されているのかが理解できない、さらにDoS攻撃などに対してのセキュリティについての知識が曖昧になってしまう。

www.amazon.co.jp

「インフラエンジニア の教科書」「インフラエンジニア の教科書2」はインフラエンジニア向けの本だが、個人的にはネットワーク機器、SSL、ストレージ構成、各種攻撃方法について学ぶことができた。

www.amazon.co.jp

www.amazon.co.jp

また、大方の知識を身に付けた後に実際にシステム構築することで知識を経験と結びつけることにした。その時に参考にしたのが「Amazon Web Services 基礎からのネットワーク&サーバー構築」だ。この本では、AWSで実際にサーバーありでのサービス構築するわけだが、随所に今まで学んできたことのおさらいが含まれているので、忘れかけてる部分もキャッチアップすることができ、実際にどのように使われるかも学ぶことができた。また巻末に記載されたトラブルシューティング方法も非常に参考になった。特に、今まであまりなんとなく使っていたコマンドについて正しい使い分け方が記載されており、非常に勉強になった。

www.amazon.co.jp

counting sort

counting sortは最速の探索アルゴリズムの一つ。 time complexityはO(n+k)

配列は合計で3つ使用する。 探索対象の配列A、indexを記録しておくための配列C、出力用の配列Bの3つ。 配列Cでは、配列Aの中で出現した特定の要素の回数を配列Cのindex順に割り当て、且つそれまでに出現した回数と足し合わせる。

例 配列Aの中で出現した特定の要素の回数を配列Cのindex順に割り当て作業

A = [1, 3, 5, 3, 2, 5, 6, 7]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 1, 2, 0, 2, 1, 1]

且つそれまでに出現した回数と足し合わせる。

C = [0, 1, 2, 4, 4, 6, 7, 8]

出力配列Bに、右端の配列Aの要素から配列Cの位置を元に順々に割り当てる。一度使用されたCの要素は-1する。この作業を配列Aのindex=0になるまで続ける。 例 [1]

A = [1, 3, 5, 3, 2, 5, 6, "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 2, 4, 4, 6, 7, 8]

B index =

B = [ ]

[2]

A = [1, 3, 5, 3, 2, 5, 6, "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 2, 4, 4, 6, 7, 8>>>7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ , , , , , , , 7]

[3]

A = [1, 3, 5, 3, 2, 5, "6", "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 2, 4, 4, 6, 7>>>6, 7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ , , , , , , 6, 7]

[4]

A = [1, 3, 5, 3, 2, "5", "6", "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 2, 4, 4, 6>>>5, 6, 7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ , , , , , 5, 6, 7]

[5]

A = [1, 3, 5, 3, "2", "5", "6", "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 2>>>1, 4, 4, 5, 6, 7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ ,2 , , , , 5, 6, 7]

[6]

A = [1, 3, 5, "3", "2", "5", "6", "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 1, 4>>>3, 4, 5, 6, 7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ ,2 , ,3 , , 5, 6, 7]

[7]

A = [1, 3, "5", "3", "2", "5", "6", "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 1, 3, 4, 5>>>4, 6, 7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ ,2 , ,3 ,5 ,5 , 6, 7]

[8]

A = [1, "3", "5", "3", "2", "5", "6", "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1, 1, 3>>>2, 4, 4, 6, 7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ ,2 ,3 ,3 ,5 ,5 , 6, 7]

[9]

A = ["1", "3", "5", "3", "2", "5", "6", "7"]

C index = 0, 1, 2, 3, 4, 5, 6, 7

C = [0, 1>>>0, 1, 2, 4, 4, 6, 7]

B index = 1, 2, 3, 4, 5, 6, 7, 8

B = [ 1 ,2 ,3 ,3 ,5 ,5 , 6, 7]

quick sortについて

quick sortは最も高速な探索アルゴリズムの一つ。 最速でO(n)ただ最悪の場合はO(n2)にもなりうる。 partitionと組み合わせて使用する。 partitionは数列のランダムな位置から1ヶ所要素を決める。これをpivotと呼ぶ。pivotを数列の右端に移動し、残りの要素と比較しする。pivotより大きい要素の場合は左側へ、小さければ右側へと分別する。pivotを基準に左右に分割された数列の中で、さらにそれぞれpivotを決める。それぞれの数列の中で同様にpivotを基準に要素を左右に振り分けていく。この作業を繰り返し、最後に分割された数列を統合する。

基本的なデータ構造やアルゴリズムについて復習中

8月中旬の院試に向けて勉強してます。 自分の理解度を確認するためのメモ程度に記載してます。他の人が読むと図表も入ってないので、かなり読みにくい内容になってると思います。