JavaScript location object 구조(Link Anatomy)

-
JavaScript location object 구조(Link Anatomy)

http://bl.ocks.org/abernier/3070589

댓글

댓글 쓰기

이 블로그의 인기 게시물

Next.js에서 자연스러운 Page Transition 방법

-
Next.js에서 자연스러운 Page Transition 방법 react-spring  과 "next-page-transitions"을 이용한 두가지 방법을 아래와 같이 예제로 구현했다다. 아래는, react-spring을 사용한 예제이다. 조금 시간을 두고 기다리면 결과를 볼 수 있다. 여기에서, "About", "Hello Day" 등을 클릭하면, 화면(page)이 겹치며(overlapped) 바뀌는 것을 알 수 있다. 아래는, Next.js의  Page Transition 은 " react-transition-group " 사용한 예제이다. 차이가 구분이 되는가? 둘다, 비슷해보이지만, next-page-transitions은 실제로 화면이 겹쳐지지 않고, 앞 페이지가 사라짐과 동시에 뒷 페이지를 나타내게 되어서 실제 DOM이 교체되어 버리기 때문에, 겹치며 사라지는 기능이 아니다. 반면, react-spring을 사용한 예제는, 앞 페이지가 뒷 페이지가 나타나서도 일시적으로 존재하는 구조로 되어, 겹치며 사라지는 화면을 구현할 수 있다. 실제 겹치며 사라지는 형태가 아니라, 페이지의 fade-in/out 정도와 같은 animation으로 충분하다면, 무엇을 사용하든 큰 문제가 되지 않는다. * 출처 - react-spring:  https://codesandbox.io/s/react-spring-nextjs-routes-q80c6 - next-page-transitions:  https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions
자세한 내용 보기

[flutter] Android - Package간 sdk version 등이 맞지 않아 오류가 발생하는 경우

-
[flutter] Android - Package간 sdk version 등이 맞지 않아 오류가 발생하는 경우 에러 문구: Launching lib\main.dart on sdk gphone64 x86 64 in debug mode... Running Gradle task 'assembleDebug'... ...\android\app\src\debug\AndroidManifest.xml Error: uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:some_package] ...\intermediates\merged_manifest\debug\AndroidManifest.xml as the library might be using APIs not available in 16 Suggestion: use a compatible library with a minSdk of at most 16, or increase this project's minSdk version to at least 21, or use tools:overrideLibrary="com. some_package" to force usage (may lead to runtime failures) FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:processDebugMainManifest'. > Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:some_package] ...\build\awesome_notifications\intermediates\merged_manifest\
자세한 내용 보기

Webpack copy-webpack-plugin ignore 사용할 때 주의 점(Important point when using the option "ignore" of the "copy-webpack-plugin")

-
Webpack copy-webpack-plugin ignore 사용할 때 주의 점(Important point when using the option "ignore" of the "copy-webpack-plugin") "copy-webpack-plugin"의 "ignore"가 정상 동작(내 생각에... -.-;;; ) 안해서, 도대체 뭘까 한참을 고민한 적이 있다. 다음을 주의하면서, ignore를 작성하면 정상적으로 동작한다. "path를 ignore할 경우: "from"을 기준으로 그 다음 path 부터 나열해야 한다." Path 구성 ~/my_app/resources/images/images # 모두 복사 ~/my_app/resources/images/images.no-copy # 모두 복사 안함 ~/my_app/resources/images/images.must/title.no-copy # 모두 복사 안함 webpack config (webpack.config.js) module.exports = { entry: { }, ... plugins: [ new CopyPlugin( [ { from: path.resolve('my_app', 'images'), to: path.resolve('my_app', 'images'), // or to: '', toType: 'dir', // optional ignore: [ 'images.no-copy', // "my_app/images/images.no-copy" 이하 모두("**/*.*") 복사 안함. 주
자세한 내용 보기