2025-04-08

목차

1. 출근과 일상 이야기
2. UI 데이터 갱신 문제 (React & Next)
3. 코드 스플리팅과 네트워크 영향
4. 회사 근무 환경과 업무 문화
5. 외부에서 사내 서버 접근 이슈
6. 개발 관련 팁과 툴 소개
7. 질문과 문제 해결 사례
8. 면접팁⚡ (유닛 테스트 관련)
9. 공유된 링크🔗

1. 출근과 일상 이야기

• 새 출근자의 설렘과 긴장 이야기
• 다양한 근무 시간과 워라밸(Work-life balance) 문화 공유
• 개발자 사이 소소한 유머와 친목 다지기
• 좋은 회사 문화에 대한 긍정적인 의견 다수

2. UI 데이터 갱신 문제 (React & Next)

핵심

• 네비게이션 바(nav)의 특정 버튼에 서브 페이지 데이터 수를 실시간으로 표시하는 문제
• 페이지간 이동 시 뱃지값(예: 알림 갯수)이 갱신되지 않는 현상 발생

설명

• React 컴포넌트간 데이터 공유 시 '상위 컴포넌트에서 상태 끌어올리기(lifting state up)' 방식을 권장
• Next.js에서는 useState를 이용한 상태관리 외에, 서버사이드 데이터 변경 시 revalidatePath 같은 함수로 데이터 재요청 가능
• 전역 상태관리를 위해 Context API 혹은 Redux 사용 추천
• 실시간 데이터 반영 문제는 캐싱, 데이터 요청 타이밍, 상태변경 감지가 핵심 원인
• outlet 같은 라우팅 컴포넌트를 활용하면 네비게이션과 서브페이지가 공존하며 상태를 공유할 수 있음

팁

• 데이터 갱신을 페이지마다 새로고침 없이 하려면 전역 상태관리 혹은 SWR(react) 같은 데이터 페칭 라이브러리 사용 권장
• Next.js 내장 ISR(Incremental Static Regeneration) 기능 revalidatePath 활용하면 특정 경로의 데이터를 서버에서 재갱신 가능

3. 코드 스플리팅과 네트워크 영향

• 번들을 여러 개로 분리하면 불필요한 코드 로드를 줄여 초기 로딩 성능 개선 가능
• 작은 청크를 여러 개 요청하면 네트워크 연결 횟수가 늘어나 지연 이슈 발생할 수 있으나, HTTP/2 환경에서는 동시 다중 요청 효율적
• 결론적으로 경우에 따라 다르며 HTTP 프로토콜 및 상황에 따른 최적화가 필요
• 초보자에게 "코드 스플리팅"은 빌드 시 코드파일을 여러 개로 쪼개고 필요한 부분만 네트워크로 불러오는 기술 의미

4. 회사 근무 환경과 업무 문화

• 10시 출근, 35시간 근무 등 회사별 다양성 공유됨
• 워라벨 중시 트렌드 반영, 급여 절반 산정한 사례도 언급
• 사내 농담과 유머, 사무실 내 소소한 에피소드 다수 소개

5. 외부에서 사내 서버 접근 이슈

• 사내 클라우드 서버에 APK 배포 후 사내망에서는 정상 다운로드 가능
• 외부망 접속 실패 원인으로 방화벽 설정, 포트포워딩 문제 지적
• 해결책: 방화벽 규칙, 외부에서 사내망 접근 가능하도록 네트워크 셋업 검토필요

6. 개발 관련 팁과 툴 소개

• Vite + React + TypeScript 기반 프로젝트 초기 구성 및 셋업 간편성 언급
• React Router Dom, 테마 설정 등 초기 환경 구축 가이드
• MCP, Gamma 등 개발 효율을 높이는 툴 추천 및 경험 공유
• 코드 초기 설계와 리팩토링 중요성 강조

7. 질문과 문제 해결 사례

• 뱃지 갱신 문제: 상태 관리 방식과 Next.js의 revalidatePath 활용 사례
• 대화 중 코드 예시 제공 및 설명 요청 있었으나 코드 생략됨
• 폰트 자동 서브세팅 라이브러리 문의 (BIIT 등 빌드 툴과 연관)
• 관리자 페이지 접근 권한 문제 보고, 백엔드 역할과 권한체계 중요성 언급

8. 면접팁⚡

• 유닛 테스트(단위 테스트) 질문 대비
  • 단위 테스트는 개발 중 각 컴포넌트나 함수가 제대로 동작하는지 자동으로 확인하는 테스트 방식
  • 리액트 개발 시 컴포넌트의 렌더링 결과, 이벤트 처리 등을 테스트하는 예시
  • 면접에서는 테스트 경험, 상황에서 어떤 테스트를 구현했는지 구체적으로 이야기하면 좋음
  • "유닛 테스트의 중요성", "테스트 도구 사용 경험(Jest, React Testing Library 등)" 준비 추천
  • 질문 예시: "유닛 테스트를 왜 하는가?", "테스트 커버리지란 무엇인가?", "비동기 로직 테스트 방법?"

9. 링크🔗

• React, Next.js 문제 해결 블로그:
  https://blog.naver.com/pjt3591oo/223790470478
  https://blog.naver.com/pjt3591oo/223738880753
• 당근마켓 GraphQL 아티클:
  https://medium.com/p/9ce80d34d39b