목차
- 사적인 분위기와 유머
- Flutter의 미래와 관련 링크
- 개인키와 블록체인 트랜잭션 이해하기
- Tailwind CSS 문제와 호환성 이슈
- 키보드 축(스위치)에 관한 사소한 농담
- 추천 키워드 추출 기능 구현 고민
- React 훅(Hook) 관리 및 상태 관리 라이브러리 논의
- React 18과 19의 ref, forwardRef 변경 사항
- Next.js와 Express 서버 병합 관련 질문과 답변
- 기타 잡담 및 유용한 팁
1. 사적인 분위기와 유머
- 맥주 3캔 마신 이야기 등 가볍고 친근한 대화가 많았음.
- 패러디 및 말장난(예: 착석-착색, 차석-수석)으로 대화가 활발함.
- 긴장 푸는 유머와 친목 도모의 분위기가 두드러짐.
2. Flutter의 미래와 관련 링크
- Flutter에 대한 미래 전망을 공유하며 https://modulabs.co.kr/blog/flutter-future-2025 링크 제시.
- 'Killed by Google' 사이트(https://killedbygoogle.com/)를 언급하며 구글 서비스들의 단명 사례를 유머스럽게 언급함.
Flutter란?
Flutter는 Google이 개발한 크로스 플랫폼 UI 프레임워크로, 안드로이드와 iOS 그리고 웹 애플리케이션 개발에 사용됨. 미래가 기대되지만, 서비스 종료 리스크도 존재함을 간접적으로 표현.
3. 개인키와 블록체인 트랜잭션 이해하기
- 블록체인에서 '개인키(Private Key)'가 없으면 트랜잭션 생성은 할 수 있지만, 유효한 서명을 할 수 없으므로 실제로 거래가 처리되지 않음.
- '트랜잭션 자체(tx)'가 서버에서 만들어질 수 있는지 질문.
설명:
블록체인 트랜잭션은 서명이 꼭 필요함. 개인키를 서버에 저장하지 않고 클라이언트가 직접 서명하는 구조가 보안에 유리함. 개인키를 서버에 넘기거나 거래소를 거치는 방법은 보안 위험이 큼.
4. Tailwind CSS 문제와 호환성 이슈
- iOS Safari에서 배경색이나 스타일 일부가 적용되지 않는 문제 제기.
- 최신 CSS 규격 중 하나인 oklch 컬러가 사파리에서 제대로 지원되지 않아 발생하는 호환성 문제.
- Tailwind CSS v4는 최신 브라우저(16.4 이상) 지원을 요구함.
- 구버전 브라우저 사용자들은 Tailwind v3 사용 권장.
- 일부 기능(hover 상태의 버튼 변화 등)이 특정 브라우저나 버전에서 제대로 동작하지 않는 사례 공유.
Tailwind CSS란?
유틸리티 클래스 기반 CSS 프레임워크로, 빠른 UI 개발을 돕는다. 그러나 최신 CSS 문법을 사용해 브라우저 호환성 이슈가 발생할 수 있음.
5. 키보드 축(스위치)에 관한 사소한 농담
- 기계식 키보드의 각 축 이름과 타건음에 대한 장난스러운 토론 (예: 밀크축, 그릭요거트축, 커피축 등).
- 타건감과 관련 용어를 재미있게 비유하며 분위기 환기.
6. 추천 키워드 추출 기능 구현 고민
- 본문에서 추천 키워드를 뽑는 방법에 대해 두 가지 방식 검토:
- 라이브러리 활용해 토크나이징 후 매핑 처리 (비용 없음, 문맥 반영 어려움)
- LLM(대형 언어 모델) API를 이용해 문맥까지 반영해 키워드 뽑기 (비용 발생)
- 비용과 품질 사이의 trade-off 고민.
- 규모와 목적에 따라 적합한 방식을 선택해야 함.
7. React 훅(Hook) 관리 및 상태 관리 라이브러리 논의
- 컴포넌트마다 여러 훅이 많아지면 복잡도 증가 문제 언급.
- 훅들을 한 파일에 모아서 관리하는 것과 상태 관리 라이브러리(Redux, Recoil 등) 도입 가능성 토론.
- 상태관리 라이브러리는 상태가 여러 컴포넌트에서 공유되어야 할 때 주로 사용.
- 훅 파일이 너무 커지는 문제는 적절한 분리와 역할 분담이 더 효과적.
- 스토어에서 사이드 이펙트 관리가 어려울 수 있다는 의견도 나옴.
8. React 18과 19의 ref, forwardRef 변경 사항
- React 19부터 forwardRef가 deprecated 되면서 ref 처리가 변화됨.
- 이제는 props를 통해 ref가 직접 전달되며, 별도 forwardRef 없이도 ref를 쓸 수 있음.
- 이전 버전과 하위 호환 문제와 관련해 codemod 같은 자동 변환 툴 사용 권장.
- 변경 사항에 적응하는 과정에서 헷갈림이 존재.
9. Next.js와 Express 서버 병합 관련 질문과 답변
- Next.js 앱을 기존 Express 기반 Node.js 서버에 통합할 수 있냐는 질문.
- 예시 코드 공유되고, 가능은 하지만 권장하지 않는 방식이라는 피드백.
- Next.js는 자체 서버 기능을 내장하고 있으며, 별도의 Express 서버와 분리 관리하는 게 일반적.
- 학습 목적이라면 시도해 볼 수 있지만, 프로덕션에서는 보통 Next.js 독립 실행 혹은 Vercel 등 플랫폼 활용 권장.
- 무료 호스팅 서비스인 Vercel이 언급됨.
10. 기타 잡담 및 유용한 팁
- 지역 별 시간대를 자동으로 보여주는 방법 토론 (new Date()와 타임존 관련).
- 토스페이먼츠 장애 이슈 잠깐 언급.
- 멤버 간 친목 및 식사 이야기, 분위기 환기용 대화 다수.
- 벨로그 서비스 접속 불안 관련 언급.
면접팁⚡
React ref와 forwardRef 변화
- React 19부터 forwardRef가 deprecated 되었고, ref가 props로 직접 전달됨.
- 하위 호환성 이슈와 codemod 툴 활용법 숙지 필요.
상태관리 라이브러리 판단 기준
- 컴포넌트 훅이 많아 복잡해지면 상태 관리 라이브러리 도입 검토.
- 그러나 모든 상태를 묶기보단 기능별로 연관 있는 상태만 묶는 것이 바람직함.
- 사이드 이펙트 관리 어려움 인지 필요.
블록체인 트랜잭션 생성 시 개인키 역할
- 트랜잭션 서명을 위한 개인키 없이 거래 성립 불가.
- 개인키는 절대 서버로 넘기지 않는 것이 원칙.
링크🔗
- Flutter 미래 전망: https://modulabs.co.kr/blog/flutter-future-2025
- Killed by Google: https://killedbygoogle.com/
- Tailwind CSS hover/focus docs v3 & v4
https://tailwindcss.com/docs/hover-focus-and-other-states
https://v3.tailwindcss.com/docs/hover-focus-and-other-states - CSS oklch 지원 현황: https://caniuse.com/?search=oklch
- OKLCH 발음 가이드: https://dillonshook.com/how-do-you-pronounce-oklch/
- React 훅 및 forwardRef 공식 문서 및 codemod 참고
- Next.js와 Express 연동 예시 코드 (GitHub/GPT 공유)
#React#NextJS#TailwindCSS#블록체인#Flutter#상태관리#프론트엔드#추천키워드#개발자대화#웹개발