casamia918

당신이 놓치고 있던 Reactive Programming에 대한 안내 (한글 번역)

The introduction to Reactive Programming you've been missing (Korean ver.)

(by @andrestaltz)

(orginal source: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)

---

이 튜토리얼은 비디오 시리즈도 있습니다

casamia918

React 란 무엇인가

HTML5 기반의 웹 어플리케이션 사용 사례가 늘어나면서, 자연스럽게 SPA 기술에 대한 관심도 늘어나고 있습니다. SPA의 시초는 Angular 였지만, 지금은 React와 Vue가 시장을 양분하고 있습니다. React를 대체하고자 하는 경쟁 라이브러리들이 하나 둘씩 등장하고 있긴 하지만, 아직 React는 왕좌의 자리에서 내려올 생각이 없어 보입니다.

저는 React를 주로 개발하는 사람입니다. 그런데 어느날, React가 무엇인지 제대로 이해하고 있는 사람은 생각보다 많지 않다는 것을 깨닫게 되었습니다. 제 주변에도 React 를 한다는 사람이 여럿 있었지만 리액트가 정확히 어떤 기술인지에 대해서 물어보면, 대부분 "UI Framework" "jquery 다음 세대" 이런 추상적인 얘기만 하면서 얼버무리기만 할 뿐이었습니다.

그래서 저는 잠깐 시간을 내어서, React 가 무엇인지 소개를 하고자 합니다. 글은 길지 않습니다. 하지만 이 글을 읽고나면 당신은 React가 무엇인지 명확하게 알게 될 것입니다.

자 그럼 시작해보겠습니다.

casamia918

keyword: material ui, mui, typescript, intellisense, vscode

microsoft/TypeScript#39326

microsoft/TypeScript#34801

When using mui with typescript, there is performance issue with vscode intellisense, because of type checking.

I've read the comments and found a clue that some csstypes given by mui might be source of issue.

casamia918

references

• A guide to creating a NodeJS command-line package
• How to use npx: the npm package runner

1. 호기심 발생

casamia918

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

casamia918

add to comment

casamia918

If you are facing the "ENOENT, no such file or directory" error message when using fs.createWriteStream, check your file name again.

In my case, the last character is not the last character of file name, but carrage return (\r)

I lost 3 hours to find this simple answer. So I leave this memo.

casamia918

/**
 * addLessLoader_forCRA5
 * customized addLessLoader of customize-cra for create-react-app@5.0.0
 *
 * CreatedAt : 2022-01-09
 *
 * Description: The customize-cra author copy getStyleLoaders codes from react-scripts@4.0.3 > webpack.config.js
 * But as react-scripts upgrade to version 5, they also upgrade postcss-loader, which causes change of options schema.
 * So, I re-copy getStyleLoaders codes from react-scripts@5.0.0 > webpack.config.js
 *

casamia918

I know you are searching to resolve securityError while working with image and html canvas. You might be first encountered this solution, which saying

"Set crossOrigin='anonymous' before image.src. and use image in onload event handler" (Related SO questions: https://stackoverflow.com/questions/25753754/canvas-todataurl-security-error-the-operation-is-insecure https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror )

So, you've already tried, but failed. right?

casamia918

// proxy server 
// ref: https://gist.github.com/m99coder/bc9120da4c54fa947466ce1e34c93f3a
// belows are only upload related code

const http = require('http');
const multer = require('multer');
const upload = multer({
  storage: multer.memoryStorage(),
  limits: {}
})