yungblud

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Building

yungblud

module.exports = {
  webpack: {
    configure: (webpackConfig) => ({
      ...webpackConfig,
      module: {
        ...webpackConfig.module,
        rules: webpackConfig.module.rules.map((rule) => {
          if (!rule.oneOf) return rule;
          return {
            ...rule,

yungblud

Direct copy of pre-encoded file:

$ ffmpeg -i filename.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls filename.m3u8

yungblud

func launchLibrary() -> Void {
    guard let callback = self.globalCallback else { return }
    let fetchOptions = PHFetchOptions()
    fetchOptions.includeAssetSourceTypes = .typeUserLibrary
    fetchOptions.sortDescriptors = [.init(key: "creationDate", ascending: false)]
    self.fetchedAssets = PHAsset.fetchAssets(with: .image, options: fetchOptions)
    self.imageShowerViewController = ImageShowerViewController(fetchedAssets: self.fetchedAssets, options: self.options, callback: callback)
    
    guard let imageShowerViewController = self.imageShowerViewController else { return }
    PHPhotoLibrary.shared().register(self)

yungblud

Install libimobiledevice on Mac OS X
So you'd like to manage your iOS devices by command line?
You can use libimobiledevice tools for that.
Easy on Linux. Let's see how it is on Mac OS X.

You'll need to:
1. install Xcode
2. start Xcode and agree to it's license
3. install Xcode command line tools (Start Xcode, Go to Preferences -> Downloads tab)
4. install homebrew by this command (sudo password will be prompted)

yungblud

설치 할 항목

• Node.js : 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데에 사용됩니다.
• Yarn : 자바스크립트 패키지를 관리하기 위해서 사용됩니다. Node.js 를 설치하면 npm 이 설치되어서 npm 으로 해도 되긴 하지만, yarn을 사용하면 훨씬 빠릅니다.
• Code Editor (VS Code, Atom, ...) : 코드 에디터는 여러분이 좋아하는걸 사용하시면 됩니다. 저는 VS Code 를 사용하여 강의를 진행하겠습니다.

Windows

Node.js

https://nodejs.org/ko/ 에 들어가서 좌측 LTS 버전을 설치하면 됩니다

Yarn

https://yarnpkg.com/en/docs/install#windows-tab 에 들어가서 인스톨러를 사용하여 설치하세요.

yungblud

1. tsconfig

tsconfig.json 쪽에 baseUrl 속성이 들어가야 한다.

  "complilerOptions": {
    ...
    "baseUrl": ".",
    ...
 },

yungblud

yarn add @loadable/component
yarn add --dev @types/loadable__component

yungblud

1. 프로젝트 생성 및 깃 저장소 master 푸시.

mkdir react-webpack
yarn init -y
git init

https://gitignore.io 로 .gitignore 생성 .gitignore

yungblud

기본적으로 production에서만 service worker가 동작하게 되있음.

index.js

serviceWorker.register();