react 썸네일react

2025-04-23

목차

  1. React 컴파일러 RC 출시 소식
  2. 로그 수집 관련 Q&A
  3. 웹3 지갑 연결 및 NFT 구매 구현
  4. Next.js 스타일링 라이브러리 비교
  5. '뱀파이어 서바이벌' 스타일 게임 개발 명세서 공유
  6. 크롬 최신 CSS 애니메이션 기능 소개
  7. SI 프로젝트 포트폴리오 활용 관련 문의
  8. 직장 내 어려움과 이직 고민
  9. 개발 관련 잡담과 팀 분위기
  10. 유용한 블록체인 및 도커 자료 공유

1. React 컴파일러 RC 출시 소식 🎉

  • React 공식 블로그에서 컴파일러 RC(Release Candidate) 버전이 나왔다고 공유됨
  • RC 버전은 정식 출시 전 마지막 베타 단계로, 큰 버그가 없으면 곧 정식 출시됨을 의미
  • React 17부터 해당 컴파일러 지원 여부가 궁금한 질문이 있었음
  • React 컴파일러는 자바스크립트 코드를 최적화하는 도구로, 새 버전에서는 빌드 시 성능 개선 및 새로운 기능 도입 기대 가능

2. 로그 수집 관련 Q&A 📝

  • React를 활용할 때 로그 수집은 보통 어떤 툴을 쓰냐는 질문이 있었음
  • 로그 수집은 앱 운영 환경에서 발생하는 에러, 이벤트, 사용자 행동 데이터를 수집하는 기술
  • 주로 Sentry, LogRocket, Firebase Crashlytics 같은 툴을 많이 사용
  • 질문 내용이 추상적이라 구체적인 요구사항에 맞춰 도구를 선택하는 게 좋음

3. 웹3 지갑 연결 및 NFT 구매 구현 🔗

  • 모바일 앱에서 메타마스크 등 가상화폐 지갑 연동 가능 여부 질문과 답변
  • NFT 구매 시 지갑 연결 방식은 크게 두 가지:
    1. 월렛의 인앱 브라우저 내에서 직접 처리
    2. WalletConnect 같은 커넥터를 통해 원격에서 서명 처리
  • ethers.js와 wagmi는 웹3 개발에서 흔히 쓰이는 라이브러리
    • ethers.js는 저수준 API 제공으로 유연성 높음
    • wagmi는 React 친화적 훅을 지원해 빠른 개발 가능
  • 네트워크 스위칭, 큐알 코드 지원, 모바일 사파리 지원 등이 주요 고려 사항
  • 특정 체인(예: 카이아) 연결 시 별도 커넥터 설정 필요할 수 있음

웹3 지갑 연결 개념 설명

  • 월렛 커넥트(WalletConnect): 지갑 앱과 웹 간 암호화된 연결을 제공하는 프로토콜
  • 인앱 브라우저: 월렛 내 내장 브라우저에서 DApp 실행 시 별도 연결 없이 서명 처리
  • NFT 민팅: 디지털 자산을 블록체인 상에 생성하는 과정으로 지갑 서명이 필수

4. Next.js 스타일링 라이브러리 비교 🎨

  • Tailwind CSS와 Stylex 중 선택 고민 질문이 있었음
  • Tailwind CSS
    • 유틸리티 퍼스트 CSS 프레임워크
    • 클래스명으로 빠르게 스타일 적용 가능
    • 큰 커뮤니티와 풍부한 플러그인 존재
  • Stylex
    • Meta(Facebook)에서 개발한 CSS-in-JS 솔루션
    • 컴포넌트 단위 스타일 최적화에 강점
    • Next.js와 낮은 러닝 커브는 Tailwind가 더 좋다는 의견 우세

5. '뱀파이어 서바이벌' 스타일 게임 개발 명세서 공유 🕹️

  • 로그라이트 장르의 자동 공격 생존 액션 게임 개발 명세서를 상세하게 공유
  • 주요 내용
    • 게임 컨셉과 핵심 메커닉 (자동 공격, 제한 시간 생존)
    • 기술 스택 (Unity + C#, 2D 픽셀 그래픽)
    • 캐릭터, 무기, 아이템, 적 시스템 등 각 요소별 상세 설계
    • 스테이지, UI/UX, 오디오, 개발 일정 및 마일스톤 포함
    • 확장 가능성, 비즈니스 모델, 기술적 도전 과제까지 포괄
  • AI를 활용해 명세서를 파일로 저장하고 프롬프트로 읽혀 게임 제작도 가능하다는 팁 공유됨

6. 크롬 최신 CSS 애니메이션 기능 소개 ✨

  • height: 0에서 height: auto로 애니메이션 효과를 줄 수 있게 됨 (크롬 129버전 이상, 엣지도 지원)
  • 아직 사파리, 파이어폭스, 삼성 인터넷 브라우저는 미지원 상태
  • 이는 CSS에서 자동 높이 조절 애니메이션이 가능해 UI 확장/축소 효과 구현이 더 자연스러워짐
  • 참고 링크: https://developer.chrome.com/docs/css-ui/animate-to-height-auto?hl=ko

7. SI 프로젝트 포트폴리오 활용 관련 문의 💼

  • SI(시스템 통합) 프로젝트 결과물을 스크린샷으로 찍어 블러 처리 후 포트폴리오에 넣어도 되냐는 질문
  • 답변
    • 회사 정책이 가장 중요하므로 사전에 반드시 허락 받아야 함
    • 법적, 보안 이슈가 민감한 경우 사용 불가할 수 있음
    • 포트폴리오 용도로 활용 시 정보 노출 최소화 필요
    • 사람마다 판단이 달라 회사와 협의하는 게 가장 안전

8. 직장 내 어려움과 이직 고민 😓

  • 사수가 이직 준비 중이고 반복해서 업무를 넘기면서 업무량 증가
  • 이직 준비자의 태도 문제와 이에 따른 팀 내 갈등 언급됨
  • 직장 내 감정 관리와 커뮤니케이션 중요성 강조
  • 분위기를 풀기 위한 유머와 응원 메시지, 스트레스 케어 대화도 오감

9. 개발 관련 잡담과 팀 분위기 😄

  • 다양한 가벼운 농담과 팀원들끼리의 호칭 놀이가 이어짐
  • 팀원 생일 축하, 일상 대화, 게임 이야기 포함
  • 이런 잡담이 전체적인 팀 분위기와 결속력을 높이는 역할 수행

10. 유용한 블록체인 및 도커 자료 공유 📚

면접팁⚡

  • React 컴파일러 RC 이해: RC 버전은 출시 전 마지막 테스트 버전임을 아는 것이 중요
  • 웹3 구현 시 핵심 키워드 이해 필요
    • WalletConnect, 인앱 브라우저, 스마트 컨트랙트, 네트워크 스위칭
  • 스타일링 라이브러리 비교 설명 시 용도와 특징을 명확히 말할 것
  • 포트폴리오 제출 시 기업 정책과 보안 관련 윤리적 고려 강조하기

링크🔗

#React#웹3#NFT#Nextjs#스타일링#게임개발#CSS애니메이션#포트폴리오#직장생활#도커