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 (예정)

발표자	발표 내용
김재환
김진솔