2023년 10월 21일 토요일
FE Conf 2023에 참여했습니다.
작년 여러 컨퍼런스를 다녀온 경험으로 비추어 기업 부스는 쉬는 시간에 가면
사람들이 많아서 상당히 힘들어서 트랙 시작 전 한산할 때 빠르게 다 돌았습니다.
저는 컨퍼런스 오기 전에 어떤 Track 세션을 들을 지 미리 계획을 다 했습니다.
제가 계획한 일정은 다음과 같습니다.
- Track B: 웹 기반 그래픽 편집기의 구조와 7가지 디자인 패턴
- Track B: SSR 환경(Node.js) 메모리 누수 디버깅 가이드
- Track A: 몇 천 페이지의 유저 가이드를 새로 만들며
- Track A: 이벤트 기반 웹뷰 프레임워크 설계와 플러그인 생태계 만들기
- Track A: 대형 웹 애플리케이션 Micro Frontends 전환기
자세한 내용들은 유튜브 다시보기 영상을 통해 시청할 수 있으며
하단 레퍼런스로 남겨두겠습니다.
요약을 하면 간단히 다음과 같습니다.
Track B: 웹 기반 그래픽 편집기의 구조와 7가지 디자인 패턴 (1300 - 1340)
- 심흥운 · Naver
- Eclipse GEF
- 그래픽 편집기가 다양한 디자인 패턴을 품고 있음
- 패턴 - 건축에서 처음 소개됨
- 디자인 패턴 돌아보기
- 되풀이되는, 반복
- 엔지니어링 관점
- 구성 요소들을 올바르게 구성하기 위함
- 반복되어 사용되는 불변의 요소
- 프로그래밍과 패턴
- 디자인 패턴 - 재사용성을 지닌 OOP 핵심 요소
- 구성요소를 올바르게 구성하기 위한 패턴
- Context / Problem / Solution
- 발명보다 경험을 통해 발견됨
- 경험의 재사용
- Architectural Patterns - MVC
- GoF Patterns - Creational/Structural/Behavioral
- 디자인 패턴 장점
- 좋은 설계는 구현을 쉽게 한다
- 효율적인 의사 소통
- 객체지향 원칙을 지킬 수 있음 (5가지 - Solid, Open/Closed, …)
- 설계 우선 주의
- High Level View
- 디자인 패턴의 문제 해결
- 쉽게 변경하는 방법 제공
- 추상화와 위임
- 상속보다 구성
- 상속은 컴파일 타임
- 구성(Composition)은 런타임
- 특정 부분이 계속 변경될 것이라고 예상되는 경우 사용
- Keep It Small and SImple (KISS)
- 정답은 없음. 상황에 맞게 유연하게 적용
- 그림 그리기의 디자인 패턴
- 편집 작업의 속성
- 이벤트 → 블랙박스 → 상태 변화
- 멘탈 모델 → 블랙박스 → 컴퓨터 모델
- View → Controller → Model
- MVC 패턴 - 관심사 분리
- Model의 옵저버 패턴
- View의 컴포지트 패턴 (중첩)
- Controller의 전략 패턴
- 그래픽 편집기 아키텍쳐
- 그래픽 편집기 구현과 디자인 패턴 적용
- 가상의 그래픽 편집 도구
- 팩토리 패턴
- 심플 팩토리 (기본 클래스)
- 팩토리 메서드 (상속)
- 추상 팩토리 (컴포지트로 제품군 구현)
- 컴포지트 패턴
- 중첩 모델 다룰 때 유용
- 투명성/타입 안정성을 위한 디자인
- 상태 패턴
- 현재 상태를 하나의 클래스로 나타냄
- 전략 패턴
- 확장성
- 런타임에 작동방식 변경
- 알고리즘 재사용
- 커맨드 패턴
- 히스토리 관리 기능 구현
- 플러그인 패턴
맺음말
Track B: SSR 환경(Node.js) 메모리 누수 디버깅 가이드 (1350 - 1430)
- 박지혜 · 토스플레이스
- 메모리 누수 디버깅
- 메모리 누수의 범인 찾기
- 메모리 누수: 실제로는 필요하지 않는데 메모리 계속 차지하고 있는 현상
- 모니터링 툴 활용
- 서버 사이드
- 그라파나
- 데이터독
- 클라우드 워치
- 클라이언트 사이드
- 메모리 누수 발생하는 코드
- V8에서 인스턴스 용량 늘려도 힙 메모리는 제한적이므로 메모리 누수 발생
- 힙 메모리 늘려도 괜찮지 않음
- Node.js max old space size 는 미봉책
- 전역 변수, 해제되지 않는 타이머, 클로저 등 체크
- node —inspect
- Shallow size / Retained size
- using 키워드 (TS 5.2)
Track A: 몇 천 페이지의 유저 가이드를 새로 만들며 (1440 - 1520)
- 이찬희 · AB180
- Next 13 App Router
- 서버 컴포넌트 활용
- hidden=until-found, beformatch event listener
- 대문자 속성명
- revalidate, tag
- Data cache
- Page 단위 → 네트워크 요청 단위
- 제품의 특성 파악, 영향을 주는 요인을 찾아가고, 보다 단순한 해답 찾아가기
Track A: 이벤트 기반 웹뷰 프레임워크 설계와 플러그인 생태계 만들기 (1530 - 1610)
- 원지혁 · 당근
- 문제 인식 - 모델링 - 테스트 자동화 - 인터페이스 - 생태계
- 웹뷰 스택 (stackflow)
- 이벤트 기반 설계
Track A: 대형 웹 애플리케이션 Micro Frontends 전환기 (1620 - 1700)
- 김종혁 · flex
- Module Federation
- Run time integration via js
이상 위와 같습니다.
이번에 세션들이 전반적으로 작년보다 퀄리티가 다 올라갔고
알찬 내용이 많은 것 같아서 유튜브로 다시 보면 좋을 것 같습니다.
(내용들이 쉽지는 않습니다.)
개인적으로 느끼는 건 학습은 끝이 없고 좀 더 정리를 잘해야겠다는 생각도 들면서
이해가 안되면 될 때까지 더 노력해야겠다는 동기부여도 많이 받았습니다.
오늘 컨디션이 그렇게 좋지는 않았지만
최근에 간 컨퍼런스 중에서 제일 좋았습니다.
운이 좋게 이번에도 티켓팅을 성공했는데
유튜브 라이브로 시청하면서 다시 천천히 보는 것도 괜찮아 보입니다.
마지막 추가적으로 현재 회사에서 SSR 메모리 누수 관련한 트러블 이슈가 있는데
아직 어떤 것이 원인인지는 확인이 안되서 디버깅을 계속 헤딩하면서 부딪쳐봐야 할 것 같습니다.
오늘 다들 고생 많으셨습니다~
'Community > 컨퍼런스' 카테고리의 다른 글
| [Youthcon 2023] 참여 후기 🙂 (2) | 2023.08.26 |
|---|---|
| [FE Conf 2022] 참여 후기 🙂 (0) | 2022.10.09 |
| [인프콘 2022] 참여 후기 🙂 (0) | 2022.08.28 |
댓글