A curated reading list sync with the Notion Database. Generated by Awesome Reading List
- Uncategorized (1)
- Babel (1)
- Blog (2)
- Browser (3)
- CSS (2)
- CSS in JS (5)
- Component (2)
- Convention (1)
- Design System (3)
- Dev (1)
- GitHub (3)
- GitLab (1)
- GraphQL (1)
- Guide (1)
- Insight (3)
- Inversify (1)
- JavaScript (13)
- Mac (1)
- NextJS (2)
- NodeJS (1)
- Nuxt (2)
- PWA (1)
- Project (1)
- Quote (1)
- React (6)
- RxJS (1)
- Slides (1)
- Styled System (3)
- Tools (1)
- Typescript (25)
- VSCode (1)
- Vue (5)
- Web (5)
- a18y (1)
- browserlist (1)
- editor (1)
- git (5)
- module (2)
- monorepo (2)
- npm (6)
- yarn (2)
Link | Created Time | Read | Memo |
---|---|---|---|
npm, yarn, pnpm 비교해보기 – yceffort | 2022-07-17 10:39:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Transpile to ES modules with Babel | 2021-09-04 19:10:00 | ✅ | { "loose": true, "modules": false } |
Link | Created Time | Read | Memo |
---|---|---|---|
midudev 👨💻 | Frontend, JavaScript, React, CSS, Performance | 2022-02-17 11:14:00 | ❌ | |
shj | 2022-01-20 21:19:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
모던 웹 브라우저 들여다보기 (파트 3) | Web | Google Developers | 2022-01-06 12:11:00 | ✅ | 파싱 → 스타일 계산 → 레이아웃 → 페인트 → 컴포지팅 |
모던 웹 브라우저 들여다보기 (파트 2) | Web | Google Developers | 2022-01-05 22:33:00 | ✅ | UI 스레드에서 입력 처리, 네트워크 스레드에서 탐색 및 응답 읽기, 렌더러 프로세스에서 리소스 로딩과 페이지 렌더링, load 이벤트가 발생한 이후 브라우저에 IPC 반환(UI 스레드는 로딩 스피너를 정지함). 다른 사이트로 이동 시엔 UI 스레드에서 렌더러 프로세스에 beforeunload 이벤트 확인하고 위의 방식으로 다시 진행된다. |
모던 웹 브라우저 들여다보기 (파트 1) | Web | Google Developers | 2021-12-29 14:15:00 | ✅ | CPU는 매우 다양한 작업을 하나씩 처리할 수 있다. GPU는 간단한 작업을 동시에 처리하는데 특화되어 있다. (특히 그래픽 작업) OS는 앱이 실행되면 프로세스에 메모리 조각을 줘서 사용하도록 한다. 프로세스와 프로세스는 IPC로 통신할 수 있다. 브라우저는 브라우저, 렌더러, 플러그인, GPU 등 프로세스로 분리된다. 크롬은 탭 마다(* 사이트마다) 별개의 렌더러 프로세스를 가진다. |
Link | Created Time | Read | Memo |
---|---|---|---|
종합 안내: Rem 그리고 Em, 언제 써야 할까 | 2022-01-10 13:09:00 | ✅ | px 단위는 브라우저에서 절대값으로, 항상 정확히 px 단위로 표시된다. rem 단위는 최상위(root) 요소의 폰트 크기 기준으로 px 단위로 변환된다. (16px * 10rem) em 단위는 스타일을 지정한 요소의 폰트 크기 기준으로 px 단위로 변환된다. 요소의 폰트 크기는 부모 요소에게 상속되므로, 상속에 따라 달라질 수 있다. |
Typewriter Animation That Handles Anything You Throw at It | CSS-Tricks | 2021-07-28 09:31:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Atomic CSS-in-JS | 2022-01-10 23:27:00 | ✅ | Atomic CSS와 Atomic CSS in JS 소개 |
andreipfeiffer/css-in-js: A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js | 2022-01-10 14:47:00 | ✅ | 여러 CSS in JS 솔루션들에 대한 객관적인 비교. 비교 기준들과 전반적인 공통점에 대해서는 살펴보는데 도움이 된다. |
A Thorough Analysis of CSS-in-JS | CSS-Tricks - CSS-Tricks | 2022-01-10 14:46:00 | ✅ | CSS in JS는 CSS 작성 방식을 극적으로 변화시켜 많은 이점을 제공하고 전반적인 개발 경험을 개선한다. 하지만 채택할 라이브러리를 선택하는 것은 간단하지 않고 모든 선택은 기술적 타협이 따른다. |
How to increase CSS-in-JS performance by 175x | by Dominic Tobias | ITNEXT | 2022-01-10 14:34:00 | ✅ | 테마에 CSS 변수를 사용한다. CSS in JS에서 스타일을 가능한 정적으로 유지하라. 컴파일 타임(zero-runtime) CSS in JS를 고려하라. |
CSS-in-JS, 무엇이 다른가요? | SOSOLOG | 2022-01-10 12:06:00 | ✅ | CSS in JS의 세대별 변천, 현재 화면에 필요한 CSS(Critical CSS)만 먼저 로딩하는 방법, runtime CSS in JS와 zero-runtime CSS in JS의 성능 비교, CSS in JS에 은총알은 없다. 서비스 특성에 따라 알맞은 CSS 방법론을 선택해야 한다. |
Link | Created Time | Read | Memo |
---|---|---|---|
building-component-libraries-with-a-monorepo.pdf | 2022-01-20 18:21:00 | ✅ | Component Library + Monorepo의 장점 |
Pedro Duarte — Variant-driven Components | 2021-09-14 10:50:00 | ✅ | stitches를 사용하여 변형 기반으로 UI를 구축한다. 스타일 문제를 분리할 수 있다. |
Link | Created Time | Read | Memo |
---|---|---|---|
한글코딩.org 개발기 (실패기?). 개발자가 쓰는 말은 한국어인데, 소스코드는 영문으로 작성합니다… | by 김대현 | HappyProgrammer | Medium | 2022-02-19 11:55:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Should you version components separately or as a unified system? | Mae Capozzi's Blog | 2022-01-31 14:51:00 | ❌ | |
Design System Team Models: How to Hire a Frontend-of-the-Frontend Engineer | Mae Capozzi's Blog | 2022-01-29 12:14:00 | ❌ | |
Do you think your component library is your design system? Think again | by Shantanu Sinha | UX Collective | 2022-01-10 11:28:00 | ✅ | 디자인 시스템은 계속 발전하고, 일관성과 속도를 보장하는 규칙으로 가이드되는 모든 제품 개발의 단일 진실 공급원이다. 즉, 단순 UI 라이브러리 이상의 디자인 원칙, 스타일 가이드, 패턴, 컨텐츠 톤, 규칙 및 사양을 정의하는 것이다. |
Link | Created Time | Read | Memo |
---|---|---|---|
Intention Revealing Names | 2022-04-26 20:36:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Incremental PRs: a new GitHub workflow for the Gatsby Cloud team | Gatsby | 2021-08-14 09:13:00 | ❌ | |
GitHub OCTO | Visualizing a codebase | 2021-08-06 18:53:00 | ✅ | Visualizing a codebase |
[GitHub] fork repository 최신 버전으로 유지하기 | 2021-07-08 09:43:00 | ✅ | git remote add upstream original/repo.git , git fetch upstream , git mrege upstream/master |
Link | Created Time | Read | Memo |
---|---|---|---|
npm packages in the Package Registry | GitLab | 2021-08-07 16:46:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
How to GraphQL - The Fullstack Tutorial for GraphQL | 2021-08-07 15:30:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Command Line Interface Guidelines | 2021-10-07 12:44:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
알파고 이후 프로바둑계의 변화 (번역) – 이바닥늬우스 | 2022-02-06 14:01:00 | ❌ | |
Asch Conformity Experiment | Simply Psychology | 2022-02-06 11:42:00 | ❌ | |
Give it five minutes – Signal v. Noise | 2022-01-06 13:34:00 | ✅ | 다른 사람의 의견을 들을 때, 적어도 5분의 시간을 줘라. |
Link | Created Time | Read | Memo |
---|---|---|---|
Dependency injection 과 inversify, 그리고 적용해보기 | 2021-07-19 18:34:00 | ✅ | Inversify에 대한 소개 슬라이드 |
Link | Created Time | Read | Memo |
---|---|---|---|
Naming Maps in ES6. Help your vars explain themselves to… | by Matthew Chase Whittemore | Social Tables Tech | Medium | 2022-03-19 13:07:00 | ❌ | |
Don't block the event loop! 매끄러운 경험을 위한 JavaScript 비동기 처리 - LINE ENGINEERING | 2022-01-12 16:07:00 | ❌ | |
자바스크립트는 왜 프로토타입을 선택했을까. 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를… | by 임성묵 (Sungmook Lim) | Dec, 2021 | Medium | 2021-12-10 09:23:00 | ✅ | 프로토타입 이론에 따르면 같은 어휘도 문맥(context)에 따라 '범주', '의미'가 달라진다. |
Get Ready For ESM. JavaScript Modules will soon be a… | by Sindre Sorhus | 🦄 Sindre Sorhus’ blog | 2021-09-27 17:00:00 | ✅ | ESM으로 모듈 통합을 이루자. |
Use a source map - Firefox Developer Tools | MDN | 2021-09-04 18:49:00 | ✅ | 자바스크립트 코드는 minified 되거나 TypeScript, Babel 등의 컴파일러로 인해 변환되는 경우가 많다. 이러한 상황에서 변환된 상태의 소스와 원본 소스를 매핑하여 브라우저에서 원본 소스로 디버그할 수 있도록 하는 것이 sourcemap이다. |
The history of “typeof null” | 2021-08-01 16:22:00 | ❌ | |
JavaScript Promises: then(f,f) vs then(f).catch(f) | 2021-07-26 21:29:00 | ✅ | then(f, f) 와 then(f).catch(f) 의 유일한 차이는 success 콜백(첫 번째 f )이 거부된 Promise를 반환할 때이다. |
Notion API: Getting Started with Notion's JavaScript SDK - SitePoint | 2021-07-17 10:10:00 | ❌ | |
Async Getters and Setters. Is it Possible? | by David Barral | Trabe | Medium | 2021-07-16 16:16:00 | ✅ | async getter와 setter를 만드는 방법 |
this | PoiemaWeb | 2021-07-16 09:35:00 | ✅ | 일반 함수의 this는 호출 시 바인딩 된다. |
export default thing is different to export { thing as default } - JakeArchibald.com |
2021-07-13 08:36:00 | ✅ | import는 값이 아닌 참조로 전달된다. export default로 내보낸 것은 값으로 전달되지만, export default function은 참조로 전달된다. |
You Can Definitely Use Global Variables To Manage Global State In React - DEV Community | 2021-07-13 08:24:00 | ✅ | 전역 변수를 그냥 상태로 사용하는 방법. |
JavaScript: What is the meaning of this? | 2021-07-09 08:03:00 | ✅ | this에 대한 결과를 else if 형태로 설명한 글. new 와 함께 사용할 때 Object.create(Whatever.prototype) 와 this가 같은 값으로 설명. |
Link | Created Time | Read | Memo |
---|---|---|---|
Mac의 클립보드 명령어 - pbcopy & pbpaste | 2021-07-08 12:51:00 | ✅ | cat a.txt | pbcopy , pbpaste > b.txt |
Link | Created Time | Read | Memo |
---|---|---|---|
How I Built my Blog using MDX, Next.js, and React | 2021-09-03 08:34:00 | ❌ | |
Migrating this Blog to Next.js from Gatsby | Eyas's Blog | 2021-08-25 08:29:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Building a Node.js CLI with TypeScript, packaged and distributed via Homebrew | by Sniptt Official | Geek Culture | Medium | 2021-09-26 09:51:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Going Full Static - NuxtJS | 2021-07-12 12:01:00 | ✅ | |
Demystify Nuxtʼs Target, Mode, and Ssr Properties | Kentico Kontent. | 2021-07-12 11:57:00 | ✅ |
Link | Created Time | Read | Memo |
---|---|---|---|
Progressive Web App Splash Screens | by Dave Hudson | Medium | 2021-07-08 17:37:00 | ✅ | PWA의 splash screen을 적용하는 방법 |
Link | Created Time | Read | Memo |
---|---|---|---|
LiveBeats: Building a social music app with Phoenix LiveView · Fly | 2022-02-17 11:17:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
If You Can't Measure It, You Can't Improve It | Lessons from Peter Drucker | 2022-02-06 11:39:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Vjeux » React: CSS in JS – NationJS | 2022-01-10 11:27:00 | ✅ | 규모있는 앱에서 CSS를 사용할 때 겪은 문제점과 CSS in JS를 소개한 발표 |
React hooks: not magic, just arrays | by Rudi Yardley | Medium | 2022-01-09 14:56:00 | ✅ | 컴포넌트 내부에 훅의 호출 순서와 연관되는 데이터 구조가 있어서, 훅의 규칙을 따른다면 렌더링마다 변경되는 상태를 가져올 수 있다. |
memo()를 하기 전에 — Overreacted | 2022-01-05 21:46:00 | ✅ | React.memo를 사용하지 않고, 상태를 아래로 내리기, 내용물을 끌어올리기(children prop 활용) 방법으로 자주 다시 렌더링되는 부분을 수정할 수 있는 사례 소개. 따라서 최적화를 적용하기 전에 변경되지 않는 부분에서 변경되는 부분을 나눌 수 있는지 살펴보라. |
API Cache를 사용해 SPA 페이지 사용자 경험 개선하기(w. axios, react) | 수줍은 동그래 블로그 | 2021-12-24 00:33:00 | ✅ | axios-extensions 의 cacheAdapterEnhancer 를 활용하여 API 요청을 캐싱하고, history.action === PUSH 일 때만 캐싱하지 않도록 하자. (뒤로가기 또는 앞으로가기 동작은 POP 나머지는 PUSH ) |
React를 Vue.js보다 선호하는 이유 | 2021-10-24 16:12:00 | ✅ | 타입스크립트 지원, 단순한 컴포넌트 정의에 용이함, 더 빠르고 담대한 개선 |
A Visual Guide to React Rendering - useCallback | Alex Sidorenko | 2021-08-12 19:59:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
RxJS Fundamentals | RxJS Fundamentals | 2022-01-27 00:49:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Atlassian confluence WIKI를 활용한 공유와 협업 환경 구성 | 2022-01-26 11:05:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Styled Components, Styled Systems and How They Work | Rangle.io | 2022-01-10 13:15:00 | ✅ | styled-system은 styled 문법 위에, 테마와 반응형 처리에 직관적인 방법을 제공하는 라이브러리다. |
Component Based Design System With Styled-System | Varun Vachhar | 2022-01-10 13:11:00 | ✅ | 스타일 시스템을 사용한 컴포넌트 개발 예제 |
Build Better Component Libraries with Styled System | by Alan B Smith | 💅 styled-components | Medium | 2022-01-10 13:11:00 | ✅ | 스타일 시스템은 일반적인 컴포넌트 라이브러리 문제를 해결하기 위한 간단한 API를 제공하며, 컴포넌트를 확장 가능하게 유지한다. + 컴포넌트의 복잡성과 재사용성은 반비례한다. |
Link | Created Time | Read | Memo |
---|---|---|---|
Think Stack: 나의 생각을 관리하는 도구들 | 2022-03-06 11:53:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog | 2021-07-24 17:48:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Turning Vue components into reusable npm packages | 2022-01-21 18:12:00 | ❌ | |
타입스크립트에서 Vue 컴포넌트를 개발하는 방법 | TOAST UI :: Make Your Web Delicious! | 2022-01-21 18:10:00 | ❌ | |
Vite부터 시작하는 Vue 3 생활 | AKE.kr | 2022-01-20 15:11:00 | ✅ | Vite는 별도의 번들링을 하지 않는 방법으로 개발 시 빠른 속도로 로딩할 수 있다. Vue 3에서는 Composition API, Reactivity API가 핵심 |
25 Vue Tips You Need to Know - DEV Community | 2021-07-24 17:50:00 | ❌ | |
Vue.js + TypeScript 앱에서 IoC 컨테이너 사용하기 | Aliencube | 2021-07-19 18:33:00 | ✅ | Inversify로 Vue 컴포넌트에 DI 적용하는 방법 |
Link | Created Time | Read | Memo |
---|---|---|---|
Multi-Framework and -Version Micro Frontends with Module Federation: Your 4 Steps Guide - ANGULARarchitects | 2022-04-10 11:25:00 | ❌ | |
Hands-on with Portals: seamless navigation on the web | 2022-02-25 11:05:00 | ❌ | |
2022년 웹 개발에서 고려해야 할 환경 - LINE ENGINEERING | 2022-02-17 18:55:00 | ❌ | |
Page Lifecycle API | Web | Google Developers | 2022-01-05 22:51:00 | ✅ | OS는 CPU, 배터리, 네트워크 등 시스템 리소스를 제어한다. 따라서 OS에 의해 브라우저의 페이지가 동결(freeze), 폐기(discard)될 수 있다. 이에 대해 페이지에서 안전하게 처리할 수 있는 라이프사이클 후크를 미래의 브라우저에 도입할 예정이다. (Chrome 68 부터 제공) |
Best practices for language redirection | 2021-12-29 01:10:00 | ✅ | 사용자의 언어를 조회하기 위해 브라우저의 언어 설정(navigator.language ) 또는 IP 주소를 사용할 수 있다. 하지만 IP는 위치를 나타낼 뿐 언어를 정확히 알 수 없기 때문에 브라우저의 언어 설정을 사용하는 것이 선호된다. |
Link | Created Time | Read | Memo |
---|---|---|---|
Creating an accessible autocomplete experience – React Spectrum Blog | 2021-07-28 09:30:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Browserslist is a Good Idea | CSS-Tricks | 2021-07-23 21:19:00 | ✅ | autoprefixer와 babel 설정에 동일한 지원하는 브라우저 목록을 설정할 수 있다. ESLint plugin으로 API의 지원 여부를 lint 할 수 있다. |
Link | Created Time | Read | Memo |
---|---|---|---|
Why tabs are clearly superior – Lea Verou | 2021-12-23 17:02:00 | ✅ | 탭은 공백보다 공간을 덜 차지하고, 너비를 개인화할 수 있고, 복사 및 붙여넣기가 쉽다. |
Link | Created Time | Read | Memo |
---|---|---|---|
How to Setup Monorepos with Git for JavaScript and TypeScript | by Hieu Nguyen (Jack) | Aug, 2021 | Medium | 2021-09-04 12:01:00 | ❌ | |
git은 폴더경로가 변경된 것을 어떻게 알 수 있을까? - Kwoncharles Blog | 2021-08-31 00:26:00 | ✅ | 50% 이상 유사시 edit-renamed |
Git 과거의 특정 커밋 수정하기 - 뒤태지존의 끄적거림 | 2021-07-16 09:33:00 | ✅ | git rebase —interactive , pick , commit —amend , git rebase continue |
[Git]Tag 추가, 변경 및 삭제하기 | 2021-07-15 10:43:00 | ✅ | git tag , git tag -d v1.0.0 , git push origin :v1.0.0 |
Conditional Git configuration - Jiayu's Blog | 2021-07-08 09:36:00 | ✅ | [includeIf “gitdir:~/directory/"] 로 디렉토리에 따라 git config을 분기처리할 수 있다. |
Link | Created Time | Read | Memo |
---|---|---|---|
How To Make Tree Shakeable Libraries | Theodo | 2021-11-29 00:06:00 | ✅ | ES6 Module(ESM)을 사용하라. 모듈의 sideEffect를 없애라. 트랜스파일 시에 ESM 특성을 잃지 않도록 설정해라. Tree Shaking을 지원하는 번들러를 사용해라. |
트리 쉐이킹으로 자바스크립트 페이로드 줄이기 | TOAST UI :: Make Your Web Delicious! | 2021-09-04 21:08:00 | ✅ | ES6 Module(ESM)을 사용하라. 모듈의 sideEffect를 없애라. 트랜스파일 시에 ESM 특성을 잃지 않도록 설정해라. Tree Shaking을 지원하는 번들러를 사용해라. |
Link | Created Time | Read | Memo |
---|---|---|---|
Monorepo Explained | 2022-01-25 08:51:00 | ❌ | |
Rush로 프론트엔드 모노레포 도입기. 이 글에서는 밀당 영어 프론트엔드에서 커다란 코드 덩어리로 되어 있던… | by Jeong Seong Dae | 밀당 팀블로그 | Aug, 2021 | Medium | 2021-09-05 19:26:00 | ❌ |
Link | Created Time | Read | Memo |
---|---|---|---|
Before You Build A Component Library: Versioning | Mae Capozzi's Blog | 2022-01-31 14:47:00 | ❌ | |
How to locally test an npm package | Mae Capozzi's Blog | 2022-01-31 14:43:00 | ❌ | |
npm package.json에서 틸드(~) 대신 캐럿(^) 사용하기 :: Outsider's Dev Story | 2021-12-29 09:53:00 | ✅ | 캐럿(^): 하위 호환성을 지키는 범위에서 업데이트, 틸드(~): 마지막 자리 내의 범위에서만 업데이트 |
Implicit transitive peer dependencies - DEV Community | 2021-09-13 17:08:00 | ✅ | 종속성의 peerDependencies 를 peerDependencies 또는 dependencies 로 명시하자. 암시적으로 종속성의 peerDependencies 를 상속받을 수 없다. |
Self-Documented Makefile | 2021-08-10 22:15:00 | ❌ | |
Why I Prefer Makefiles Over package.json Scripts for Node.js Projects | 2021-08-10 22:00:00 | ✅ |
Link | Created Time | Read | Memo |
---|---|---|---|
Building a Monorepo with Yarn 2 | Heroku | 2021-09-04 19:13:00 | ❌ | |
npm 과 yarn classic , yarn 2.0 중 어떤 것을 사용할 것인가? | by Seo Yeon, Lee | Jun, 2021 | Medium |
2021-07-03 22:56:00 | ✅ |
This README was generated with ❤️ by awesome-reading-list