Migrate to Next.js 13 on Turborepo

Turbopack is just launched and it says 10x faster than vite and 700x faster than webpack. Try out the alpha of Turbopack in Next.js 13 today with next dev --turbo Turbopack Quickstart – Turbopack Start Building Web Applications with Turbopack turbo.build To use new features in Next.js 13 with the app directory on turborepo, there's documentation from next.js below link. https://beta.nextjs.org/d..

OpenAPI + Typescript

Install VScode extension OpenAPI (Swagger) Editor - Visual Studio Marketplace Extension for Visual Studio Code - OpenAPI extension for Visual Studio Code marketplace.visualstudio.com # gen.sh npx openapi-typescript spec.yml --output ./index.ts How to split a large openAPI document into multiple files? openapi-generator-cli GitHub - OpenAPITools/openapi-generator-cli: A node package wrapper for h..

10 git aliases for a faster and productive git workflow

https://snyk.io/blog/10-git-aliases-for-faster-and-productive-git-workflow/ 10 git aliases for faster and productive git workflow In this article, we’re featuring 10 git aliases that can help with a faster and more productive git workflow as an individual, or within a team. snyk.io TL;DR # ~/.gitconfig [alias] s = status co = checkout cob = checkout -b del = branch -D br = branch --format='%(HEA..

Install storybook in a pnpm + nextjs workspace

Storybook won't start when used in a pnpm workspace $ pnpx sb init --builder webpack5 -s $ pnpm install add `-s` to skip to install

FE CONF 2021 Track A

그린랩스 FE 클로저라는 언어를 쓰는 회사라고 알고 있었음 이번 발표에서 Rescript 발표 (읽을 수 있는 Javascript로 컴파일 되는 가장 강한 타입 언어) 구글에 검색해보니 그린랩스 Rescript를 보고 경험해보려 하는 개발자들이 꽤 보였다 OpenAPI Specification (openapi-generator) protobuf IDL로 만들면서 다음에 Restful API때는 이거 해보려했는데 여기서도 작년 내용을 추천해줘서 나중에 더 살펴보기로 라포랩스 FE + DDD DDD = 복잡한 현실 세계의 요구사항이나 기능을 단순하게 만들어서 이를 개발하는 이에게 정교하게 만들 수 있는 도움을 주는 방법이라고 생각하신다고 함 Hexagonal Architecture 전에 회사 개발자분이 얘기..

CSS in JS

저번 프로젝트에선 MUI로 만들고(+emotion) 추후 다음 아이템을 고려해보자고 했다. 우리 글로벌 디자인 시스템이 Material UI 기반이라 너무 쉽게 디자인 할 수 있기에. https://daily.dev/blog/why-i-moved-from-styled-components-to-tailwind-css-and-whats-the-future-of-css-in-js Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS? Learn from my experience as I share the process of moving from styled-components to Tailwind CSS and..

NEXT.JS CONF IS COMMING

yarn berry pnp, pnpm

TurboRepo로 시작하려하니 npm, pnpm, yarn 중 선택하라고 한다. https://blog.logrocket.com/javascript-package-managers-compared/ JavaScript package managers compared: npm, Yarn, or pnpm? - LogRocket Blog With the spate of popular JavaScript package managers reaching relative feature parity, it's time to compare: npm, Yarn, or pnpm? blog.logrocket.com 대부분 비슷한 내용의 글인데 비교를 잘해논 블로그가 있다. https://pnpm.io/benchmarks Ben..

Vercel

Vercel is leading front-end development platform Vercel provides a serverless front-end infrastructure for building on the web Vercel(Serverless Frontend Infrastructure) + MongoDB(Developer Data Platform) = FullStack Serverless 요즘 Vercel, Nuxt, TurboRepo 가 정말 핫한거 같다. https://www.youtube.com/watch?v=EuApCRenE6I 영상보다가 정말 잘 홍보하는거 같고 react query나 Gatsby.js 쓸 때도 느꼈지만 정말 이거저거 다 만들어 논거 같다. MongoDB로 발표해..

Storybook

https://storybook.js.org/showcase/ 처음 도입하게 된 계기는 모든 FE 개발자들이 너무 많은 Component로 인해 어떤게 무슨 Component 인지 확인이 어려워 다 따로 구현하는 점 그리고 관심도 문제로 도입하고 싶어했다. 타 회사의 쇼케이스를 본다면 보통 디자인 컴포넌트를 정의하고, 해당 컴포넌트를 확인하는 용도로 사용하는거 같았다. 우리팀에서 처음 적극적으로 사용해봤는데, 우리는 DatePicker, TextField 같은 작은 컴포넌트 뿐만 아니라 Epic에 필요한 큰 단위의 컴포넌트와 페이지까지도 스토리북에 올렸다. 그 이유는 무거운 프로젝트를 npm run dev 하지 않고 npm run storybook 을 통해 가볍게 사용할 수 있었다. 작은 컴포넌트, 작은..