COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-17

목차

  1. 로컬호스트와 모바일 네트워크 접근 문제
  2. Next.js 13 버전 이슈 및 롤링 배포
  3. React 상태관리와 Typed Hooks (Redux Toolkit, Contentlayer)
  4. 퍼블리셔와 프론트엔드 역할 구분
  5. 취업 및 면접 관련 경험과 조언
  6. React 마우스 좌표 최적화 방법
  7. WebGL 및 차트 라이브러리 추천
  8. VSCode 맥 버전 업데이트 알림 문제
  9. DevOps 개념 및 역할에 대한 토론
  10. 개발자 연봉 및 커리어에 관한 논의

1. 로컬호스트와 모바일 네트워크 접근 문제

  • npm run build 후 serve -s build 명령어로 로컬 서버 실행 시, PC에서는 접속 가능.
  • 모바일에서 접속하려면 PC의 IPv4 주소 + 포트를 입력해야 하는데, 모바일과 PC가 같은 와이파이여도 IP가 다를 수 있음.
  • 모바일에서 PC 서버에 접속하기 위한 정확한 IP 주소를 ipconfig로 확인 필요.
  • 외부에서 접근하려면 네트워크 포트가 개방되어야 함.
  • 배포 목적이라면 GitHub Pages, Vercel 같은 외부 플랫폼 활용 권장.
  • 네트워크 문제 해결법:
    • PC와 모바일 동일 네트워크 확인
    • PC IP 주소(ipconfig) 확인 후 모바일에서 해당 IP와 포트로 접속
    • 방화벽·라우터 설정 확인 (포트 포워딩 등)
    • 임시로 ngrok 같은 터널링 서비스 사용 가능 (하지만 오류 주의)

용어 설명:
IPv4는 네트워크 내 기기 식별 주소. 같은 와이파이라도 라우터가 여러 대인 경우 IP가 달라질 수 있음.
ngrok은 로컬 서버를 외부에 공개하기 위한 터널링 서비스.

2. Next.js 13 버전 이슈 및 롤링 배포

  • Next.js 13.5.5 이후 버전에서 Loading chunk [숫자] failed 에러 발생 사례가 보고됨.
  • 13.5.4 버전으로 다운그레이드 시 문제가 해결된다는 의견 다수.
  • 롤링 배포는 여러 버전의 서버를 교체하며 다운타임을 최소화 하지만 완전 무중단은 어려움.
  • AWS Lambda 등 서버리스 환경, PM2, 롤링 배포 방식으로 무중단 구현 가능.
  • 이슈 원인: 파일 서빙 실패 및 배포 과정 중 잠깐 서버 응답 지연.

용어 설명:
롤링 배포는 서비스 중단을 최소화하며 업데이트하는 배포 기법으로, 일부 서버만 교체하고 점차 전환함.
*서버리스(Lambda)*는 서버 관리 없이 코드를 실행할 수 있는 클라우드 서비스.

3. React 상태관리와 Typed Hooks (Redux Toolkit, Contentlayer)

  • Redux Toolkit 사용 시 TypeScript와 함께 Typed Hooks를 정의하는 것이 일반적.
  • Typed Hooks는 컴포넌트들에서 타입 안정성을 높이고 코드 중복 없이 편리하게 디스패치와 상태 선택을 할 수 있게 해줌.
  • circular import dependency (순환 참조) 문제 방지 위해 별도의 파일에 Typed Hooks 정의 권장.
  • Contentlayer로 정적 블로그 구현 시, 복잡한 상태관리 필요 없으면 Redux 대신 useState로 충분.
  • 상태관리 라이브러리는 프로젝트 복잡도 및 팀 협업 필요에 따라 선택.

용어 설명:
Typed Hooks는 TypeScript에서 React-Redux용 타입이 지정된 커스텀 훅으로, useSelector, useDispatch를 타입 친화적으로 래핑함.
Circular import는 두 모듈이 서로를 참조하며 발생하는 의존성 문제.

4. 퍼블리셔와 프론트엔드 역할 구분

  • 퍼블리셔는 주로 HTML, CSS, 약간의 JavaScript(ES5 수준) 작업 담당.
  • 프론트엔드 개발자는 React 등 라이브러리/프레임워크를 이용하여 컴포넌트 개발, 상태관리, 이벤트 처리 등을 수행.
  • 회사마다 전문성 및 업무 범위가 상이하며, 퍼블리셔가 컴포넌트를 만들기도 하나 대부분 프론트엔드가 담당.
  • 협업 시 명확한 업무 역할(R&R) 가이드 및 컴포넌트 단위 분리가 중요.

5. 취업 및 면접 관련 경험과 조언

  • 입사 전 서류 요청 사례가 드물고, 대부분 확정 후 제출 요구.
  • 조기 서류 요구는 취업 사기일 가능성도 있으므로 주의 필요.
  • 학위증명서, 재직증명서 등은 확인용으로 제출하지만 급여명세서나 통장 사본 등은 신중해야 함.
  • 면접 시 부족한 기술 스택 질문은 솔직함과 학습 의지 강조하는 것이 좋음.
  • 경쟁 과열 속 차별화 포인트는 기술 역량, 문제 해결 경험, 지속적 자기개발.

6. React 마우스 좌표 최적화 방법

  • 단순 useState에 마우스 좌표 저장 시 너무 많은 상태 업데이트로 성능 저하 발생.
  • 해결책:
    • throttle 혹은 debounce 함수 사용해 이벤트 빈도 제한
    • useDeferredValue 또는 useTransition 훅으로 렌더링 지연 처리
    • React 상태 대신 ref를 활용해 DOM 직접 조작 (원시적 방법)
    • requestAnimationFrame 활용으로 애니메이션 프레임에 맞춰 처리하여 부드러운 업데이트
  • 좌표 값 렌더링 시 GPU 가속이 가능한 transform: translate CSS 속성 활용 권장.

7. WebGL 및 차트 라이브러리 추천

  • WebGL 질문에 대해 Shader 코드에서 varying 키워드 사용 확인, GLSL 기본 문법 체크.
  • 차트 라이브러리 중 인기 있는 것은 ApexCharts, Chart.js, Nivo, Highcharts.
  • Nivo는 문서가 잘 되어 있고 기본 UI가 예쁘지만 복합 차트 구성은 직접 구현이 필요.
  • Highcharts는 대시보드에 자주 사용되며 유료 라이선스 존재.

8. VSCode 맥 버전 업데이트 알림 문제

  • 맥에서 VSCode가 계속 업데이트 알림을 표시하는 이슈 보고.
  • 최신 버전 설치 후 알림이 사라지지 않고 재부팅만 하는 경우도 있음.
  • 원인으로 확장 프로그램 간 충돌 또는 캐시 문제 추정.
  • 해결법:
    • 설정 초기화 또는 확장 프로그램 개별 점검
    • 소규모 업데이트 알림 무시 후 정상적으로 업데이트 되었는지 확인

9. DevOps 개념 및 역할에 대한 토론

  • DevOps 정의가 포괄적이고 회사마다 문화와 직무 기준이 다름.
  • 기본적으로 개발 효율성 향상, 인프라 자동화, CI/CD 구축, 운영과 개발 협업 강조.
  • 클라우드 인프라 엔지니어 역할과 겹치기도 하며 Jira 자동화 같은 간단 작업도 포함될 수 있음.
  • 계속 변화하는 분야로 최신 도구 및 문화에 적응 필요.

10. 개발자 연봉 및 커리어 논의

  • 프론트엔드 연봉은 평균 6~8천만 원대, 백엔드는 더 높게 보고됨.
  • 실력과 경력에 따라 천차만별이며, 상위 1%는 1억 원 이상 받기도 함.
  • 풀스택 개발자 수요 증가 추세이나 잡무가 많아지는 단점 존재.
  • 커리어 목표 설정으로 PM으로 전환, 전문 분야 심화 등 다양함.
  • 건강관리와 자기개발의 중요성 강조.

면접팁⚡

  • 부족한 기술 스택 질문 받으면 솔직히 인정하되, 비슷한 언어 경험이나 학습 의지를 강조할 것.
  • 이력서 작성 시 프로젝트 경험이 취소되거나 회사가 망한 경우, 문제 해결 과정과 본인이 맡은 업무를 중점적으로 서술.
  • 입사 전 서류 제출 요구 시 신중하게 판단하고 개인 정보는 최소한으로 제공.
  • 상황별 협업 경험 및 문제 해결 사례를 구체적으로 준비하면 긍정적 인상 가능.

링크🔗

#React#Nextjs#ReduxToolkit#퍼블리셔#면접#상태관리#배포#WebGL#DevOps#차트라이브러리
이전 포스트

2023-11-16

2023년 11월 16일
다음 포스트

2023-11-18

2023년 11월 18일