hyunmoahn / notes Goto Github PK

Purpose

• Can implement code level for each issues.
• Visitor can know easyly to performing issues.

Todo

• Set config of storybook
• make design template to visualization
• deploy homepage on public url

Target MacOS

Needed

• scrcpy
• adb
• brew(installer on MacOS)

Setting

• Installation

brew install scrcpy
brew cask install android-platform-tools

Useage

• Connection using wire

// connect mobile device to your macOS
adb devices // check connection
scrcpy

• Connection using wireless

adb tcpip 5555
adb connect {mobile device IP}
adb devices  // check connection
scrcpy -s {mobile device IP}

Description

When using react-router, occur Maximum update depth exceeded error. So, it doesn't render anything.

Wrong Code

const { location } = this.props

<Switch location={location}>
  <Route path="/route/red" component={Red} />
  <Route path="/route/blue" component={Blue} />
  <Route path="/route/green" component={Green} />
  <Redirect to='/route/red' from="/route" /> // <-- this is point
</Switch> 

When I access /route path, Above error is occurred.

Correct Code

const { location } = this.props

<Switch location={location}>
  <Route path="/route/red" component={Red} />
  <Route path="/route/blue" component={Blue} />
  <Route path="/route/green" component={Green} />
  <Redirect to={{...location, pathname: '/route/red'}} from="/route" /> // <-- this is point
</Switch> 

I change type of to props of Redirect from string to object.

Todo

Error is disappear. But I don't know why error is disappear.
Need to find that Why does an infinite rendering occur when the Switch has custom location of props and the Redirect has string of to on props.

Description

When double tap <button>,<img> tag, browser is magnified.
If you want to block the magnification, add touch-action: manipulation; at CSS.

button {
  touch-action: manipulation;
}

Delete Referrer

• ex) Delete append current url using line share

const meta = document.createElement('meta')

meta.name = 'referrer'
meta.content = 'no-referrer'
document.getElementsByTagName('head')[0].appendChild(meta)

// share logic

meta.remove()

ScreenShot

After few minute, can get duration correctly

https://medium.com/trabe/react-syntheticevent-reuse-889cd52981b6

https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234

Description

When you have element that doesn't have height value like height: auto or height: 100% and parent doesn't have height specifically, It doesn't occur transition animation of css using height.

Solution

1. Set element(doesn't have specific height) max-height overly
2. Set transition: max-height .2s
3. Toggle between max-height: 0 and max-height: 700px(example)

** If max-height part of high is very high, should occur delay from max to min. Ref

Ref

https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de