📑 Frontend Reference Docs

📚 Learning Platforms

📚 Learning Platforms

• Inflearn
• Udemy

🧠 Coding Test Platforms

🧠 Coding Test Platforms

• Programmers
• Baekjoon
• LeetCode

✨ Inspiration

✨ Inspiration

• Inspiration

🗺️ Roadmap

🗺️ Roadmap

• Developer Roadmap
• Frontend Roadmap
• Frontend Beginner Roadmap

💡 Useful Resources

💡 Useful Resources

• MDN
• W3S
• Stack Overflow
• Toss-Frontend Fundamentals
• Toss-Bundling Fundamentals

📽 Visualization

📽 Visualization

• JavaScript Visualized Series by Lydia Hallie
• CSS Flexbox Cheatsheet (by Josh Comeau)
• CSS Grid Cheatsheet (by Josh Comeau)
• Flexbox Visual Guide (by Malven Co)
• Grid Visual Guide (by Malven Co)
• React Component Visualizer – React Flow
• Uiverse
• Learn Git Branching
• Regex 101

👩‍💻 Language

👩‍💻 Language

• MDN JavaScript
• Modern JavaScript EN
• Modern JavaScript KO
• TypeScript

⚛️ Library & Framework

⚛️ Library & Framework

• React
• React KO
• React Native
• Expo
• Next.js
• Vue

🎛 State Management

🎛 State Management

• Redux
• Zustand
• Recoil

🌐 Routing Libraries

🌐 Routing Libraries

• React Router
• Vue Router

📝 Form Handling

📝 Form Handling

• React Hook Form
• Formik

🎨 Styling

🎨 Styling

• CSS Animation Tool – Animista
• Cubic-Bezier Visual Editor
• CSS Clip-Path Maker (by Bennett Feely)
• Sass
• Tailwind CSS
• Styled-components
• Emotion

🧱 CSS Architecture & Methodologies

🧱 CSS Architecture & Methodologies

• BEM
• OOCSS
• SMACSS
• Atomic CSS

🔔 Toast & Notification

🔔 Toast & Notification

• React Toastify
• ↳ npm
• React Hot Toast
• Radix UI – Toast
• shadcn/ui – Toast
• Chakra UI - Toast
• MUI Snackbar

🧱 UI Component Libraries

🧱 UI Component Libraries

• Radix UI
• Shadcn/UI
• MUI
• Ant Design

🎞 Animation

🎞 Animation

• Framer Motion (React)
• GSAP
• Lottie
• Josh W. Comeau's Blog

🖼 Icon & Asset Tools

🖼 Icon & Asset Tools

• Lucide
• Font Awesome
• Google Fonts
• Heroicons
• iconify
• Carbon
• Ray.so

🔌 API & Data Fetching

🔌 API & Data Fetching

• Swagger UI
• Swagger UI Docs
• Swagger Editor
• Axios
• TanStack Query (React Query)
• JSONPlaceholder (Mock API)

⚙️ Bundler & Build Tools

⚙️ Bundler & Build Tools

• Vite
• Webpack

📦 Package Managers

📦 Package Managers

• npm
• Yarn

🌱 Git & Version Control

🌱 Git & Version Control

• Git
• Pro Git Book
• GitHub Docs
• Git Handbook by GitHub
• Learn Git Branching

🧹 Linting & Formatting

🧹 Linting & Formatting

• ESLint
• Prettier

🧪 Testing

🧪 Testing

• Jest
• Testing Library

🛝 Playground & Live Editors

🛝 Playground & Live Editors

• Live DOM Viewer
• CodePen
• CodeSandbox
• StackBlitz

🚀 Deployment, Hosting & Domain

🚀 Deployment, Hosting & Domain

• Vercel
• Netlify
• GitHub Pages
• Gabia

Draft

• 뱅크샐러드 코드 리뷰 문화 pn

• 에어비앤비 코드 컨벤션

• tweakcn

• Learn Typescript

• Ts config

• 카카오엔터프라이즈가 GitHub Actions를 사용하는 이유

• GitHub Marketplace

• ↳ checkout

• shields

• sli

• FE interview

• FE 자기소개

• MDN - script: 스크립트 요소

• Google Developers - Remove Render-Blocking JavaScript

• Chrome for Developers - Eliminate render-blocking resources

• MDN - Critical rendering path

• Web.dev - Rendering performance

• Chrome for Developers - Minimize main thread work

• MDN - Populating the page: how browsers work

• Chrome for Developers - Discover issues with rendering performance

• Web.dev - Rendering on the Web

• Chrome for Developers - Inside look at modern web browser (part 3)

🔖 JavaScript Style Guide

• javascript.info - Coding Style

• Airbnb JavaScript Style Guide - EN

• Airbnb JavaScript Style Guide - KR (Thanks for ParkSB)

• Google JavaScript Style Guide

• Google TypeScript Style Guide

• Idiomatic JavaScript

• Standard JS

🧩 ESLint

• ESLint
• prefer-const
• no-const-assign
• no-new-object
• object-shorthand
• quote-props
• no-prototype-builtins
• prefer-object-spread