๐ Today I learned
Any documents that you find here may be a work in progress. If so, marked it as a WIP. Please do not consider it to be trustful. Any comments will be appreciated.
Additionally, to focus more on tech things, I removed the section Graphic Inspiration Sources, so if you need some sources, please check out It's Nice That and Are.na
- ๊ฐ๋ฐ์๋ฅผ ์ํ ๋์์ธ ์์คํ 1: ํ์ด๋ฐ์ด์ ๊ณผ ์ฒ ํ, ์ปฌ๋ฌ
- ๊ฐ๋ฐ์๋ฅผ ์ํ ๋์์ธ ์์คํ 2: ๊ทธ๋ฆฌ๋(Grid)
- ๊ฐ๋ฐ์๋ฅผ ์ํ ๋์์ธ ์์คํ 3: ํ์ดํฌ๊ทธ๋ํผ(Typography)
- ALT: Algorithms Learned Today - Data Structures & Search
- ALT: Algorithms Learned Today - Mathematics
- ALT: Algorithms Learned Today - Algorithms & Complexity
- Contract, Immutability & Composability, Address, Gas, Finality in PoW/PoS
- Solidity, Security, Access Control, Storage vs Memory
- EVM
- Shader 1: GLSL๊ณผ OpenGL์ด๋, GLSL ๋ฌธ๋ฒ, Uniform, ๋ด์ฅ ํจ์, gl_FragCoord, Three.js์์ ์ฌ์ฉํ๊ธฐ
- Shader 2: ๊ทธ๋ผ๋ฐ์ด์ ์๋ฆฌ, pow, sqrt, step, smoothstep, ์ ๊ทธ๋ฆฌ๊ธฐ, Sine๊ณผ Cosine์ ๊ท์น์ฑ, ๊ทธ๋ํฝ์ ์ํ ์ํ ์๋ฃ
- Shader 3: ๋ฒกํฐ ํ์ ์ ์ ์ฐ์ฑ, ์ ์์ ๋ ์ ์ฉํ mix ํจ์, ์ํ ํจํด์ ์ํ distance, length, sqrt, dot
- Shader 4: ํ์ ๋ณํํ๋ ฌ(Rotation Matrix), ์ถ์ฒํ๋ ฌ(Scale Matrix)
- Three.js๋ก WebGL ์์ํ๊ธฐ
- CSS ์ ๋๋ฉ์ด์
์ฑ๋ฅ ๋์ด๊ธฐ: ๋ธ๋ผ์ฐ์ ์ ์ ๋๋ฉ์ด์
๋ ๋๋ง ๊ณผ์ ,
transform,will-change, ์ฑ๋ฅ ๋ง๊ณ ์ ๊ทผ์ฑ๋ ๊ณ ๋ คํ๊ธฐ - Lighthouse ํผํฌ๋จผ์ค ์ ์ ์ฌ๋ฆฌ๊ธฐ 1: Lighthouse๋, FCP๋ฅผ ๋น ๋ฅด๊ฒ, CSS, ํฐํธ, ์ด๋ฏธ์ง, JavaScript ๋ก๋ ์ต์ ํ
- Lighthouse ํผํฌ๋จผ์ค ์ ์ ์ฌ๋ฆฌ๊ธฐ 2: Webpack์ ํ์ฉํ Preload, Lazy Load (feat. Vue)
- Lighthouse ํผํฌ๋จผ์ค ์ ์ ์ฌ๋ฆฌ๊ธฐ 3: HTTP ์บ์ฑ ๋ฉ์ปค๋์ฆ,
Cache-Control์๋ต ํค๋, Service Worker, Cache Storage API,@vue/cli-plugin-pwaํ๋ฌ๊ทธ์ธ์ผ๋ก Vue ์ฑ Service Worker ๊ตฌ์ฑํ๊ธฐ - Lighthouse ํผํฌ๋จผ์ค ์ ์ ์ฌ๋ฆฌ๊ธฐ 4: ์์ถ, SSR
- ํ๋ก ํธ์๋ ํ ์คํธํ๊ธฐ 1: ํ๋ก ํธ์๋์์์ ํ ์คํธ, Vue + TypeScript + Jest ๋จ์ ํ ์คํธ ์ ์
- ํ๋ก ํธ์๋ ํ ์คํธํ๊ธฐ 2: Vue ์ปดํฌ๋ํธ ํ ์คํธ Basics, ๊ตฌํ ์ธ๋ถ์ฌํญ์ ํ ์คํธํ์ง ๋ง ๊ฒ
- ํ๋ก ํธ์๋ ํ ์คํธํ๊ธฐ 3: HTTP ํต์ ํ ์คํธํ๊ธฐ, Store๋ฅผ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ (feat. Axios, Vuex)
- ๊ฒ์์์ง์ต์ ํ(SEO): Meta, Sitemap, RSS
- [๋ฒ์ญ] ๋ง์ดํฌ๋ก๋ฐ์ดํฐ(Microdata)์ ํจ๊ป Schema.org ์์ํ๊ธฐ
- DOCTYPE,
<head>, SEO - HTML ํ๊ทธ, ์๋ฉํฑ ๋งํฌ์
- ๋ธ๋ก(Block) / ์ธ๋ผ์ธ(Inline) ์์
- ์ด๋ฏธ์ง์ ๋ฉํฐ๋ฏธ๋์ด ํ๊ทธ(Image and multimedia tags)
- ํ ์ด๋ธ ํ๊ทธ(Table content tags)
- ์ ์ญ ์์ฑ(Global Attributes)
- ํน์๊ธฐํธ(Entities)
- VFM(Visual Formatting Model): Overflow, Over-constrained, ์ ํจํ ์ฌ๋ฐฑ์ฃผ๊ธฐ *
- ๋ฐ์ค ๋ชจ๋ธ(Box Model)
- ํฌ์ง์ ๋ ๊ท์น(Positioning schemes)
- ๋ธ๋ก ์์ ์ปจํ ์คํธ(Block Formatting Context)
- ์ธ๋ผ์ธ ์์ ์ปจํ ์คํธ(Inline Formatting Context)
- ์์(Inherit), ๋ช ์๋(Specificity), ๊ณ๋จ์ ์ ์ฉ(Cascade)
- ๋จ์
- ํฐํธ(Font)์ ๋ชจ๋ ๊ฒ *
- Stacking Context *
- Background *
- ์ ๋๋ฉ์ด์ (Animation) *
@Rule๊ณผ ๋ฏธ๋์ด์ฟผ๋ฆฌ(Media Query) *- Flex Box *
- CSS ๋ฐฉ๋ฒ๋ก : BEM(Block, Element, Modifier)
- Image Sprites
- ์ค์ฝํ(Scope)
- ์คํ ์ปจํ ์คํธ(Execution Context)์ ํธ์ด์คํ (Hoisting)
- JavaScript๋ ์ด๋ป๊ฒ ๋์ํ๋๊ฐ? - JS ์์ง, ์ด๋ฒคํธ ๋ฃจํ, ์ฝ๋ฐฑ ํ
- JavaScript ES6 ์ปฌ๋ ์ : Set, Map, WeakSet, WeakMap *
- JavaScript ES6 Symbol ์ดํดํ๊ธฐ *
- ๋ค์ดํฐ๋ธ ๊ฐ์ฒด(Native Built-in Objects) *
- ๋ฐฐ์ด(Array)๊ณผ ๋ฐฐ์ดํ ๊ฐ์ฒด
- [๋ฒ์ญ] V8 ์์ง์์ JavaScript๊ฐ ๋์ํ๋ ์๋ฆฌ *
- Node.js *
- [React] Class vs Function ์ปดํฌ๋ํธ
- Barcode Detection API
- VR ์๋น์ค๋ฅผ ์ํ ์น API
- PWA(Progressive Web App)
- Intersection Observer API
- File API - ์น์์ ํ์ผ ๋ค๋ฃจ๊ธฐ
- ์ด๋ฒคํธ ์ ํ์ ์ด๋ฒคํธ ํธ๋ค๋ง
- To read about DOM
- DOM (Document Object Model)
- Events and the DOM
- Locating DOM elements using selectors
- How to create a DOM tree
- GitHub Webhook์ผ๋ก ์ฝ๋ ์ปจ๋ฒค์ ์ฒดํฌ, Actions๋ก ํ๋ก ํธ์๋ CI/CD ๊ตฌ์ถํ๊ธฐ *
- Faas๋, Vercel + GitHub Actions๋ก ํ๋ก์ ํธ ๋ฐฐํฌํ๊ธฐ (feat. Vue)
- macOS์์ Flutter ๊ฐ๋ฐํ๊ฒฝ ์ ์ ํ๊ธฐ
- Flutter ํํ ๋ฆฌ์ผ 1 : Stateful/Stateless ์์ ฏ, ๋ฌดํ ์คํฌ๋กค, ์ฝ๋ฐฑ
- Flutter ํํ ๋ฆฌ์ผ 2 : ์์ด์ฝ,
Navigator๋ผ์ฐํ ,ThemeData์์ ฏ์ผ๋ก ํ ๋ง ์ค์ - Stateful/Stateless ์์ ฏ
- Flutter ์์ ฏ(Widget)
- Flutter ๋ผ์ฐํ (Routing)
- Flutter ํ๋ก์ ํธ๋ฅผ iOS ์ฑ์ผ๋ก ๋ฐฐํฌํ๊ธฐ : ์ฑ ID, ํ๋ก๋น์ ๋ ํ๋กํ์ผ, APNs, ๋ฏธ๊ตญ ์์ถ ๊ท์
- Flutter ํ๋ก์ ํธ๋ฅผ Android ์ฑ์ผ๋ก ๋ฐฐํฌํ๊ธฐ
- Flutter ์ฑ์์ Firebase๋ฅผ ์ฌ์ฉํ์ฌ Sign in with Apple ๊ตฌํํ๊ธฐ
- Flutter ์ฑ์์ Firebase๋ฅผ ์ฌ์ฉํ์ฌ Sign in with Google ๊ตฌํํ๊ธฐ
- Flutter ์ฑ์์ Apple HealthKit, Google Fit, Samsung Health ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ
- Flutter ์ฑ์์ ํธ์ ์๋ฆผ ๊ตฌํํ๊ธฐ : FCM(Firebase Cloud Messaging) + APN(Apple Push Notification) / Android
- Flutter์์
provider๋ก App State ๊ด๋ฆฌํ๊ธฐ - Fastlane์ ์ฌ์ฉํ์ฌ Flutter iOS/Android ์ฑ ๋ฐฐํฌ ์๋ํํ๊ธฐ
- Flutter์์ ์น๋ทฐ(Web View) ์ฌ์ฉํ๊ธฐ *
- REST, REST API and RESTful Web Services
- Some Tips for REST
- REST API Security *
- HTTP Cookies
- Internet and HTTP
- Web Server / Web Application Server
- Cross site scripting (XSS)
- Cross-site request forgery (CSRF)
- Installation of Oracle Database 12c on Mac
- MySQL์ ์๋ฃํ
- MySQL ์ฟผ๋ฆฌ ๋ฌธ๋ฒ
- Command ๋ก MySQL ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ฐฑ์ /๋ณต์ํ๊ธฐ *
- MySQL ํ์ผ ์คํํ๊ธฐ (source)
- All You Need To Know About CSS-in-JS
- ES6 Class๋ ๋จ์ง prototype ์์์ ๋ฌธ๋ฒ์คํ์ผ ๋ฟ์ธ๊ฐ?
- ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฉ๋ชจ๋ฆฌ๊ด๋ฆฌ | MDN
- How JavaScript works: memory management + how to handle 4 common memory leaks