본 레포지토리는 frontend-article-study를 진행하면서 발생하는 발표 자료를 모아둔 저장소입니다.
본 스터디의 목적은 FE 개발과 관련된 정보, 지식 등을 꾸준히 습득하고 잘 정리하여 설명(공유)하는 것에 있습니다.
- 진행 방식
- 프론트엔드 개발과 관련된 아티클이나 공식 문서를 읽고 내용을 정리합니다.
- 매주 수요일 21시 디스코드 스터디 채널에서 인당 10~30분 내외로 화면 공유와 함께 발표합니다.
- 단, 수요일이 공휴일인 경우 스터디는 진행하지 않습니다.
- 발표 내용은 마크다운 문서로 정리하여 본 레포지토리에 업로드해 주세요.
- 스터디 불참 시
- 디스코드 불참 공유 채널에 해당 날짜를 공유해 주세요.
- 스터디 중 카메라, 마이크는 자율적으로 사용합니다. 마이크를 사용하지 못하는 경우 채팅으로 참여해 주시면 됩니다.
- 스터디는 가나다 이름 순서로 발표를 진행하고 있으며, 발표 순서에 대한 희망사항이 있으신 경우 말씀해 주시면 반영하도록 하겠습니다.
- 폴더 규칙
- root 디렉토리에 자신의 이름으로 폴더를 생성한 다음, 해당 폴더에 발표 자료를 업로드 해 주시면 됩니다.
- git 컨벤션
- 현재 지정된 컨벤션은 없습니다. 원하시는 경우 도입 가능합니다.
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | Compound Component Pattern |
| 박동현 | 자바스크립트 이벤트 루프와 비동기 통신 |
| 사공지은 | RORO 패턴 |
| 성지현 | react-error-boundary 라이브러리 톺아보기 - useErrorBoundary |
| 이현지 | react-hook-form 알아보기 |
| 장효서 | Strategy Pattern |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | Funnel |
| 사공지은 | generator |
| 성지현 | react-error-boundary 라이브러리 톺아보기 - withErrorBoundary |
| 이현지 | CORS 에러 |
| 장효서 | Observer Pattern |
| 발표자 | 발표 내용 |
|---|---|
| 사공지은 | Debounce와 Throttle |
| 성지현 | hygen으로 공통 컴포넌트 템플릿 만들기 |
| 이현지 | 리액트 컴포넌트 잘 만들어보자 |
| 장효서 | Decorator Pattern |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | Headless UI |
| 박동현 | 웹 성능 개선을 위한 이미지 로딩 |
| 성지현 | tearing 현상 |
| 이현지 | Tanstack Query |
| 장효서 | Factory Pattern |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | 가비지 컬렉션 |
| 사공지은 | React 최적화 - useMemo |
| 성지현 | flux 패턴 |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | React Server Component |
| 박동현 | BEM 패턴 |
| 사공지은 | 함수형 프로그래밍 |
| 성지현 | Typescript의 satisfies 키워드 |
| 이현지 | 프론트엔드 테스트 방법 (MSW http, HttpResponse) |
| 장효서 | Singleton Pattern |
| 발표자 | 발표 내용 |
|---|---|
| 사공지은 | 동적 뷰포트 단위 |
| 성지현 | Context API의 리렌더링 이슈 |
| 이현지 | persist |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | React의 동등 비교 |
| 사공지은 | 이미지 최적화 |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | 클래스 컴포넌트 |
| 성지현 | 검색 엔진 최적화를 위한 sitemap과 robots 알아보기 |
| 이현지 | Next와 스타일링 기법 |
| 발표자 | 발표 내용 |
|---|---|
| 사공지은 | |
| 성지현 | clonedeep vs immer |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | React의 렌더링 |
| 성지현 | Next.js로 SSG 구현하기 |
| 이현지 | Next parallel/intercepting routes 로 모달창 만들기 |
| 발표자 | 발표 내용 |
|---|---|
| 성지현 | React-Query를 사용하여 optimistic update 구현하기 |
| 이현지 | use 훑어보기 |
| 발표자 | 발표 내용 |
|---|---|
| 김재환 | React는 Uncontrolled Component를 어떻게 받아들일까? |
| 김진솔 | MFA(Micro Frontend Architecture) |
| 성지현 | barrel 패턴 |
| 황창민 | yarn berry |
| 발표자 | 발표 내용 |
|---|---|
| 김민주 | 이미지 최적화 - Lazy Loading |
| 김재환 | Vite에 관하여 |
| 김진솔 | Bundler |
| 성지현 | Immer는 어떻게 불변성을 유지하는걸까? |
| 이현지 | 함수 |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | HOC (고차 컴포넌트) |
| 성지현 | glob |
| 황창민 | React Compiler & React 19 |
| 발표자 | 발표 내용 |
|---|---|
| 김재환 | React와 Vue의 비교 |
| 성지현 | 소프트웨어의 버전을 표기하는 방법 - 시맨틱 버저닝 |
| 발표자 | 발표 내용 |
|---|---|
| 김진솔 | 타입스크립트의 기본 타입 |
| 성지현 | 런타임과 제로 런타임 CSS |
| 이현지 | 리액트 상태관리 라이브러리 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent