Any application that can be written in JavaScript, will eventually be written in JavaScript
모든 태그 보기
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 파일 서픽스와 *State 변수명 서픽스를 갖게 했다.yarn dlx @yarnpkg/sdks vscode로 실행스크립트를 업데이트 해줘야한다.node_modules 를 직접 참조한다.nodeLinker를 주고 yarn 1 버전을 쓸 때와 똑같이 사용을 해야하는데, 아무런 어드밴티지가 없다.
코딩을 해준다라는 과대광고를 집어치우고 실제로 유용하게 사용할 수 있는 유스케이스들을 정리해보았다.
보통 정규식을 만드는데에는 박음질하듯이 많은 테스트가 필요하다. 주로 regexr, regex101 사이트에 원하는 텍스트를 넣고 기억에 의존하면서 Negative/Positive Lookahead 를 맞추고, Negative/Positive Lookbehind 를 사용하다가 Negative Lookbehind가 프로그래밍 버전/언어별로 지원여부가 달라 찾게되는 경우가 많다.
이젠 ChatGPT에 물어본다. 아래 패키지 업데이트 내역에서 패키지명을 추출한다고 해보자.
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.
알아서 가져다 줄 것이다.
내 코드의 문서가 쓰고 싶다면 코드를 넣고 README.md 를 만들어달라고 하자.
Can you write a README.md with this code?
알아서 가져다준다.
타입스크립트 인터페이스로 Joi Schema 를 만들어달라고 하자.
로우 쿼리를 전달하고, 쿼리 DSL, 쿼리 헬퍼 구문을 만들어달라고 하자.
쿼리를 전달하고 위의 인터페이스 예시처럼 테이블 스키마 쿼리를 생성해달라고 하자.
awesome 이 생겼다. https://github.com/f/awesome-chatgpt-prompts
2016년부터 정들게 쓴 hexo는 플러그인이 많고, 테마가 많아 좋았다. 2019년도부터인가.. 다른 Static Site Generator 가 많아지면서 더 이상 hexo만의 이점이 없어졌고 테마나 플러그인 개발 등 생태계 라이브러리들의 업데이트도 줄어들었다.
ejs -> njk, less -> sass -> stylus 로 테마에 스택이 의존적이였다.
결정적으로 nodejs 기반 코어라 트러블슈팅을 올려도 리소스 낭비랄까..
Docusaurus는 1~2알파 시절 algolia 검색이 제공되지 않아 swizzle 해서 local search 커뮤니티 플러그인을 사용해서 붙혀보는 삽질이 있었고 한글이 정상적으로 동작하지 않았다.
2023년에는 2버전이 런칭했고, React 기반으로 프론트엔드 스택이 일원화되었고 등등 이 작업을 진행해도 될 것 같았다.
date: 2023-01-10 09:00:00 로 날짜를 넣어준다./2023/01/10/title 처럼 처리해준다.{
"themeConfig": {
"metadata": [
// ? https://search.google.com/search-console
{
"name": "google-site-verification",
"content": "g"
}
]
}
}
hexo new post "title" 이 커맨드를 실행해서 포스트를 만드는데, 호환할 커맨드가 필 요했다.blog/2023/01/10/title.mdx 로 만들어주게 yarn cmd new title 로 생성했다.import { slugize } from "hexo-util"; 를 사용하면 된다.
{
"presets": [
"classic",
{
"blog": {
// 실제론 path resolving 필요
"blogArchiveComponent": "./src/component/BlogArchiveDescendingPage.tsx"
}
}
]
}
tags: [tag1, tag2] 이 형식을 만족해야한다.{
"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 package*.json ./
USER node
RUN npm install && npm cache clean --force
COPY . .
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 package*.json ./
USER node
RUN npm install && npm cache clean --force
COPY . .
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 package*.json ./
USER node
RUN npm install && npm cache clean --force
COPY . .
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 으로 변경