목차
- 제로초님의 웹게임 무료 강의 소감
- React Query에서 리스트-디테일 삭제 후 처리 방법 고민
- 반응형 배너 및 이미지 업로드 관리자페이지 구성 팁
- React Hook Form과 다중 폼 동적 생성 문제 해결
- 인앱 브라우저(카카오톡 등) 관련 문제와 처리법
- TypeScript tsc 전역 설치 및 실행 문제 해결법
- 자동재생 오디오 관련 브라우저 정책과 접근성
- 면접·취업 관련 조언 및 경험 공유
- 프론트엔드 성능(특히 TTFB)과 CDN 운영 이야기
- GitHub Actions 및 개발 프로세스 자동화 이야기
1. 제로초님의 웹게임 강의 소감 🎮
- 제로초님의 인프런 무료 강의가 입문자에게 매우 최적화되어 있다는 평가가 많음
- 유튜브로 올린 편집 강의도 내용이 알차고 이해하기 쉽다고 함
- 간단한 버튼과 상태(state)를 활용해 웹게임 만드는 튜토리얼 형태라 초보자에게 특히 추천
2. React Query에서 리스트-디테일 삭제 후 처리 방법 고민 ❓
- 리스트에서 특정 아이템 삭제 시, 관련 상세(detail) 쿼리와 리스트 쿼리를 어떻게 관리할지 고민
- 주요 구조:
- 삭제 후 상세 쿼리 상태 체크 및 삭제
- 상세 쿼리를 비활성화하고 삭제 후 리스트 쿼리 무효화(invalidate)
- mutationKey를 연동해 삭제 시 관련 상세 쿼리를 자동 비활성화
- 각 방법마다 장단점 존재, 2번과 3번이 현재 가장 실용적이라 평가되나 깔끔한 최적 방법에 대한 의견 요청
- 초보자 팁: React Query에서 invalidateQueries는 데이터를 최신화하려 할 때 사용, 상세 페이지 데이터가 존재하면 삭제후에도 캐시 상태를 바로 반영해야 함. Mutation과 QueryKey 연동을 적절히 하여 상태 불일치 방지
3. 반응형 배너 이미지 업로드와 관리자 페이지 디자인 가이드
- 디바이스별(모바일, PC, 태블릿) 해상도 차이 때문에 배너 비율과 권장 사이즈 기준이 중요
- 관리자 페이지 내에 디바이스별 이미지 업로드 기능을 둬서 각각 적절한 이미지 관리 권장
- 디자이너에게 4:3, 16:9 등 적절 비율을 기준으로 디자인 요청하는 게 현실적
- 경험담: 권장 사이즈는 여러 디바이스에서 적당히 보이는 평균값으로 정함
- 초보자 팁: 다양한 해상도를 고려한 반응형 이미지를 지원하려면 비율과 크기를 엄격히 관리하고, 관리자 측에 업로드 필터링 기능 추가가 효율적임
4. React Hook Form으로 동적 다중 폼 생성 및 submit 문제
- 일정관리 페이지에서 "입력폼을 여러 개 생성하고 싶을 때" react-hook-form 사용 시 어려움
- 문제점:
- 여러 개 폼이 있고 각 폼의 submit이 개별로 동작하지 않고 전체 폼 데이터가 전송됨
- 동적 폼 생성과 렌더링 간 상태 불일치 문제
- 해결 방향:
- 각 행별로 별도 form 구성
- key값이 없으면 렌더링 오류 발생하니 key 반드시 지정
- uncontrolled 컴포넌트로 처리하거나, 한 개의 폼으로 하되 입력 필드를 분리하는 방법 고려
- 커뮤니티 팁: 코드샌드박스 같은 온라인 IDE에 올려서 디버깅 요청하기
- 초보자 팁: React Hook Form은 최대한 하나의 폼에서 작동하도록 설계되어, 다중 폼이면 각 폼 컴포넌트에 useForm 훅을 독립적으로 적용하거나 key 관리가 필수
5. 인앱 브라우저 관련 이슈 및 우회 방법
- 카카오톡, 페이스북, 인스타그램 등 인앱 브라우저는 별도의 브라우저가 아닌 앱 내 자체 브라우저
- 문제점: 로그인, 구글 OAuth, HTTPS 리다이렉션 등이 정상 동작하지 않는 경우 많음
- 대응법:
- 사용자 에이전트(UA) 식별 후, 외부 브라우저(크롬, 사파리)로 강제 오픈하는 스크립트 삽입
- Android / iOS 기기 별로 intent 스킴을 이용한 강제 브라우저 전환 처리
- 단점: iOS 사파리는 완전 우회 불가, 별도 페이지로 안내하는 경우가 많음
- 초보자 팁: 인앱 브라우저에서 발생하는 인증 문제는 보안 정책과 플랫폼 제약이니 단순한 프론트엔드 코드만으로는 완벽 방지 어려움
6. TypeScript tsc 전역 설치 및 실행 문제 해결법
- npm 글로벌로 타입스크립트 설치 후 tsc: command not found 에러 발생
- 주요 원인: 설치 후 터미널 세션 리셋(종료 후 재실행)을 안 해서 PATH가 반영되지 않음
- 해결 방법:
- 터미널 완전 종료 후 재실행
- which tsc 명령어로 설치 위치 확인
- 필요 시 npm 전역 설치 경로를 PATH 환경 변수에 추가
- brew로 타입스크립트를 설치하는 등 다른 방법도 있음
- tsconfig 정상 인식 여부 확인도 중요 (특히 noEmit 설정 주의)
- 초보자 팁: 개발환경 설정 후 명령어가 인식 안될 경우 터미널 재실행/환경변수 점검을 우선으로
7. 브라우저 자동재생 오디오 정책과 해결 방안
- 크롬 등 주요 브라우저는 사용자의 액션 없이 소리나는 오디오 자동재생을 차단함
- 자동재생 시 mute 상태거나 볼륨 0이어야 허용됨
- 정책 배경: 사용자 경험과 접근성(UX) 개선 목적
- 옛날(약 10~15년 전)은 배경음악 자동재생이 가능했으나 현재는 웹 접근성 권장으로 엄격해짐
- 초보자 팁: 오디오 재생 전 최소한의 사용자 인터렉션(버튼 클릭 등)을 요구하고, autoplay + muted 조합으로 테스트 필수
8. 면접 및 취업 관련 조언 🤝
- 신입 혹은 경력 개발자 취업시 공부만큼 실무 경험과 포트폴리오 중요
- 프리랜서 경험만 있고 React/Next.js 경험이 부족하면 기업 지원 시 불리할 수 있음
- 빠른 채용 프로세스는 장단점이 있음 (빨리 결정되나 면밀한 평가 부족 가능성)
- 면접에서 부정적 표현은 탈락 가능성 높으므로 조심할 것
- 재직자 전형 등 학교 지원 제도가 다양해, 본인 상황에 맞게 탐색 권장
- 각종 소셜/커뮤니티에서 면접 후기나 회사 상황 정보를 공유하면 큰 도움이 됨
- 초보자 팁: 지원 전 회사 분위기, 채용 프로세스, 수습 기간 조건 꼼꼼 확인 권장
9. 프론트엔드 성능 및 CDN 운영 이야기 🚀
- TTFB(Time To First Byte) 개선은 서버 성능과 CDN 구성이 핵심
- 이미지 외주 업체가 구형 NAS를 사용하면 느릴 수 있어, 빠른 CDN(CloudFront, Cloudflare 등) 고려
- 스트리밍 렌더링을 도입하면 초기 렌더링 속도 개선에 도움됨
- 브라우저 캐시가 적용돼도 Lighthouse 등 성능 측정 도구에서는 초기 응답시간 문제로 나쁠 수 있음
- CDN을 쓸 때도 상황에 따라 장단점이 있으니 환경 맞게 선택
- 초보자 팁: 프론트 성능은 서버 최적화와 CDN 활용이 중요하며, 클라이언트 최적화는 보조 역할임
10. GitHub Actions 및 CI/CD 자동화 경험
- GitHub Actions는 워크플로우 자동화에 유용하며 workflow_call 등 최신 기능 존재
- 자동 빌드, 배포, 테스트, 코드 문서화 자동화에 도움됨
- 셀프호스팅과 클라우드 서비스 선택 시 장단점 존재, 문제 많을 경우 Jenkins 등 대안도 검토
- 초보자 팁: 자동화 도구는 처음에는 간단한 스크립트부터 적용하며 점진적으로 확장하는 게 바람직함
면접팁⚡
- React Query에서 리스트 아이템 삭제 후 상세 페이지 상태 관리 방법 숙지하기
- React Hook Form 다중 폼 동적 구현 시 key 관리와 폼 분리 중요성 어필 가능
- 인앱 브라우저 한계점 및 우회법을 알고 있으면 모바일 웹 개발 경험 높게 평가됨
- tsc 등 개발 도구 설치 및 환경 변수 문제 해결 경험이 있으면 실무 역량 증명에 도움
- 사용자 인터랙션 없이 오디오 자동재생이 차단된다는 점을 정확히 알고 정책 반영 경험 강조
- 프론트엔드 성능 지표 중 TTFB와 CDN 역할에 대해 명확히 답변할 준비
- 면접 질문에서 긍정적인 태도 유지, 서류 탈락 이유 중 부정적 표현 주의
링크🔗
#ReactQuery#ReactHookForm#인앱브라우저#TypeScript#오디오자동재생#프론트엔드성능#면접#CDN#GitHubActions#개발자토크