Full Stack JavaScript Developer | Half-time Open Sourcerer.
View All Authorsschema.prisma 파일엔 오직 하나의 datasource 열만 가지고 있을 수 있다.migration.lock 파일 삭제 후 마이그레이션부터 다시 실행해야한다.*.atom.ts 파일 서픽스와 *State 변수명 서픽스를 갖게 했다.프로그래머라는 직업은 뭘까?
나에게 이 직업은 뭘까?
요즘 나는 이렇게 이야기를 하고 다닌다.
전 인터넷에 집 짓는 사람이에요.
프로그래밍은 현실세계의 개념들을 차용해 사람이 하던 걸 자동화하기 위함인데, 이걸 깨닫는데까지 너무 오래 걸린 것 같다.
이제야 왜 많은 교수님들이 현업에서는 짬이 찰수록 기본기가 중요하다. 라고 침이 마르게 이야기를 했는지 알 것 같다.
GPT로 모든 게 다 될 것 같은 시대에 프로그래밍 스킬이 중요할까?
내 대답은 아니오였다. 서비스의 아이디어가 기술 스택보다 중요한 시점이 왔다. 클로드 섀넌을 처음 듣는 사람들도 서비스를 만들 수 있게 되었고, 그 코드를 배포할 수 있는 엣지 컴퓨팅이 성행한다.
이렇게 가면 언젠가 무너질거에요 라고 설득할 수 없다. 무너지고 나서 이렇게 될 거라고 했잖아요 라고 불난 집에 기름을 부울 수도 없다.
사회 분위기가 더 그렇게 만들고 있다.
모든 기술은 트레이드오프이다.
새로운 것은 항상 큰 비용이 발생한다. 구성원의 숙련도와 유지보수의 관점에서 바라봐야한다.
난 여긴 학원이 아니야, 새로운 걸 쓰고 싶다면 개인 시간을 써서 일주일 안에 프로토타입을 보여줘. 라고 말하지만, 지금 누굴 위해 공부하고 있는데 라고 생각하는 사람도 태반이다.
소프트웨어 공학이 중요한 이유이다.
그렇다면 내가 싫어했던 건 뭘까, 부실공사인지도 모르는 건 괜찮다. 모를 수도 있지.. 하지만 부실공사라 말하지 못 하게 하는 건 내 몸에 과부하를 준다.
스트레스를 받지 않기 위해서 이상향 체크리스트를 관리하려고 한다.
yarn dlx @yarnpkg/sdks vscode로 실행스크립트를 업데이트 해줘야한다.node_modules 를 직접 참조한다.nodeLinker를 주고 yarn 1 버전을 쓸 때와 똑같이 사용을 해야하는데, 아무런 어드밴티지가 없다.
const promptTemplate =
"Write an insightful but concise Git commit message in a complete sentence in present tense for the following diff without prefacing it with anything:";
const completionParams = {
temperature: 0.7,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
};
import { encoding_for_model as encodingForModel } from "@dqbd/tiktoken";
const encoder = encodingForModel("gpt-3.5-turbo");
const tokenLength = encoder.encode("YOUR_CHAT").length;
openai/chatgpt-retrieval-plugin
none | user_http | service_http | oauth 네 종류service_http 정도로 충분해보임, user_http 는 고객이 API key 를 입력해야하고, oauth 는 search:read 와 같은 권한 추가 필요.운동하다가 디스크가 고장나고 선물받았는데, 고장나기 전에 많은 분들이 읽어보면 좋을 것 같다. 그랬다면 L5-S1 사이 디스크가 나오기 전에 좋은 자세로 임했을텐데 아쉽다.
전반적인 내용은 척추위생을 지키기 위한 백년허리의 독후감이다.
코딩을 해준다라는 과대광고를 집어치우고 실제로 유용하게 사용할 수 있는 유스케이스들을 정리해보았다.
보통 정규식을 만드는데에는 박음질하듯이 많은 테스트가 필요하다. 주로 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 등등..