メモってます。 メモってます。

전체 글

• Virtual Dom vs Real Dom

  React 2023. 1. 15. 21:56

  domとは、document object model文書オブジェクトモデルの略字といいます。web applicationのUIをツリー構造で表したもの。 つまり、HTML要素をツリーで表したものをDOMを言います！！javascriptはこのツリーにアクセスして使用します。 real domはupdate要素は子要素をまたrenderするので、不要な仕事が増えてしまいます。例えばリストに１００のitemがあって、一つのitemに変更が起きたら、全てのリストをupdateしちゃいます！ virtual domはreal domの軽量コピー版domです。 reactでdomを更新しようとしたら、以下の流れで動きます １。全てのvirtual domがupdaeされる ２。update前のvirtual domと比較 ３。変更された分のみ、real domに反映する。

  Read More
• syntheticEvent

  React 2023. 1. 10. 21:52

  SyntheicEventとは イベントは、ブラウザ毎に動作が異なるケースがありますが Reactでは、Reactを使用するユーザーに一貫した経験を提供するためにSyntheicEventオブジェクトを 使用します。 SyntheicEventとブラウザののイベントはほぼ一緒ですが、全く同じものではありません。 SyntheicEventの特徴１ import React from 'react' export default function Event() { const handleButtonClick = (e) => { console.log('handleButtonClick'); } const handleMouseLeave = (e) => { console.log('handleMouseLeave'); console.dir(e); } const h..

  Read More
• Cannot read properties of undefined this

  React 2023. 1. 9. 16:03

  始めに ReactのClassComponentの中で、stateをalertする関数を作成し、文字をクリックするとその関数が 呼ばれるようにしたら、以下のエラーが発生。 Uncaught TypeError: Cannot read properties of undefined (reading 'state') コード import React, { Component } from 'react' export default class ClassComponent extends Component { constructor(props) { super(props); this.state = { date : new Date() }; } handleClick() { alert(this.state.date); } render() { return ( He..

  Read More
• State

  React 2023. 1. 8. 17:18

  Propsは純粋関数なので、値を変更してはいけない。 しかし、Comp内部で値を変更し出力したい時はStateを使用する。 Class ComponentではState LifeCycleがあり、その中でStateを管理してきましたが Functional Componentではhookが新しく出来てからはhookを利用してStateの管理することが可能になった。 Class Component ⇨ Functional Component componentDidMount useEffect componentWillUnmount useEffect this.setState const [date, setState] = useState(###); （最近のこと、そのため、Reactの勉強し始め たばかりの場合はFunctional Componentだけ覚えておいていい..

  Read More
• props③ - Extractions

  React 2023. 1. 8. 09:46

  not extraction component example const comment = { date: new Date(), text: 'I hope you enjoy learning React!', author: { name: 'Hello Kitty', avatarUrl: 'http://placekitten.com/g/64/64' } }; function Comment(props) { return ( {/*下のUserInfoの中にはdivタグとimgタグが混在していて、再使用のためにこの部分をextrate。*/} {props.author.name} {props.text} {formatDate(props.date)} );} extraction component example function Comment(prop..

  Read More
• JSX

  React 2023. 1. 6. 21:38

  JSX Javscrtipt XML 文字でもHTMLでもないJavaScriptの拡張文法で、HTMLをjavascript内部で使っうもの。 JSXはReact Elementを生成します。 ブラウザで実行前にbabelにてjavascriptに変換されます。 const customH1 = {text}; 簡単に言えば、React.createElementの簡便な表現！ JSXはcamelCase命名規約を採択しています！ BabelJS jsxをjavascriptが理解できるようにするComplier JSXがbabelにてcompilerされた後の様子 Rernderをすると、createElement()が呼ばれて、elementの内容はpropsにて渡されます。 複数のタグが存在する場合は、親タグが子タグを囲む必要があります。 jsxの中にjavascriptを使い..

  Read More
• BIエラー解決考え方

  EJB 2023. 1. 6. 18:46

  原因が分からないwlstのエラー件。 BIツールを実行したら、エラーが発生。 出力するエラー内容を見ても、oracle supportを見ても過去の実績がなかったエラー。 そのため、jad toolを使用して、ツールを逆コンパイルした。（ classファイルを逆コンパイルするツール） bi-migration-toolsファイルをjadにてclassを逆コンパイルする。 逆コンパイルしたjavaファイルを分析して、一番原因に近い関数を絞った。 その関数の中ではjavaの環境変数を使用して、コマンドを実行するロジック。 その環境変数を分析しに時間かかる。 解決： javaファイルの中で呼び出しているJAVA環境変数で構成されているコマンドが長すぎて、 時間がかかりそうだった。 JAVA環境変数で構成されているコマンドを出力する簡単なjavaプログラムを使って、 java xxx.java..

  Read More
• Fetch API

  React 2022. 12. 3. 15:44

  fecth란, 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다. (기본적으로 Request, Response가 내장 되어 있음.) fecth는 promise객체를 반환(비동기 처리의 결과물!) 기본 문법! fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data)); const [data, setData] = React.useState(null); const [error, setError] = React.useState(null); React.useEffect(() => { fetch( "https://raw.githubusercontent.co..

  Read More