frontend-article-study-2

본 레포지토리는 frontend-article-study를 진행하면서 발생하는 발표 자료를 모아둔 저장소입니다.

스터디원

스터디 목적

본 스터디의 목적은 FE 개발과 관련된 정보, 지식 등을 꾸준히 습득하고 잘 정리하여 설명(공유)하는 것에 있습니다.

스터디 규칙

진행 관련

• 진행 방식
  • 프론트엔드 개발과 관련된 아티클이나 공식 문서를 읽고 내용을 정리합니다.
    • 스터디에서 다루었던 주제를 다시 발표해도 좋습니다.
  • 매주 수요일 21시 디스코드 스터디 채널에서 화면 공유와 함께 준비한 내용을 약 10분 간 발표합니다.
    • 단, 수요일이 공휴일인 경우 스터디는 진행하지 않습니다.
  • 발표는 매주 2명씩 진행합니다.
    • 스터디 종료 후, 다음 주차 발표자 2명을 선정합니다.
  • 발표 내용은 마크다운 문서로 정리하여 본 레포지토리에 업로드해 주세요.
• 스터디 불참 시
  • 디스코드 불참 공유 채널에 해당 날짜를 공유해 주세요.

발표 관련

• 스터디 중 카메라, 마이크는 자율적으로 사용합니다. 마이크를 사용하지 못하는 경우 채팅으로 참여해 주시면 됩니다.
• 스터디는 가나다 이름 순서로 발표를 진행하고 있으며, 발표 순서에 대한 희망사항이 있으신 경우 말씀해 주시면 반영하도록 하겠습니다.

레포지토리 관련

• 폴더 규칙
  • root 디렉토리에 자신의 이름으로 폴더를 생성한 다음, 해당 폴더에 발표 자료를 업로드 해 주시면 됩니다.
• git 컨벤션
  • 현재 지정된 컨벤션은 없습니다. 원하시는 경우 도입 가능합니다.

스터디 진행 상황

23/12/27

발표자	발표 내용
김진솔	Compound Component Pattern
박동현	자바스크립트 이벤트 루프와 비동기 통신
사공지은	RORO 패턴
성지현	react-error-boundary 라이브러리 톺아보기 - useErrorBoundary
이현지	react-hook-form 알아보기
장효서	Strategy Pattern

24/01/03

발표자	발표 내용
김진솔	Funnel
사공지은	generator
성지현	react-error-boundary 라이브러리 톺아보기 - withErrorBoundary
이현지	CORS 에러
장효서	Observer Pattern

24/01/10

발표자	발표 내용
사공지은	Debounce와 Throttle
성지현	hygen으로 공통 컴포넌트 템플릿 만들기
이현지	리액트 컴포넌트 잘 만들어보자
장효서	Decorator Pattern

24/01/17

발표자	발표 내용
김진솔	Headless UI
박동현	웹 성능 개선을 위한 이미지 로딩
성지현	tearing 현상
이현지	Tanstack Query
장효서	Factory Pattern

24/01/24

발표자	발표 내용
김진솔	가비지 컬렉션
사공지은	React 최적화 - useMemo
성지현	flux 패턴

24/01/31

발표자	발표 내용
김진솔	React Server Component
박동현	BEM 패턴
사공지은	함수형 프로그래밍
성지현	Typescript의 satisfies 키워드
이현지	프론트엔드 테스트 방법 (MSW http, HttpResponse)
장효서	Singleton Pattern

24/02/14

발표자	발표 내용
사공지은	동적 뷰포트 단위
성지현	Context API의 리렌더링 이슈
이현지	persist

24/02/21

발표자	발표 내용
김진솔	React의 동등 비교
사공지은	이미지 최적화

24/02/28

발표자	발표 내용
김진솔	클래스 컴포넌트
성지현	검색 엔진 최적화를 위한 sitemap과 robots 알아보기
이현지	Next와 스타일링 기법

24/03/06

발표자	발표 내용
사공지은
성지현	clonedeep vs immer

24/03/13

발표자	발표 내용
김진솔	React의 렌더링
성지현	Next.js로 SSG 구현하기
이현지	Next parallel/intercepting routes 로 모달창 만들기

24/03/20

발표자	발표 내용
성지현	React-Query를 사용하여 optimistic update 구현하기
이현지	use 훑어보기

24/03/27

발표자	발표 내용
김재환	React는 Uncontrolled Component를 어떻게 받아들일까?
김진솔	MFA(Micro Frontend Architecture)
성지현	barrel 패턴
황창민	yarn berry

24/04/03

발표자	발표 내용
김민주	이미지 최적화 - Lazy Loading
김재환	Vite에 관하여
김진솔	Bundler
성지현	Immer는 어떻게 불변성을 유지하는걸까?
이현지	함수

24/04/17

발표자	발표 내용
김진솔	HOC (고차 컴포넌트)
성지현	glob
황창민	React Compiler & React 19

24/04/24

발표자	발표 내용
김재환	React와 Vue의 비교
성지현	소프트웨어의 버전을 표기하는 방법 - 시맨틱 버저닝

24/05/08

발표자	발표 내용
김진솔	타입스크립트의 기본 타입
성지현	런타임과 제로 런타임 CSS
이현지	리액트 상태관리 라이브러리

24/05/22

발표자	발표 내용
김민주	XSS와 dangerouslySetInnerHTML
김재환	실행 컨텍스트의 용어 변경으로 인한 문제 (전편)
성지현	코어 웹 바이탈

24/05/29

발표자	발표 내용
김진솔	타입스크립트 제네릭
성지현	옵저버 패턴

24/06/05

발표자	발표 내용
박병규	SEO
성지현	리액트 디자인 패턴
이현지	TanStack Router 공식문서 보기

24/06/12

발표자	발표 내용
김재환	WebRTC
김진솔	타입 추론, 호환, 별칭, 단언
박병규	Jest
성지현	FOUT/FOIT와 폰트 최적화
한혜선	React 19 기능 요약

24/06/26

발표자	발표 내용
박병규	ECMA2023
성지현	INP
이현지	이벤트 객체

24/07/03

발표자	발표 내용
김재환	[Next14 Conf] How Next.js is delivering React’s vision for the future
김진솔	타입스크립트 5.5 훑어보기
성지현	requestAnimationFrame (1)
이현지	Promise와 async await
한혜선	React Suspense

24/07/10

발표자	발표 내용
성지현	requestAnimationFrame (2)

24/07/17

발표자	발표 내용
김재환	[Next14 Conf] 서드파티 성능 최적화
박병규	OAuth 2.0
성지현	requestIdleCallback
한혜선	CSS Flex

24/07/24

발표자	발표 내용
김진솔	타입스크립트의 컴파일러 코드 let,const → var 변경
한혜선	자바스크립트 요청 취소

24/07/31

발표자	발표 내용
김재환	[Next14 Conf] Performance in React and Next.js
박병규	크로스 브라우징
한혜선	기능 주도 아키텍처(Feature Driven Architecture, FDA)

24/08/07

발표자	발표 내용
김진솔	ajax
성지현	reactivity

---

여기서부터 변경된 스터디 방식에 따라 매주 2명이 발표를 진행합니다.

24/08/21

발표자	발표 내용
김재환	결제에서 쿠키 의존도가 높은 경우 생기는 이슈
성지현	discriminated union

24/08/28

발표자	발표 내용
김진솔	Web Component
박병규	Memory leak

24/09/04

발표자	발표 내용
한혜선	EC2

24/09/11

발표자	발표 내용
김재환	React Server Component 0부터 10까지 알아보자
성지현	type-only imports

24/09/25

발표자	발표 내용
김진솔	zod
한혜선	createPortal

24/10/02

발표자	발표 내용
박병규	PNG vs SVG in Next.js/React
임거정	React 서버 컴포넌트

24/10/16

발표자	발표 내용
고상원	Bundle 최적화
이가연	JWT (JSON Web Token)

24/10/23

발표자	발표 내용
김재환	E2E 테스트 도입기
김진솔	GraphQL vs REST

24/10/30

발표자	발표 내용
성지현	fireEvent vs. userEvent
한혜선	CDN(Content Delivery Network)

24/11/06

발표자	발표 내용
이가연	REST API vs GraphQL

24/11/13

발표자	발표 내용
고상원	swagger-typescript-api
임거정	responsive image

24/11/20

발표자	발표 내용
김재환	수정사항에 기민하게 대처하는 프론트엔드개발
김진솔	QueryOptions

24/11/27

발표자	발표 내용
성지현	asChild
한혜선	리액트 렌더링 단계

24/12/4

발표자	발표 내용
고상원	코드리뷰
임거정

24/12/11

발표자	발표 내용
김재환	JIT 컴파일러
김진솔	React19

24/12/26

발표자	발표 내용
성지현	Index Signature

25/01/08

발표자	발표 내용
고상원	Emoji
김재환	네트워크 측면 웹 성능 향상
한혜선	React Native New Architecture (v0.76)

25/01/15

발표자	발표 내용
김진솔	프론트엔드 TDD
성지현	Event bus

25/01/22

발표자	발표 내용
고상원	Rspack
한혜선	Concurrent Rendering - 동시성 렌더링

25/02/05

발표자	발표 내용
김재환	주니어 개발자와 시니어 개발자의 차이
한혜선	ky

25/02/19

발표자	발표 내용
김진솔	TCP
성지현	document fragment
임지원	css framework

25/02/26

발표자	발표 내용
고상원	Evan King: 신입에서 Meta 스태프 엔지니어(IC6)까지 3년만에 성장한 비결
김재환	과거 V8엔진의 JIT-Compiler

25/03/12

발표자	발표 내용
김진솔	UDP
성지현	typescript 활용
한혜선	Docker

25/03/26

발표자	발표 내용
고상원	Ant Design v5 Custom Theme
김재환	SEO 파헤쳐보기 1 : Google 검색 동작 방식)

25/04/9

발표자	발표 내용
김진솔	VirtualDOM 만들기
성지현	clear removeQueries resetQueries 비교
한혜선	웹접근성

25/04/16

발표자	발표 내용
김재환	SEO 파헤쳐보기 2 : 실무에 도움되는 요소

25/04/23

발표자	발표 내용
김진솔	코드 컨벤션
성지현	React Compiler
한혜선	useSyncExternalStore

25/05/14

발표자	발표 내용
고상원	Github Copilot Agent mode & MCP.md
김재환	센트리 제대로 사용해보기

25/05/21

발표자	발표 내용
성지현	RefCallback

25/05/28

발표자	발표 내용
김진솔	FSD

25/06/04

발표자	발표 내용
김재환	프론트엔드 AI 활용
한혜선	Streaming SSR

25/06/11

발표자	발표 내용
성지현	Temporal API

25/06/18

발표자	발표 내용
김진솔	TanstackDB
황병현	react server action

25/06/25

발표자	발표 내용
김세희	리액트의 동작원리
문진석	Visual Snapshot Testing with Storybook

25/07/02

발표자	발표 내용
김재환	Use Case
한혜선	나의 일을 커리어로 연결하는 법

25/07/16

발표자	발표 내용
김진솔	queueMicrotask
성지현	MCP 쌩기초

25/07/23

발표자	발표 내용
김세희	useEffect 안에서 setInterval 사용하기
황병현	deeplink

25/07/30

발표자	발표 내용
김재환	유익했던 컨퍼런스 내용
문진석	Chrome Built-in AI
한혜선	로드밸런서

25/08/13

발표자	발표 내용
김진솔	함께자라기

25/08/20

발표자	발표 내용
김세희	HTTP 캐싱
성지현	스코프 호이스팅

25/08/27

발표자	발표 내용
문진석	OpenTelemetry 알아보기
황병현	webGL

25/09/03

발표자	발표 내용
김재환	React의 이벤트 관리
한혜선	AWS Cloudfront

25/09/10

발표자	발표 내용
김진솔	Canvas 흐림현상 해결하기
성지현	node_modules

25/09/17

발표자	발표 내용
김세희	SVG filter로 웹에서 Liquid Glass 구현하기

25/09/24

발표자	발표 내용
문진석	패키지 공급망 공격

25/10/01

발표자	발표 내용
김재환	React 이벤트 분석
한혜선	Nexus

25/10/15

발표자	발표 내용
김진솔	Web Worker
성지현	외주 후기

25/10/22

발표자	발표 내용
김세희	리액트에서의 렌더링 패턴

25/10/29

발표자	발표 내용
한혜선	Next v16

25/11/05

발표자	발표 내용
김재환	상속과 프로토타입
성지현	Activity, useEffectEvent

25/11/19

발표자	발표 내용
김세희	React Hooks의 내부 동작 원리
김진솔	GPGPU
문진석	밑바닥부터 시작하는 웹 브라우저

25/12/03

발표자	발표 내용
김재환	google https 기본 적용 권고
한혜선	어드민 스튜디오-우아콘

25/12/10

발표자	발표 내용
김진솔	react 웹 취약점

25/12/17

발표자	발표 내용
김세희	클린 아키텍처 완독 후기

26/01/07

발표자	발표 내용
성지현	어떤 버그든 고치는 방법
문진석	Everything I Know About Good API Design

26/01/21

발표자	발표 내용
김재환	2025회고
한혜선	번들러

26/01/28

발표자	발표 내용
김진솔	URL은 상태다.

26/02/04

발표자	발표 내용
김세희	스펙 주도 개발

26/02/25

발표자	발표 내용
문진석	우리는 왜 어떤 코드를 읽기 쉽다고 느낄까

26/03/11

발표자	발표 내용
김진솔	쏙쏙 들어오는 함수형 코딩
김세희	Vercel skills로 알아보는 리액트 렌더링 최적화 기법
성지현	n8n 소개

26/04/01

발표자	발표 내용
김세희	CSS의 색상 시스템
한혜선	커링(Currying)

26/04/08

발표자	발표 내용
김재환	2026 AI 근황

26/04/15

발표자	발표 내용
문진석	Harness Engineering

26/04/22

발표자	발표 내용
김진솔	Pretext
남주영	굿바이 innerHTML, 헬로 setHTML

26/05/06

발표자	발표 내용
김세희	ESLint vs Biome
한혜선	가상화 (Virtualization)

26/05/13

발표자	발표 내용
김재환	점검페이지가 업데이트 되지 않는 문제

26/05/20

발표자	발표 내용
김진솔
남주영
문진석	AI 시대에도 소프트웨어 기본기가 중요한 이유

26/06/10

발표자	발표 내용
남주영	프롬프트를 잘 쓰는 개발자에서, 루프를 설계하는 개발자로

26/06/17

발표자	발표 내용
김세희	AI 에이전트를 위한 Playwright E2E 테스트 하네스 구축하기
성지현	branded type 그리고 queryOptions

26/06/24

발표자	발표 내용
김재환	프론트엔드 관점의 아키텍처-1

26/07/01

발표자	발표 내용
김진솔	AI 시대, 프론트엔드 기본기는 왜 다시 중요해지는가

26/07/15

발표자	발표 내용
김세희	검증하지 말고 파싱하세요 - 그렇게 하라고 이끌어 주지 않는 언어에서
성지현	Fable 가이드

26/07/22

발표자	발표 내용
김재환
한혜선	안드로이드 웹뷰의 키패드 이슈

26/07/29

발표자	발표 내용
김진솔	UI 디자인을 크게 개선하는 16가지 작은 팁

26/08/12

발표자	발표 내용
김세희	AWS Route 53의 유령 호스팅 이슈
성지현	이해가 새로운 병목이다

26/08/19

발표자	발표 내용
김재환	객체지향의 사실과 오해 후기

26/08/26

발표자	발표 내용
김진솔	얼굴 인식 기술
한혜선	React Native New Architecture