COMMIT.chat
View Bookmarks
react 썸네일react

2024-03-20

목차

  1. React Query와 Refetch 사용법
  2. Next.js 출력 및 PDF 생성 라이브러리 추천
  3. React 캘린더 라이브러리 현황 및 추천
  4. TypeScript 타입 대 인터페이스 차이와 활용
  5. 개발자 연봉, 이직, 회사 내 갈등 이야기
  6. 영어 발음과 커뮤니케이션 경험담
  7. React 출력 관련 라이브러리 및 CLI 출력 고민
  8. 개발자 스트레스와 회사 정치 문제
  9. 자바스크립트 불리언 변환 연산자 (!!) 설명
  10. 개발 관련 커뮤니티 프로젝트 및 취업 지원 홍보

1. React Query와 Refetch 사용법 🎯

  • React Query에서 useQuery 훅을 사용할 때, enabled: false 옵션을 주면 초기 API 호출이 자동으로 실행되지 않음.

  • 상태(id)가 바뀔 때마다 수동으로 refetch()를 호출해야 함.

  • 이를 간편하게 하려면 useEffect를 사용해 id 변경 시점에 refetch를 실행하도록 구현할 수 있음.

  • 예시: js const result = useQuery({ ... , enabled: false }); useEffect(() => { if(id) result.refetch(); }, [id]);

  • 쿼리 키(queryKey)에 id를 포함시키면 React Query가 자동으로 데이터 캐싱과 갱신을 돕지만, enabled: false 상태에서는 위처럼 수동 호출 필요.

2. Next.js 출력 및 PDF 생성 라이브러리 📄

  • Next.js에서 출력이나 PDF 생성 관련 라이브러리를 찾는 질문이 많음.
  • 대표적 라이브러리:
    • react-pdf: React 컴포넌트로 PDF 생성 및 뷰잉 가능.
    • react-pdf-viewer: PDF 뷰어 기능 제공.
    • react-print-pdf: React 환경에서 바로 PDF 출력 지원.
  • 주의할 점:
    • HTML + CSS로 작성된 차트(특히 바차트 등 SVG/Canvas 포함)는 인쇄 시 사라질 수 있음.
    • 모바일 웹에서 window.print() 기능은 iOS/Android 지원이 달라 PC 환경에서 주로 사용됨.
  • 대안:
    • 내용을 이미지로 변환 후 출력하는 방법도 고려 가능, 단 보고서처럼 텍스트가 중요한 문서에는 부적합할 수 있음.

3. React 캘린더 라이브러리 현황 📅

  • 스케줄 기능을 포함한 달력 컴포넌트는 꽤 많은 라이브러리가 존재함.
  • 추천 라이브러리:
    • react-datepicker: 간단한 날짜 선택부터 어느 정도 스케줄링 지원.
    • toast-ui calendar (https://ui.toast.com/tui-calendar): 오픈소스고 다양한 스케줄링 기능 지원, 다만 커스텀 어려움 있음.
    • react-big-calendar: 큰 프로젝트에서 많이 쓰이며 구글 캘린더 같은 UI 제공.
    • fullcalendar: 풍부한 기능과 다양한 옵션 제공.
  • 직접 개발하는 경우가 많지만, 외부 라이브러리를 활용하면 시간 절약 가능.

4. TypeScript 타입과 인터페이스 차이 및 활용 방법 📝

  • 타입(type)과 인터페이스(interface)는 타입 선언에 사용되며 용도와 특성이 약간 다름.
  • 인터페이스: 주로 객체 형태를 선언할 때 사용하며, 선언 병합 가능(즉, 같은 이름의 인터페이스가 여러 곳에서 합쳐짐).
  • 타입: 더 넓은 타입 표현 가능 (유니언, 튜플 등 다양한 타입 정의에 적합).
  • 개발자마다 선호도가 다르고, IDE(예: WebStorm, VSCode)에 따라 타입 추론과 자동완성이 다르게 보일 수 있음.
  • !!value 연산자를 잘 활용하여 boolean 변환을 명확히 처리하는 방법도 이해하는 게 중요.
  • 면접에서 타입 대 인터페이스 차이를 묻는 경우가 많으므로 경험과 실제 해결한 문제 사례를 준비하면 좋음.

5. 개발자 연봉, 이직, 회사 내 갈등 이야기 💼

  • 개발자들의 연봉 현실과 이직 이야기가 활발히 공유됨.
  • 특히 기존 직원과 이직한 경력직 간 연봉 격차 문제로 내부 갈등이 일어나기도 함.
  • 회사 내 정치 상황, 팀 내 권력 다툼 및 불합리한 처우 문제도 심각하게 언급됨.
  • 대체로 처우 개선 및 팀원 유지에 실패하는 악순환 패턴 지적.
  • 취업 후에도 꾸준히 다른 회사 동향 파악 및 커피챗으로 네트워킹 유지하는 것이 추천됨.

6. 영어 발음과 글로벌 커뮤니케이션 경험 🌏

  • 개발자들은 다양한 나라 출신과 협업하며 영어 발음 차이를 많이 경험함.
  • 발음이 다르더라도 상호 이해가 되면 문제없다는 태도가 중요.
  • 과도한 발음 지적이나 예민해하는 건 오히려 팀 분위기 해칠 수 있음.
  • 스트레스 관리와 긍정적인 자세 유지 추천.

7. React 출력 및 CLI 출력 라이브러리 고민 🖨️

  • 출력 관련 라이브러리는 용도(로깅, CLI UI, 디버깅, 포맷팅 등)에 따라 다양함.
  • 유명 라이브러리:
    • ink: React 스타일로 CLI 인터페이스 개발 가능.
    • chalk: 컬러풀 콘솔 출력 지원.
    • ansis: 성능 벤치마킹이 되는 출력 라이브러리.
  • 출력은 단순한 로그부터 인터랙티브 CLI, 애니메이션 효과까지 폭넓은 범주임.
  • 리액트 환경에서는 Lottie, Rive 같은 툴로 애니메이션 효과를 활용하는 사례도 있음.

8. 개발자 스트레스와 회사 정치 문제 😓

  • 디자이너와 개발자 간의 조직 내 정치, 불필요한 갈등 경험 다수 공유됨.
  • 권력 과시, 불공정한 대우, 불필요한 회의 및 레퍼런스 체크 강요 등이 스트레스 요인.
  • 조직 내 불협화음은 업무 효율에 악영향.
  • 이런 상황에 처했다면 힐링을 위한 휴식과 이직 고민도 필요함.

9. 자바스크립트 불리언 변환 연산자 (!!) 설명 ⚙️

  • !는 논리부정 연산자로, !value는 value를 boolean으로 변환한 후 반전된 값을 반환함.
  • !!value는 논리부정을 두 번 적용하여 원래 value의 "불리언 판별값"을 반환.
  • 예를 들어, !!null은 false, !!'abc'는 true.
  • 타입스크립트, 리액트 등에서 조건문 검사 시 자주 사용됨.
  • 연산자의 의미와 쓰임새를 잘 이해하고 있으면 코드 가독성 향상에 도움됨.

10. 개발 관련 커뮤니티 프로젝트 & 취업 지원 홍보 🚀

  • 스위프(SWYG) 단기 웹개발 프로젝트 참가 모집 중.
  • 기획자, 디자이너, 개발자 팀으로 협업 경험 쌓고 포트폴리오 제작 가능.
  • 초보자도 참여할 수 있도록 가이드라인과 템플릿 제공.
  • 참가비는 99,000원(수료 시 10만원 리워드 지급).
  • 기간: 4월 8일 시작, 6월 1일 발표 및 네트워킹 행사.
  • 링크 참고 및 관심 있는 분들은 지원해보길 추천.

면접팁⚡

TypeScript - 타입 vs 인터페이스 질문 대비

  • 차이점과 각각의 장단점을 명확히 정리할 것.
  • 인터페이스는 선언 병합 가능하여 확장에 용이함.
  • 타입은 유니언, 튜플 등 복잡한 타입 표현에 적합.
  • 실제 프로젝트에서 어떤 상황에 무엇을 썼는지 경험 중심으로 말하면 좋음.
  • 타입 추론과 에디터(IDE)와의 연동 경험도 어필 포인트.

React Query 질의응답

  • enabled 옵션과 수동 refetch 호출의 차이 이해.
  • 쿼리 키 변경에 따른 자동 재호출 원리 설명 가능.
  • 커스텀 훅 내에서 useEffect를 사용해 상태변화 감지 후 리페치 구현 방법 준비.

링크🔗

#ReactQuery#NextJS#TypeScript#ReactCalendar#개발자이슈#면접팁#JavaScript#개발문화#커뮤니케이션#PDF출력
이전 포스트

2024-03-19

2024년 3월 19일
다음 포스트

2024-03-21

2024년 3월 21일