목차
- 서버 메모리 누수 디버깅과 관리
- React Query 좋아요 상태 관리 이슈
- 모니터 추천과 해상도 논의
- 프론트/백엔드 역할 분담과 계산 처리
- Next.js 이미지 배포 문제
- UI 디자인 리소스 & AI 디자인 활용
- 개발자 애로사항과 코드 리뷰 문화
- 기타 주제 및 자유 대화
1. 서버 메모리 누수 디버깅과 관리 🖥️
- 메모리 누수란 프로그램이 사용한 메모리를 해제하지 않아 점차 메모리가 부족해지는 현상.
- 서버에서 메모리 누수를 찾으려면 프로파일링 툴을 사용해 메모리 사용 패턴 확인이 필요.
- 메모리 패턴 설명:
- 메모리 직접 제어하는 언어(C/C++ 등)는 메모리가 계속 누적되는 추세.
- 가비지 콜렉션(GC)이 있는 언어(JavaScript, Java 등)는 메모리가 올랐다 내렸다 반복하지만, 지속 상승하는 경우 누수 가능성을 의심.
- 메모리 누수 주요 원인:
- 인터벌(interval) 타이머를 clear하지 않음.
- 캐시가 불필요하게 쌓임.
- 저장공간 문제도 성능에 영향.
- 넥스트.js(Next.js) SSR 서버 운영 시 메모리는 넉넉한 편이 유리함.
- 트래픽이 많으면 2코어 4GB 서버도 부족할 수 있음.
- 네트워크 이슈도 성능 저하 원인 중 하나이며, 관리자가 서버 대수를 늘려 대응 가능.
- 프론트 부하 테스트는 AWS Amplify, 베르셀(Vercel) 같은 플랫폼에서는 별도로 하지 않는 경우가 많음.
2. React Query 좋아요 상태 관리 이슈 ❤️🩹
- 좋아요 버튼 클릭 후 다른 페이지 이동 및 뒤로가기 시 UI 상태가 리셋되는 문제 발생.
- 상태 관리는 보통 React Query 같은 라이브러리를 사용하며 캐시 관련 문제일 가능성 있음.
- React Query의 staleTime을 조정해서 해결할 수 있음. staleTime은 캐시가 신선하다고 간주하는 시간.
- 문제 원인:
- API 호출 후 상태를 애플리케이션 상태와 일치시키지 않음.
- SPA 특성상 뒤로가기는 브라우저의 bfcache(Back-Forward Cache)에 의존하므로 상태 관리에 주의 필요.
- 상태 관리 방식:
- API 호출 후 전체 데이터 재조회 방식 (정확하지만 서버 부하가 있을 수 있음).
- 낙관적 UI(optimistic update): 클라이언트에서 즉시 상태 변경 후, 서버 응답에 따라 롤백 처리.
- UI 상태 초기화 문제는 컴포넌트 내부 상태 관리 로직 확인 필요.
- React Query 외 리덕스(Redux) 같은 전역 상태 관리 도구 활용 시 더 편리하다는 의견도 있음.
3. 모니터 추천과 해상도 논의 🖥️✨
- 개발용 모니터는 크고 해상도가 높을수록 가독성, 생산성에 도움.
- 32인치 이상에서 4K 해상도를 사용하는 것이 이상적이다는 의견.
- 27인치 크기에 4K는 픽셀 크기가 너무 작아 눈에 무리일 수 있음.
- 와이드모니터(34인치) 추천, 평면보다 곡률형 모니터가 목 건강에 도움.
- 모니터 구매 시 비싼 제품을 싸게 사는 것이 가성비 좋은 선택.
- 눈 건강을 위해 모니터 크기, 해상도, 시청 거리(약 80cm 이상) 조절 권장.
- 충분히 큰 화면에서는 코드 오타와 실수를 줄일 수 있음.
- 여러 대 모니터 병행 사용 가능성이 있음.
4. 프론트엔드와 백엔드 역할 분담 및 계산 처리 🔄
- 회사마다 프론트엔드와 백엔드 역할 분담이 다르며 "정답"은 없음.
- 대체적으로 데이터베이스 접근과 무거운 계산은 백엔드가 담당.
- 화면 표시용 단순 계산이나 자주 변경되는 비즈니스 로직은 프론트에서 처리하는 경우 증가.
- 프론트에서 계산 시 배포가 빠르고 즉각적인 업데이트 가능.
- 백엔드 계산 주요 장점은 보안과 데이터 정합성 보장.
- CPU, 메모리 사용 관점에서 과도한 클라이언트 계산은 사용자 기기 성능에 영향 가능.
- 서버 리소스 절약 또는 비용 절감 목적에 따라 프론트 쪽 계산 비중도 결정됨.
- 케이스바이케이스로 유연한 설계 권장, 고정된 규칙보다는 상황에 따른 협의가 필요.
5. Next.js 이미지 배포 문제 📸
- Next.js의 public 폴더는 정적 자산을 배포 시 자동으로 서빙함.
- next/image 컴포넌트로 import한 이미지와 URL 경로를 직접 쓰는 방식의 차이가 있음.
- 배포 후 public 폴더의 이미지를 직접 참조할 땐 경로 앞에 /를 붙여야 정상적으로 작동.
- 개발 환경(next dev)과 실제 배포 환경 간 경로 문제와 대소문자 민감도가 다를 수 있음.
- 이미지가 안 보일 경우 서버 경로 설정이나 대소문자 오타, 이미지 파일이 올바르게 배포됐는지 확인 필수.
- 공식 문서에서 정적 자산 처리 방법을 참고할 것: https://nextjs.org/docs/app/building-your-application/optimizing/static-assets
6. UI 디자인 리소스 & AI 활용 🎨
- 5만원 이하로 구매할 수 있는 UI 디자인 키트나 템플릿 추천.
- Figma 커뮤니티에는 다양한 무료 및 저렴한 날씨앱 디자인, UI 키트가 많음.
- 다만 연습용 습작 디자인이 많고, 오토레이아웃이 제대로 안 되어 있을 수 있음.
- 저작권 상업적 이용이 아닌 연습/개인 프로젝트라면 대부분 무료 사용 가능.
- 유명 디자인 클론(예: 애플 날씨 앱) 템플릿도 찾아볼 수 있음.
- AI 디자인 생성 도구 활용도 가능하나, 완성도는 본인이 수정해야 하는 경우가 많음.
- 디자인은 껍데기지만 사용자 경험에 큰 영향이 있으므로 가능하면 예쁘고 사용성 좋은 템플릿 권장.
7. 개발자 애로사항과 코드 리뷰 문화 🧑💻
- 코드 리뷰에서 일관성 없는 코드나 무분별한 코드 작성에 대해 스트레스 겪음.
- 일관성 있는 스타일과 규칙 준수가 팀 협업에 중요함.
- 좋은 팀 문화는 갈등을 줄이고 생산성 향상에 도움.
- 때로는 좋은 팀으로 이직하는 것도 한 방법.
- 리뷰할 때는 상대방 의도 파악과 이해를 전제로 해야 함.
- 드립과 유머를 섞어 소통하는 분위기가 존재함.
8. 기타 주제 및 자유 대화 💬
- 주식, 코인, 개인 일상 이야기 및 농담 다수.
- 직장 환경, 재택근무, 이직과 관련한 경험 공유.
- 플스, 라즈베리파이 등 개인 하드웨어 이야기.
- 공부 방법, 영어 학습 추천(민수킴 데일리 코리안) 안내.
- 퇴사와 관련된 농담과 소통.
- 개발 관련 간단한 Q&A (예: ADID 웹 추출 불가 등 간단 질문).
면접팁⚡
- 메모리 누수 디버깅 방식과 GC 작동 방식을 명확히 이해하는 것이 중요.
- React Query와 같은 상태 관리 라이브러리를 쓸 때, 캐시 유효 기간(staleTime) 개념과 사용법을 숙지할 것.
- Next.js public 폴더와 이미지 처리 관련 경로 문제를 이해하고, 실제 운영 환경 차이도 설명할 수 있으면 좋음.
- 프론트/백엔드 역할 분담에 대해 팀 상황에 맞춘 유연성을 어필하되, 보안과 성능 측면을 고려하는 균형 잡힌 시각 제시.
- UI/UX 디자인 여부가 개발에 미치는 영향과 현실적인 디자인 작업의 난이도도 인지하고 있으면 평가에 긍정적으로 작용.
링크🔗
- 메모리 누수 관련 블로그: https://m.blog.naver.com/pjt3591oo/222914507873
- Next.js Static Assets 공식 문서: https://nextjs.org/docs/app/building-your-application/optimizing/static-assets
- 무료/저렴한 날씨앱 UI 키트
- https://kr.freepik.com/premium-psd/weather-forecast-app-ui-kit_20683936.htm
- https://www.figma.com/file/CEVYEvmrvZRz7ts687sSvl/WeatherMe-Website-(Community)
- https://www.figma.com/file/xPBS6bBFwDqzqT7bQTM6ji/Weather-Forecast-App-(Community)
- https://www.figma.com/file/JAcooxDo6vBu55QlPH8MCT/Apple-Weather-App-Clone-(Community)
- React Query staleTime 튜닝 팁 (관련 유튜브 쇼츠 등 공유됨)
- 유튜브 쇼츠 (개발 관련 짧은 팁)
https://youtube.com/shorts/-0Js-EUQUBU?si=CqwbytxFlVMKFJ2f
https://youtube.com/shorts/VMAVR86ChNU?si=ztxIZeG1-OJJRDz5
#메모리누수#ReactQuery#좋아요버튼#Nextjs#프론트엔드#백엔드#모니터추천#UI디자인#이미지배포#코드리뷰