목차
- 날씨와 일상 근황
- React Router에서 페이지 이동 시 경고창 이슈
- 다크모드와 서버사이드 렌더링(SSR) 문제 해결
- 게임과 사기 경험담 토크
- 주소 검색 라이브러리 및 플러터 웹뷰 이슈
- Next.js + Supabase 인증 스타터 공유
- 스타일링 라이브러리 비교 및 추천: Tailwind, StyleX 등
- 파이썬, 스프링 프레임워크 등 백엔드 기술 고민
- 건강과 일상: 목 통증과 운동, 코로나 이후 삶 이야기
- AI 개발자 양성과정 교육 안내
1. 날씨와 일상 근황 🌬️
- 11월 초반인데 날씨가 많이 추워짐. 최저 4도, 최고 15도 정도.
- 근무 일정도 주 4일로 여유로워진 분들도 있음.
- 실리콘밸리룩, 패딩, 가죽잠바 등 각자의 패션 이야기.
- 개인 목표로 집에 당구 다이 두기, 당구 관련 추억 및 이야기 나눔.
2. React Router에서 페이지 이동 시 경고창(alert) 문제
핵심
- React Router에서 유저가 페이지 이동 시 window.confirm으로 경고창을 띄우고 싶은 경우 완전한 제어가 매우 어려움.
상세 설명
- 브라우저 뒤로가기, 앞으로가기, 페이지 종료 등은 브라우저가 직접 제어하며 개발자가 이벤트를 완벽히 차단하기 어려움.
- 네트워크 통신 상태나 파일 업로드 중 상태에 따라 페이지 이동을 조건부로 막으려 할 때, React Router 내에서만 제어하는 것이 권장됨.
- 페이지 내 특정 버튼 클릭 같은 경우는 코드 레벨에서 상태를 체크하여 이동을 제어하는 것이 현실적인 해결책.
- 완전 제어가 불가능하니, '업로드 상태' 등의 플래그를 관리하는 custom hook을 만들어 상태별 제어를 하는 방식을 추천.
팁
- 사용자 경험을 해치지 않도록 필요한 최소한의 경고만 띄우고, 직접 만든 훅으로 상태 관리를 한다.
- 100% 완벽하게 브라우저 모든 이동 상황을 막는 것은 불가능하므로, 그 점을 클라이언트나 팀에 미리 공유해야 함.
3. 다크모드와 서버사이드 렌더링(SSR)의 하이드레이션 미스매치 문제
핵심
- SSR 환경에서 다크모드가 클라이언트와 서버 간 렌더링 상태가 다르면 UI가 깜빡이거나 미스매치가 발생함.
설명
- 서버는 주로 기본 라이트 모드로 렌더링하고 클라이언트가 실행되며 환경(사용자 설정, 시스템 설정 기준 다크모드)를 감지해 렌더링함.
- 서버에서 먼저 클라이언트 모드와 같은 다크모드 여부를 판단하는 건 한계가 있음.
- 해결책으로는 <body> 태그 내 스크립트로 다크모드 상태 판단 후 렌더링 차단하거나, 클라이언트에서 스타일만 교체하는 방법 등이 있음.
- 여러 자료 및 오픈 소스 링크(예: Vercel, Remix) 참고를 권장.
- 다크모드는 보통 ‘라이트’, ‘다크’, ‘시스템에 따름’ 세 가지 옵션을 제공하는 것이 일반적임.
4. 게임과 사기 경험 토크 🎮
- 게임 내 사기 문화와 플레이 경험 공유, 사기 당하지 않는 법 토론.
- ‘사기의 원칙’: 신뢰 얻기, 레벨업 통한 빌드업, 길드 가입 등으로 장기간 사기 수법을 감추는 전략.
- 과거 게임들(다크에덴, 메이플스토리, 아이온 등) 추억과 PVP 경험 이야기.
- 게임에 몰입했던 시절과 현재 게임 환경 변화에 대한 회고.
5. 주소 검색 라이브러리 및 플러터 웹뷰 문제
주소 검색
- 한국에서 ‘다음(Daum) 주소 검색’이 사실상 표준으로 많이 쓰임.
- 웹뷰 내 임베디드 컴포넌트로 넣으면 문제 없이 동작하지만 플러터(iOS 사파리, 크롬) 환경에서는 신규 창으로 열려 이벤트 제어가 어려움.
- 플러터와 웹뷰가 클라이언트 사이드 이벤트 관리를 어떻게 하는지에 대한 이해 필요.
6. Next.js + Supabase 인증 스타터 공개
- Next.js와 Supabase를 활용한 인증 기능 스타터 프로젝트 공유.
- 앱 개발 경험 적은 분들도 쉽게 따라할 수 있도록 문서와 코드 공개함.
- 오픈소스 링크: https://github.com/bytaesu/nextjs-supabase-auth-kit
-다른 개발자 피드백을 받아 지속 개선 예정.
7. 스타일링 라이브러리 비교 및 추천 🎨
주요 라이브러리
- Tailwind CSS: 여전히 대중적이지만, 개인에 따라 느끼는 장단점 상이함.
- styleX (Meta에서 개발): API가 간결하고 atomic CSS 기반으로 편리함.
- Pandacss, vanilla-extract, pigment 등과 비교했을 때 styleX가 우수하다고 평가됨.
설명
- 여러 스타일링 라이브러리가 있지만 각기 장단점과 안정성, 유지보수 현황이 다름.
- styleX는 Atomic CSS와 API 자유도가 좋아, 어느 정도 공부 후 도입 추천.
- 불호인 경우도 있으니 실제 써 보고 결정하는 것이 중요.
8. 백엔드 기술 선택 고민 및 조언
- 스프링(Spring) 프레임워크와 Node.js 중 고민 상황.
- 스프링은 자바 기반이지만 안정적이며 대규모 서비스에 적합함.
- Node.js는 채용이 상대적으로 어려운 편이나 JavaScript 기반으로 프론트 개발자에게 친숙함.
- 코틀린 Kotlin 도 스프링에서 더 편리함을 위해 각광받는 언어로 추천함.
- 다트(Dart) 등 다른 언어도 언급됨.
9. 건강과 일상: 목 통증과 운동
- 목과 어깨 통증에 대해 신경외과, 정형외과, 한의원 방문 고민 토론.
- 도수치료, 물리치료가 도움이 되지만 비용 문제도 고려해야 함.
- 허먼밀러 의자 같은 인체공학적 가구 추천, 다만 잘못된 자세는 악화 시킬 수 있음.
- 스트레스와 수면 부족도 건강에 악영향을 끼침.
10. AI 개발자 양성과정 안내
- 이스트소프트 주관 AI 모델 개발자 양성과정 모집 중.
- 100% 온라인 수업, 프로그래밍 기초부터 AI 심화 과정, 현업 중심 프로젝트 포함.
- 국민내일배움카드 대상자라면 무료 수강 가능.
- 서류전형 면제, 실무 연계 인턴십 기회 등 혜택 다양.
- 상세 신청 링크: https://estcamp.co.kr/
면접팁⚡
- React Router 페이지 이동을 제어할 때 브라우저 이벤트의 한계를 이해하고, 실제 상황에서는 '상태 관리 훅'으로 제어한다는 점을 설명하라.
- SSR 환경에서 다크모드를 다룰 때 하이드레이션 문제와 깜빡임 이슈를 알고 있고, <body> 태그에 차단 스크립트 삽입 같은 대응 방법을 알고 있음을 보여주면 좋은 인상.
- 스타일링 라이브러리 선정 시 각 라이브러리의 특징(atomic CSS 지원, API 자유도, 안정성)을 파악하고 팀 상황에 맞게 추천할 수 있으면 어필 가능.
링크🔗
#React#Nextjs#SSR#다크모드#주소검색#스타일링#프론트엔드#백엔드#게임개발#건강관리#AI교육