ag-grid-react는 통 패키지@ag-grid-community, @ag-grid-enterprise 스코프 하위는 모듈const onGridReady = useCallback((params: GridReadyEvent) => {
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: IOlympicData[]) => setRowData(data));
}, []);
*.atom.ts file superfix and a *State variable name superfix.yarn dlx @yarnpkg/sdks vscode whenever typescript, eslint, and prettier are released.create-* reference node_modules directly.nodeLinker and use it the same way I would with yarn 1, with no advantage.
Here's a list of use cases where you can get past the hype and actually use it for something useful.
Creating regular expressions usually involves a lot of testing. I usually put the desired text in regexr, regex101, and match the negative/positive lookahead from memory, and use negative/positive lookbehind, but often find that negative lookbehind is not supported by different programming versions/languages.
Now I ask ChatGPT. Suppose you want to extract the package name from the package update history below.
Hello GPT.
Can you give me a regex pattern for getting to-be result?
as-is:
Orignal content
to-be:
Refined string #1
Refined string #2
...and so on.
It will get it for you.
If you want your code to be documented, put it in and ask it to create a README.md.
Can you write a README.md with this code?
It will get it for you.
Let's create a Joi Schema with a TypeScript interface.
Pass in a raw query and ask it to create a query DSL and query helper syntax.
Pass in a query and ask it to generate a table schema query like the interface example above.
awesome is now live. https://github.com/f/awesome-chatgpt-prompts
I've been using hexo since 2016, and I love it because it has a lot of plugins and themes. Since 2019. As there are many other Static Site Generators, the advantages of hexo are no longer available. The updates of ecosystem libraries such as theme and plugin development have also decreased.
The stack was theme-dependent: ejs -> njk, less -> sass -> stylus. Crucially, it's a nodejs-based core, so even if I uploaded a troubleshooting, it was a waste of resources.
Docusaurus didn't have algolia search when it was 1-2 alpha. There was a shovel to swizzle and use the local search community plugin to attach it, and Korean did not work normally.
In 2023, version 2 was launched, the frontend stack was unified based on React, and it seemed like it was okay to proceed with this work.
date: 2023-01-10 09:00:00./2023/01/10/title in the URL.{
"themeConfig": {
"metadata": [
// ? https://search.google.com/search-console
{
"name": "google-site-verification",
"content": "g"
}
]
}
}
hexo new post "title" This command creates a post, but I needed a compatible command.yarn cmd new title to generate what looks like blog/2023/01/10/title.mdx as of today.import { slugize } from "hexo-util";.
{
"presets": [
"classic",
{
"blog": {
// path.resolve needed
"blogArchiveComponent": "./src/component/BlogArchiveDescendingPage.tsx"
}
}
]
}
tags: [tag1, tag2] and must satisfy this format.{
"organizationName": "gracefullight",
"projectName": "gracefullight.github.io",
"deploymentBranch": "main",
"trailingSlash": true
}
env:
GIT_USER: ${{ secrets.GIT_USER }}
GIT_PASS: ${{ secrets.GIT_PASS }}
{
"themeConfig": {
"colorMode": {
"defaultMode": "dark",
"disableSwitch": true
}
}
}
# hexo
\`\`\`language title
# docusaurus
\`\`\`language title="title"
{
"themes": [
"@easyops-cn/docusaurus-search-local",
/** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
{
"indexDocs": false,
"blogRouteBasePath": "/",
"hashed": true,
"language": ["en", "ko"]
}
]
}
getStaticProps, getServerSideProps 와 같은 메소드가 사라졌고, 양쪽이 fetch 로 통합이 되었다.app 내의 모든 로직은 Node.js 이다. 따라서 이런 로직이 가능하다.
import { hostname } from "os";
export default function Main() {
return <div>{hostname()}</div>;
}
이벤트를 바인딩할 수 없다.
import type { SyntheticEvent } from "react";
export default function Main() {
const handleSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
console.log("submitting");
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">submit</button>
</form>
);
}
Error: Event handlers cannot be passed to Client Component props.
<form onSubmit="{function}" children="...">
^^^^^^^^^^ If you need interactivity, consider converting part of this to a
Client Component.
</form>
대부분의 디자인 시스템 라이브러리는 ThemeProvider 로 테마 상태를 공유하고 Baseline StyleSheet를 전역에 넣어준다.
스타 일시트를 위해 RootStyleRegistry 란 HOC 만들어 Baseline StyleSheet 를 동적으로 넣어주면 초기화는 가능하지만,
문제는 Server Component 내에서 use 을 사용할 수 없으니 ThemeProvider 로 기능동작이 불가능하다.
어찌저찌 'use-client' directive 로 Client Component 로 설정한다고 하여도 Provider 로 인해 하위 모든 컴포넌트가 Client Component 로 동작해야할 것이다.
그래서 문서에서 다음과 같이 표기가 된 것으로 보인다.
If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like PostCSS or Tailwind CSS.
위 방식으로 mui/material-ui/examples/material-next-app-router-ts 예시가 추가되었지만, 이렇게 쓸바에 pages 폴더 라우트와 다를 게 없다고 생각한다.
개인적으로는 왜 이렇게 많이 클라이언트에서 렌더링해야해? 그냥 필요한 영역만 클라이언트에서 그려주면 되잖아? 라는 접근방식은 디버깅 관점에서 마음에 들진 않는다. 웹을 하나의 Client 관점에서 본다면, 설치의 유무만 다를 뿐 앱에서 서버에서 렌더링된 HTML을 받고 일정부분만을 Server Driven UI 로 가는거와 마찬가지다. 복잡도가 크게 증가한다.
이러한 시도는 이미 Dotnet, Laravel Livewire 등 다른 언어에서 많이 진행되어왔고, Remix 에서는 이미 잘 동작 중이다. 단지 React 를 서버에서 쓰기 위해 다시 MVC 시절로 회귀하려는지 모르겠다.
벤치마킹, 툴 테스팅, 엑셀 스트리밍, 맵 리듀스 등 여러가지 테스트를 위해서 빈 레파지토리를 시작해야하는 경우가 많다. 복사해서 사용하기 위해 기록해두자.
yarn init -2
yarn add -D typescript ts-node @types/node
yarn tsc --init
touch src/index.ts
code .
# package.json
"start": "ts-node src/index.ts"
협업 여부에 따라 commitlint, eslint, yarn plugins 등등..
UI 개발의 일반적인 문제
화면마다 매번 새로 디자인 되는 컴포넌트: UI의 파편화로 생산성 감소 새로 구현하는게 맘편해요...
디자인 일관성 다운 -> 중복코드 파편화 -> 유지보수가 어려운 UI 코드 무한루프
디자인시스템 구성요소
스펙을 가지고 스토리북 생성
디자인 시스템 가이드 정의 > 디자인과 개발에 동일한 컴포넌트 구현 및 사용 > 커뮤니케이션 비용 다운, 효율성 일관성, 퀄리티 증가
100명 이상 소통하기에 다른 문제가 생겼다.
<-> 기능 중심의 개발자 언어
스케치로 만들고 직접 리액트 컴포넌트를 수동으로 만들었다.
프레이머
언어가 다른것
왜 디자인을 다시 개발해야하는가? 프레이머로 커스텀 핸드오프 기능 구현
DST (Design Syntax Tree)
{
"elementType": "AmountTop",
"properties": {
"title": "",
"subtitle": "",
"button": {
"elementType": "button",
"properties": {
"Title": "",
"Type": "",
"Style": "fill"
}
}
}
}
디자인을 바로 코드로 옮기는 목표 달성
엄격함과 유연함
디자인 린터 (디자인 시스템 커버리지 계산기)
React + DST (46:20)
개인적인 의견: 엄청 빨라짐, 아직 롤업 플러그인 지원은 미비, 모든 Node 생태계가 러스트로 이동 중, swcpack 프로덕션 기대
개인적인 의견: 인포그래픽 아름다워서 공유용으로 적합.
Node.js (LTS) is compiled with -O2 instead of -Os which noticeably improves performance. 란 구문이 눈에 띄었다.# Compiling with O2 instead of Os increases binary size by ~10%
# (53.1 MiB -> 58.6 MiB), but also increases performance by ~20%
# according to v8/web-tooling-benchmark
# 테스트 당시 LTS === 14
FROM node:lts-alpine3.12
RUN mkdir -p /usr/src/app \
&& chown node:node -R /usr/src/app
WORKDIR /usr/src/app
COPY --chown=node:node package*.json ./
USER node
RUN npm install && npm cache clean --force
COPY --chown=node:node . .
EXPOSE 3000
CMD [ "node", "server.js" ]
# 테스트 당시 LTS === 14
FROM node:lts-alpine3.13
RUN mkdir -p /usr/src/app \
&& chown node:node -R /usr/src/app
WORKDIR /usr/src/app
COPY --chown=node:node package*.json ./
USER node
RUN npm install && npm cache clean --force
COPY --chown=node:node . .
EXPOSE 3000
CMD [ "node", "server.js" ]
컨테이너는 테스트되는 이미지만을 띄웠고, docker 4CPUs, 6G RAM 에서 실행했다.
autocannon -c 100 -d 40 -p 10 localhost:3000
부푼 기대만큼 결과가 같게 나왔으면 좋겠지만 결과 추가를 못할만큼 Latency, Req/Sec, Bytes/Sec 모든 수치에서 엎치락 뒤치락하는 모습을 보였다.
FROM alpine:3.13
RUN apk add --update nodejs npm
RUN addgroup -g 1000 node \
&& adduser -u 1000 -G node -s /bin/sh -D node \
&& mkdir -p /usr/src/app \
&& chown node:node -R /usr/src/app
WORKDIR /usr/src/app
COPY --chown=node:node package*.json ./
USER node
RUN npm install && npm cache clean --force
COPY --chown=node:node . .
EXPOSE 3000
CMD [ "node", "server.js" ]
fastify/benchmarks 로직으로 도커라이징하여 테스트해보았으나 비슷한 퍼포먼스를 보여주었다.yarn set version berryrm -rf node_modules package-lock.jsonyarn"postinstall": "husky install"npx --no-install 에서 yarn 으로 변경