COMMIT.chat
View Bookmarks
react 썸네일react

2024-05-07

목차

  1. 리액트 개발자 정모 안내
  2. Next.js에서 SSR과 CSR 이해 및 페이지 데이터 패칭 문제
  3. 퇴사 및 노동청 상담 관련 현실 조언
  4. 신용대출 관련 조건 및 실무 팁
  5. 차트 라이브러리 활용 경험 및 UI 라이브러리
  6. 포트폴리오와 이력서 차이 및 작성 팁
  7. React useEffect 로딩 상태 처리 질문
  8. 검색 자동완성 API 호출 방식 분석
  9. 애플 신제품 발표 내용 공유와 소감
  10. 기술 면접 관련 팁 및 참고사항

1. 리액트 개발자 정모 안내😀

  • 5월 24일 금요일 19시, 장소는 강남권 또는 잠실 예정.
  • 개발자 모임으로 남성분이 많으나 여성분도 환영.
  • 관심있는 분들은 연락 부탁.
  • 현재 9명 정도 참석 예정.

2. Next.js SSR과 CSR 및 데이터 패칭 이슈 💻

  • Next.js 앱 라우터에서 page.tsx 내 fetch 사용 시 서버 사이드 렌더링(SSR) 실행됨.
  • 이동 간 페이지는 클라이언트 사이드 렌더링(CSR)으로 동작하지만 최초 접속은 SSR.
  • Link 컴포넌트 사용 시 초기 렌더링은 SSR, 이후 내비게이션은 CSR로 동작.
  • 문제: 페이지 간 이동 시 매번 SSR 코드 실행(데이터 fetch)이 안 되는 현상 발생.
  • 해결 방법:
    • revalidate 값을 0으로 설정해도 최초 SSR 후 CSR 로직 우선.
    • 프로덕션 환경에서 prefetch 설정 검토 필요.
    • Next.js 특성상 CSR 전환 과정인 hydration 이해가 필수.
  • 요점: Next.js는 SSR과 CSR이 혼재하는 프레임워크로, 데이터 fetch 동작 방식을 명확히 알아야 함.

3. 퇴사 및 노동청 상담 관련 현실 조언 ⚖️

  • 근무 1년 완주 직전 일주일 전에 갑자기 퇴사하라는 회사 요청 사례 공유.
  • 회사 대처 의도: 퇴직금 지급 회피용(1년 미만 퇴사 처리).
  • 조언:
    • 노동청에 상담을 받는 것이 우선.
    • 철판 깔고 1년 근무를 완주하는 게 마지노선일 수 있음.
    • 퇴사일 조율이 복잡하며 서로 감정 상할 수 있음.
    • 권고사직인가? → 불분명하며 대부분 자진퇴사로 처리됨.
  • 추가 팁: 노동법에 따라 해고 시 최소 한 달 치 임금 지급해야 하며, 노동청 도움 필수.

4. 신용대출 관련 조건 및 실무 팁 💳

  • 인터넷 은행(카카오뱅크 등) 중신용 대출 조건:
    • 연소득 최소 2천만 원 이상, 재직 기간 1년 이상 요구 사례 많음.
    • 1년 미만도 가능하나 조건과 금리 다름.
  • 실제 경험:
    • 1금융권은 대출 심사가 까다롭고 1년 이상 재직 요건 있는 경우 많음.
    • 2금융권은 좀 더 유연하지만 높은 이율(8~12%) 부과.
  • 대출 신청 시점:
    • 퇴사 전 대출 신청 권장.
    • 퇴사 후 대출 신청은 처리 어려움.
  • 실질적으로 중요한 건 현재 재직 여부와 소득 신빙성 검증.
  • 팁: 재직 증명서, 연말정산 소득 증빙 자료 준비 필수.

5. 차트 라이브러리 및 UI 라이브러리 경험 공유 📊

  • React에서 HTTP 통신은 axios가 가장 대중적이며 많이 사용됨.
  • CSS/컴포넌트 라이브러리:
    • Material-UI(MUI), Chakra UI, Ant Design이 인기.
    • TailwindCSS 등은 스타일링 라이브러리임.
    • Radix UI, shadcn UI 등은 UI components kit로 추천됨.
  • 차트 라이브러리:
    • react-chartjs-2, apexcharts, D3.js 기반 라이브러리 사용 경험 공유.
    • D3는 강력하나 React와 통합 시 다소 어려움 존재.
    • 디자인과 유지보수를 고려해 디자이너와 협의해 선택 권장.

6. 이력서와 포트폴리오 준비 팁 📄

  • 이력서: 기본적인 경력사항 및 개인 정보 위주로 작성, HR용.
  • 포트폴리오(경력기술서): 구체적인 프로젝트 경험 및 개인 역할 상세 기술.
  • 보안 주의 사항:
    • 회사 내부 파일, 기밀정보 노출 주의.
    • 포트폴리오에 회사 정보가 포함될 경우 내부 정책과 보안 문제 확인 필수.
  • 취업 준비 초보자도 구체적 성과나 해결한 문제 중심으로 작성하는 것이 경쟁력 있음.
  • 신입 및 경력 이직 시 포트폴리오는 채용 담당자에게 큰 도움이 됨.

7. React useEffect 로딩 상태 처리 질문 ❓

  • 요구사항:
    • API 호출 전 300ms 기다림 후 로딩 메시지 표시.
    • API 호출 완료 후 로딩 메시지는 최소 500ms 이상 유지.
    • 예: 호출이 400ms면, 300ms에서 로딩표시 후, 500ms까지 기다린 후 데이터 출력.
  • 구현 팁:
    • 두 개의 useEffect를 분리해 상태별 타이머 관리.
    • 호출 시작 시 타이머 설정 후 일정 시간 지연 출력.
    • 호출 완료 시 로딩 상태를 유지하는 타이머 설정 후 해제.
  • 핵심은 중복 타이머 방지와 클린업 적절 관리.

8. 검색 자동완성 API 호출 방식 분석 🔍

  • 사례: 키워드 입력 시 아이템 이름은 네트워크 호출에 나타나지 않고, 이미지 API만 호출되는 듯 보임.
  • 멤버 의견 종합:
    • 전체 아이템 데이터를 처음에 모두 받아 캐싱 처리 후 필터링 가능성.
    • 혹은 서버에 keyword like 쿼리 보내어 연관 아이템 데이터 가져옴.
    • 이미지도 같이 캐싱하여 네트워크 로드 최소화.
  • 결론: 검색 자동완성은 대개 서버에서 연관된 데이터를 조회해 JSON으로 받고, 클라이언트에서 필터링 및 출력.
  • 완전 데이터 미수신 상태에서는 구현 어려움.

9. 애플 신제품 발표 내용 공유 및 의견 🍎

  • M2 기반 아이패드 에어 11/13인치, M4 예상 아이패드 프로, 애플 펜슬 프로 3세대 출시 발표.
  • 성능 향상은 크지 않으나 가성비 좋다는 평가 다수.
  • 신제품 특징:
    • OLED 디스플레이, 향상된 음질과 카메라 스펙 개선.
    • 애플 펜슬 3세대는 일부 고급 기기 전용.
  • 이벤트 실시간 온라인 시청 경험 공유.
  • 개발자들 사이에서는 성능보다 실용성을 더 중시하는 의견 많음.

10. 기술 면접 팁 및 참고사항 ⚡

  • 면접 시 프로젝트 경험을 이야기할 때는 ‘무엇’보다 ‘어떻게’ 문제를 해결했는지 집중.
  • 회사 내부 소스나 데이터를 절대 외부에 공유하지 말 것.
  • 업무 경험이 짧아도 포트폴리오나 경력기술서에 자신의 역할과 기여도를 명확히 기술.
  • React 관련 질문 예시:
    • SSR과 CSR의 차이 및 Next.js에서 이 둘이 어떻게 공존하는지 설명.
    • useEffect 의 비동기 처리 방식과 클린업(clean-up) 함수 역할.
    • UI 라이브러리(Chakra UI, MUI 등)와 CSS 라이브러리의 차이점.
  • GitHub, 블로그 등에 프로젝트를 공유할 경우 보안에 각별히 유의할 것.

링크🔗

#React#Nextjs#SSR#CSR#퇴사#노동청#신용대출#차트라이브러리#포트폴리오#애플이벤트
이전 포스트

2024-05-06

2024년 5월 6일
다음 포스트

2024-05-08

2024년 5월 8일