2024-10-03

목차

1. SVGR 사용 및 issuer 설정 문제
2. 로그인 세션과 사용자 데이터 저장 방식
3. 카페24와 Next.js 같은 도메인에서의 공존 문제
4. 운동과 개발 이야기
5. React, Android 및 스타일 관련 최신 기술 소식
6. Vim 프로세스 종료 방법
7. 모바일 웹뷰 디자인과 safe area 대응
8. 테스트 도구 선택과 구성 팁
9. TailwindCSS 정렬 순서 제어와 unsafe 룰
10. 웹 이미지 서버 추천 및 간단 호스팅 플랫폼

1. SVGR 사용 및 issuer 설정 문제

• SVGR은 SVG 파일을 리액트 컴포넌트로 변환해 주는 도구임.
• issuer 설정은 SVGR 설정 내에서 어떤 파일을 변환 대상으로 지정하는 옵션.
• issuer만 넣으면 에러가 나는 경우가 있는데, 설정 방식이나 버전 호환 문제일 확률 있음.
• 참고할만한 좋은 리소스로 unplugin icons GitHub 추천.
• SVGR과 unplugin-icons는 SVG 관리를 편하게 해줘서 리액트 프로젝트에 많이 사용됨.

2. 로그인 세션과 사용자 데이터 저장 방식

• 로그인 상태, 사용자 정보 저장을 리덕스에 하기 vs 필요할 때마다 API 호출하기 이슈 발생.
• 보안상 민감정보를 리덕스(클라이언트 상태관리)에 저장하는 것은 추천하지 않음.
• 쿠키(특히 HttpOnly 쿠키) 사용이 권장됨. 쿠키는 브라우저가 자동으로 요청에 첨부해 보안에 유리.
• 로그인 여부만 간단히 확인하는 정도는 로컬 상태 관리 가능하지만, 상세한 유저정보는 서버 API 호출을 통해 받아오는 편이 안전.

3. 카페24와 Next.js 같은 도메인에서의 공존 문제

• 카페24 쇼핑몰 템플릿과 별도의 Next.js 프로젝트를 한 도메인에 배포하는 경우 복잡함.
• 동일 도메인 내에서 서로 다른 경로로 라우팅하는 방법이 있지만 카페24 템플릿 특성상 제한적임.
• 클라우드플레어 같은 프록시 서비스로 라우팅을 조정하거나 별도 서브도메인 활용 권장.
• 직접적인 커스터마이징은 카페24 환경에서 쉽지 않다는 경험담 존재.

4. 운동과 개발 이야기

• 개발자들이 운동과 관련된 일상과 근황을 나눔 (마라톤, 등산, 라이딩 등).
• 운동하면서도 개발 이야기를 놓지 않는 모습이 인상적임.
• 건강과 일상의 균형도 개발자 생활에 중요한 부분임.

5. React, Android 및 스타일 관련 최신 기술 소식

• Meta Connect 2024에서 React 관련 신기술 소개: Meta Connect 링크
• 스타일 관리 라이브러리 StylexJS 소개: StylexJS 사이트
• Wijmo가 무료인 줄 알았으나 유료인 점에 대해 의견 교환.

6. Vim 프로세스 종료 방법

• 윈도우에서 vim.exe 프로세스가 계속 남아있을 때 작업관리자에서 프로세스 종료 권장.
• 프로세스가 백그라운드에서 돌아가면 파일 삭제나 수정이 어려움.

7. 모바일 웹뷰 디자인과 safe area 대응

• 모바일 웹뷰와 네이티브 앱 내 웹뷰에서 하단 바(아이폰 홈바 등) 때문에 safe area 확보 필요.
• iOS, Android 기기별로 safe area 패딩 크기가 다름.
• 보통 디자인 단계에서는 고정 px보다는 유동적 safe area를 고려하는 게 좋음.
• 웹뷰에서는 보통 100lvh(뷰포트 높이 단위)를 사용하지만 주소창 영역 등은 제외 가능.
• 최종 개발 단계에서 safe area에 맞춰 padding/margin 조정 진행.

8. 테스트 도구 선택과 구성 팁

• Next.js 프로젝트 테스트는 무엇을 테스트하냐에 따라 다름.
• 단위 테스트나 로직 테스트는 Vitest 사용 추천.
• E2E(End-to-End) 테스트는 Cypress가 적합.
• “최고의 테스트는 휴먼 아이즈” (사람이 직접 확인하는 것이 가장 중요하다는 의미)도 잊지 말 것을 조언.

9. TailwindCSS 정렬 순서 제어와 unsafe 룰

• Biome(코드 포맷터)에서 TailwindCSS 정렬 순서 조정 가능하지만, unsafe 룰(잠재적으로 위험하거나 비표준 룰)로 분류되어 CLI 명령어로 적용 필요.
• 이 점 참고해서 자동 포맷팅 설정 시 주의 필요.

10. 웹 이미지 서버 추천 및 간단 호스팅 플랫폼

• 이미지 서버 및 간단한 웹 호스팅 플랫폼으로 Cloudflare Pages, Render.com 등이 추천됨.
• Vercel 사용 시 이미지 서버 별도 고민 필요.
• 클라우드 기반 플랫폼을 활용해 빠른 배포 및 관리 가능.

면접팁⚡

• 세션 관리에서 클라이언트 상태 관리를 하는 것과 API 호출의 차이점 설명 가능해야 함
  → 보안 이슈와 언제 서버로부터 데이터를 새로 받아야 하는지 아는지 확인 가능.
• Next.js와 타 CMS/템플릿 환경 공존 문제에 대해서 논의해볼 것
  → 도메인 라우팅, 프록시 설정, 배포 전략 등 현실적인 문제 이해도 평가.
• 모바일 웹뷰의 safe area 개념과 대응 방법은 모바일 앱 개발이나 프론트엔드 직무에서 자주 묻는 질문.
• 테스트 도구의 특성과 용도 구분 (Vitest는 단위테스트, Cypress는 E2E) 이해도 중요.

링크🔗

• unplugin-icons: https://github.com/unplugin/unplugin-icons
• Meta Connect 2024 React 소개: https://engineering.fb.com/2024/10/02/android/react-at-meta-connect-2024/
• StylexJS: https://stylexjs.com/
• Render.com (호스팅/이미지 서버 추천): https://render.com/