heereal / frontend_dev_articles

✏️프론트엔드 기술 아티클을 정리합니다.

Frontend Dev Articles

다시 한 번 읽어 보면 좋을 기술 아티클을 링크와 함께 요약해서 기록합니다.

Last Updated 2024.04.17

React

• 리액트 기초 개념
• Concurrent
• 선언형 프로그래밍
• Error Boundary
• Memoization
• 모달 효율적으로 관리하기
• Portals
• React Server Components (RSC)
• Rendering
• Suspense
• setState는 왜 비동기적으로 동작할까?
• useEffect vs useLayoutEffect
• useState vs useRef
• 리액트 최적화
• Controlled vs. Uncontrolled inputs

React 공식 문서

• State as a Snapshot
• Queueing a Series of State Updates
• Sharing State Between Components
• useLayoutEffect

React State Management Libraries

• Recoil

HTML

• a 태그
• datalist
• dialog
• Accordions
• gif를 video로 대체해야 하는 이유

CSS

• Flexbox
• Transition
• Centering
• CSS Logical Properties
• Modern CSS Properties

JavaScript

• 비동기 함수
• 이벤트 루프의 실행 과정
• 이벤트 루프와 Task Queue
• 호이스팅이란?
• 프로토타입이란?
• 메모리 할당
• 불변성
• Compile
• References
• Getter & Setter
• every()가 빈 배열에 true를 반환하는 이유
• event.target과 event.currentTarget의 차이점
• 자바스크립트 로딩 속도를 높이는 방법

TypeScript

• Generic
• typeof keyof

Next.js

• 초기 세팅
• @next/font

Next.js 공식 문서

• Route Handlers

React Native

• React Native New Architecture
• Deep Link
• Expo vs React Native CLI

React Query

• Custom Hooks
• useInfiniteQuery
• refetchOnWindowFocus
• Inside React Query
• initialData
• 데이터 변환
• Tracked Queries

알고리즘

• Recursive Call
• Depth First Search (DFS)

자료구조

• Linked List
• Hash Table
• Graph

Rendering

• 브라우저가 읽는 법

Rendering Strategies

• Server Side Rendering (SSR)

Network

• CDN
• CORS
• HTTP 캐시란?
• Query Parameter vs Path Variable
• 멱등성
• IPv4 vs IPv6

Module Bundlers

• 번들러란?
• Bun
• Vite
• Webpack

Package Managers

• npm

SQL

• SQL vs NoSQL
• GraphQL
• Cursor based Pagination

AWS

• EC2

Architecture

• Exception Handling
• Flux

Design Pattern

• SOLID 원칙
• Command Query Separation (CQS)
• Return Early Pattern
• Singleton Pattern
• Chain of Responsibility Pattern
• Template Method Pattern
• Compound Component Pattern

Web API

• Blob
• IntersectionObserver

기타

• Tree Shaking
• Compiling과 Transpiling
• Babel
• Token
• JWT
• Web Font
• 웹 폰트 최적화
• 이미지 최적화
• robots.txt
• SEO
• Progressive Web App
• SVG와 PNG의 차이점
• Three.js
• ESLint vs Prettier
• Unicode
• Web 3.0의 특징
• 생성형 AI
• Action-Driven Animation

기능 구현

• 상품 상세페이지 더보기
• Next.js SSR 환경에서 다크모드 구현하기
• 한글 받침에 따라서 은/는 이/가 처리하기
• SSE(Server Sent Events)로 실시간 채팅 구현하기
• 라이브러리 없이 Toast 만들기
• 카드 Flip 효과 구현하기
• 플립 시계 카운터 만들기
• Spline으로 3D 웹 만들기

인상 깊은 프로젝트

• 제품 개발로 5,500만원의 월 수익을 올리는 개발자의 이야기
• 혼자서 만든 사이드 프로젝트를 수십 억 원에 매각한 29살 비전공자 이야기

Mindset

• 협업을 잘하는 개발자가 되어보자 - 프로그래머가 아니라 문제 해결사가 되자!
• 힘들어하는 주니어들을 위하여