COMMIT.chat
View Bookmarks
react 썸네일react

2024-04-18

목차

  1. 서버 메모리 누수 디버깅과 관리
  2. React Query 좋아요 상태 관리 이슈
  3. 모니터 추천과 해상도 논의
  4. 프론트/백엔드 역할 분담과 계산 처리
  5. Next.js 이미지 배포 문제
  6. UI 디자인 리소스 & AI 디자인 활용
  7. 개발자 애로사항과 코드 리뷰 문화
  8. 기타 주제 및 자유 대화

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 디자인 여부가 개발에 미치는 영향과 현실적인 디자인 작업의 난이도도 인지하고 있으면 평가에 긍정적으로 작용.

링크🔗

#메모리누수#ReactQuery#좋아요버튼#Nextjs#프론트엔드#백엔드#모니터추천#UI디자인#이미지배포#코드리뷰
이전 포스트

2024-04-17

2024년 4월 17일
다음 포스트

2024-04-19

2024년 4월 19일