목차
- 아침 인사와 근황 토크
- 사내 디자인 시스템과 컴포넌트 관리 이슈
- 상태 관리 라이브러리와 설계 고민
- 모니터 및 작업 환경 이야기
- CSS 최신 기능과 브라우저 지원 현황
- 커피머신 및 일상 소품 토크
- 재택근무에 대한 이야기
- 개발 관련 질문과 예제 공유
- 중복 닉네임 문제와 방 관리 아이디어
- 기타 기술적 팁과 소소한 일상 이야기
Zustand
1. 아침 인사와 근황 토크 🌅
- 개발자들이 아침 인사와 함께 근황 이야기를 나눔
- 춥다는 말이 많이 나왔으며, 체감온도 -15도라는 이야기
- 재택근무 관련 농담과 격려, 환기 필요성 등 일상 위로 멘트 포함
- 운동, 독서, 명상 같은 정신 건강 관리 방안 추천
2. 사내 디자인 시스템과 컴포넌트 관리 이슈 🧩
- 중소기업(약 40명 규모)에서 사내 디자인 시스템 부재
- MUI, Shadcn 같은 UI 컴포넌트 라이브러리를 회사에서 일부 사용하지만 부족한 점이 있음
- 여러 납품 프로젝트마다 요구사항과 디자인 표준이 다름
- SI(시스템통합) 프로젝트 특성상 유지보수 어려움 발생
- 프론트엔드 인력이 적어 직접 컴포넌트 표준을 만들려 하나 어려움 존재
- CEO(실제론 CTO)께서 외부 디펜던시(라이브러리나 프레임워크 포함)를 꺼려함
- 디자인 시스템은 충분한 디자인 자산과 디자이너가 있어야 효과적이며, 단순 컴포넌트 모음이 아님
- 아토믹 디자인 패턴 : UI를 원자(atom), 분자(molecule), 유기체(organism) 단위로 나누어 구성하는 디자인 방법론으로, 체계적이고 재사용 가능한 컴포넌트 개발에 도움됨
3. 상태 관리 라이브러리와 설계 고민 🧠
- XState, Jotai, Zustand, Bunja 등의 상태관리 라이브러리 언급
- XState는 오토마타(상태 전이 방식) 기반으로 복잡한 상태를 체계적으로 관리 가능
- "아토믹" 설계란 상태를 작고 의미있는 단위(atomic unit)로 나누어 관리하는 것
- Jotai와 Bunja는 fine-grained reactive 상태관리로 메모리 사용과 라이프사이클 관리를 효율적으로 구현
- Zustand는 상태와 액션이 밀접하게 결합된 설계로 복잡한 합성 구현에 어려움 있음
- 리덕스는 상태와 액션 분리가 명확하지만 현재 팀에서는 선호도가 낮음
- 타입스크립트 사용 시 발생하는 이슈들 경험 공유
- 상태관리는 비즈니스 로직에 따라 설계가 달라질 수 있기에 정답은 없으며, 팀 내 컨벤션으로 맞추는 게 좋음
4. 모니터 및 작업 환경 이야기 🖥️
- 개발자들의 모니터 사용 환경 토크
- 일반적인 추천 사이즈는 27~32인치 QHD 또는 4K, PPI가 높을수록 코드 가독성에 도움 됨
- 울트라와이드(32:9) 모니터 사용 의견, 트리플 모니터 조합도 흔함
- 듀얼/트리플 모니터암 구매 관련 찬반 의견
- OLED, HDR 지원 여부에 따라 색감과 눈 피로도 차이 있음
- 다크모드 사용과 조명 세팅으로 인한 눈 건강 의견 분분
- 인테리어와 장비 배치도 생산성에 영향 줌
- 홈브릿지 등 스마트홈 연동 경험 공유
5. CSS 최신 기능과 브라우저 지원 현황 🎨
- CSS Nesting 속성에 대한 최신 브라우저 지원 상황 공유 (2023년 스펙)
- SCSS 없이도 CSS 자체에서 중첩 스타일 작성 가능해짐
- caniuse.com 및 크롬 개발자 블로그를 통한 정보 인용
- CSS @starting-style 와 text-box-trim 등 새 속성 소개 및 장점 설명
- 최신 CSS가 문제일 때는 supports() 기능으로 조건부 적용 가능
- TailwindCSS와 연계 시 편리함도 언급됨
6. 커피머신 및 일상 소품 토크 ☕
- 집에서 쓰는 커피머신 내부 청소와 캡슐 관리 이야기
- 자동세척 기능 여부와 외관 청소 방법 공유
- 장갑 착용 관련 재미있는 의견 등장
- 닉시관(진공관) 시계, 다이슨 조명, 모니터 조명 등 일상 주변 기기 토크
- 인테리어 소품과 스마트 조명(HomeKit, 홈브릿지) 사용에 대한 경험
7. 재택근무에 대한 이야기 🏠
- 코로나 이후 재택근무가 일반화된 상태
- 재택 시 출퇴근 시간 절약, 점심 식사 비용과 편리성 증가 등이 장점
- 출근 시와 재택 시 식대 비용 비교와 지역별 물가 현황 논의
- 일과 삶 균형 때문에 재택 선호도가 높음
- 외출이 줄어들면서 사회적 교류 감소 아쉬움 표현
8. 개발 관련 질문과 예제 공유 💻
- playwright 테스트 코드 좋은 예제 추천 요청
- 다양한 상황에 맞는 테스트 코드 찾아보는 게 좋다는 의견
- React 상태 기록 및 Undo/Redo 관련 라이브러리 간단 소개
- 복잡한 상태 이력을 배열이나 리듀서로 직접 구현 가능성 토론
9. 중복 닉네임 문제와 방 관리 아이디어 🎭
- 온라인 채팅방에서 닉네임 중복 문제 제기
- 입장 시 닉네임 변경 유도 메시지 도입, 유니크 닉네임 규칙 제안
- 중복 닉네임 문제로 인한 혼동 해소 기대
- 방장만 가능한 기능에 대한 언급과 온보딩 절차 필요성
10. 기타 기술적 팁과 소소한 일상 이야기 🔧
- 상태관리 라이브러리간 철학과 설계 차이
- 타입스크립트 관련 이슈 및 대안 도구(예: ReScript) 동향
- 라이브러리 생태계 변화, MobX, MST 등 사용빈도 변화 토론
- 작업 시 다크모드와 라이트모드의 개인별 체감 차이
- 각종 장비 설치, 구매 및 유지보수 팁 교환
- 편안한 작업환경 만들기 위한 조명과 가구 배치 이야기
면접팁⚡
- 사내 디자인 시스템 도입 시 고려사항:
- 충분한 디자인 자산과 경험 있는 디자이너의 역할 필수
- 조직 규모와 프로젝트 다양성 고려
- CTO나 경영진의 기술 도입 선호도 및 관리 정책 파악 필요
- 상태 관리 라이브러리 선택 시:
- 프로젝트 복잡도에 맞는 설계와 확장성 고려
- 팀 내 컨벤션 및 유지보수 가능성 점검
- 최신 CSS 기능과 브라우저 지원 파악은 필수, 지원이 불완전할 경우 fallback 전략도 준비
- 작업 환경 구성 시 개발 생산성과 건강에 영향을 미치는 요소를 이해하고 준비하는 태도 강조
링크🔗
#프론트엔드#디자인시스템#상태관리#CSS최신기술#재택근무#모니터추천#개발자소통#React#XState#Zustand