COMMIT.chat
View Bookmarks
react 썸네일react

2024-02-20

목차

  1. Headless CMS와 백엔드 추천
  2. React 모달 구현 이슈 및 해결법
  3. 데이터 정규화(Normalization)와 ReactQuery
  4. GraphQL과 RabbitMQ, Kafka 활용 이야기
  5. React 19 업데이트 및 React 역사
  6. Next.js 서버/클라이언트 컴포넌트 이해
  7. CSS Zoom과 화면 비율 조정 방법
  8. 개발자 장비 구매 경험 및 할인 팁
  9. React 관련 용어 및 개념 공유
  10. 개발자 일상과 소소한 대화

1. Headless CMS와 백엔드 추천

  • Contentlayer와 Sanity 같은 Headless CMS를 사용하면 프론트엔드에서 데이터를 관리하고 불러오기 편리함.
  • Headless CMS란? 서버에서 콘텐츠만 관리하고, 프론트엔드는 API로 이 데이터를 불러와 화면에 뿌리는 시스템.
  • 백엔드는 NestJS를 '찍먹(체험)' 해보는 것을 추천.
  • NestJS는 TypeScript 기반의 백엔드 프레임워크로, Angular 스타일의 구조와 의존성 주입, 모듈 시스템을 제공해 유지보수와 확장이 용이함.

2. React 모달 구현 이슈 및 해결법

  • 모달을 구현할 때, 모달 바깥 영역 클릭 시 닫히게 하려면 이벤트 타겟과 현재 타겟 비교 필요.
  • e.target === e.currentTarget 조건을 이용해 모달 바깥 클릭 여부를 감지하고 onClose 콜백 실행.
  • isOpen && ... 조건부 렌더링은 React에서 흔히 사용하지만 {} 안에서 사용할 수도 있음.
  • 상태 관리는 useState로 초기 false에서 true로 바꾸고 닫을 때 다시 false로 설정하여 제어.
  • 이벤트 버블링을 막기 위해 모달 내부 클릭 시 e.stopPropagation() 처리.
  • 이런 기본 원리 숙지 후에도 모달이 안 닫힌다면 state 흐름이나 이벤트 핸들러 연결 상태 확인 필수.

3. 데이터 정규화(Normalization)와 ReactQuery

  • 데이터 정규화란? 중복된 데이터를 줄이고, 데이터 관계를 키(key)를 사용하여 평면적으로 정리하는 작업.
  • 백엔드(DB)는 기본적으로 관계형 DB 형태로 정규화를 많이 수행.
  • 프론트엔드에서도 서버에서 내려준 데이터를 상태관리 용도로 다시 정규화하여 작업할 때가 많음.
  • ReactQuery는 API 데이터를 캐싱 및 자동 갱신하며, 내부적으로는 노멀라이징이 없어도 상황에 맞게 해결하려 함.
  • 정규화를 잘하면 데이터 일관성을 유지하기 쉽고, UI 변화를 효율적으로 반영 가능.
  • 만약 데이터 모델이 독립적으로 설계되어있으면 API 재호출이 불가피할 수 있음.
  • 따라서 정규화를 어디서 어떻게 할 것인지 백엔드와 프론트가 협의가 필요하며, 각자의 상황에 맞게 최적화 필요함.

4. GraphQL과 RabbitMQ, Kafka 활용 이야기

  • 메시지 큐 RabbitMQ와 Kafka를 도입할 때 목적에 맞는 선택 중요.
  • RabbitMQ: 서버 간 라우팅, 작은 규모 메시지 처리에 적합.
  • Kafka: 대용량 데이터 처리, 실시간 스트리밍에 적합.
  • 사용 목적과 요구사항을 명확히 하고 기술 스택을 선택하는 게 중요.
  • GraphQL 소개와 사용 경험 공유: API 쿼리를 명확하게 하고 필요한 데이터만 조회하는 것이 장점.
  • 개발 중 카프카보다 RabbitMQ를 먼저 세팅해보고 고민하는 모습.

5. React 19 업데이트 및 React 역사

  • React 19 최신 기능들과 개선사항은 React 공식 블로그에서 확인 가능.
  • React는 페이스북에서 서버 사이드 렌더링 솔루션 XHP를 보조하기 위해 개발됨.
  • 초기 React는 클라이언트 중심으로 만들어졌지만 서버 모델인 XHP와 공존하는 형태.
  • React는 상태 변화 시 전체 페이지를 다시 렌더링하는 기존 방식 문제를 개선하기 위해 개발됨.
  • JavaScript 역사에서 Promise와 Callback, IE 지원 종료 시점도 언급됨.
  • React 생태계와 진화 과정에 대한 이해는 면접 시 유용.

6. Next.js 서버/클라이언트 컴포넌트 이해

  • Next.js는 React 기반이며, 서버 컴포넌트와 클라이언트 컴포넌트를 구분해 사용함.
  • 서버 컴포넌트에서는 React 훅(예: useState) 사용 불가, 클라이언트 컴포넌트에서만 가능하다.
  • 서버 컴포넌트를 쓸 땐 상호작용이 필요한 부분은 클라이언트 컴포넌트로 분리해야 한다는 점 유의.
  • "use client" 디렉티브를 선언해 클라이언트 컴포넌트로 지정.
  • 이 구조 이해가 새로운 Next.js 프로젝트 진행과 유지보수에 핵심임.

7. CSS Zoom과 화면 비율 조정 방법

  • CSS 속성 중 zoom은 화면 크기 조절에 사용 가능하나 표준 속성은 아님.
  • 대안으로 transform: scale() 사용 권장.
  • px -> rem 변환 시 폰트, padding, margin 등 모든 요소에 적용해야 화면 비율이 제대로 맞음.
  • 미디어 쿼리(@media)를 통해 다양한 화면 크기에 유연하게 대응 가능.
  • 작업 시 모든 요소에 일관된 비율 조절이 중요함.

8. 개발자 장비 구매 경험 및 할인 팁

  • 맥북 프로 등 고가 장비 구매 시 할인(교육 할인, 쿠팡 등)을 적극 활용하는 사례 공유.
  • 학교 이메일 계정을 활용한 교육할인이 대표적이며, 일부 할인 내역을 현장 큐레이터에게 보여주면 할인 가능.
  • 개인 및 회사 장비 관리, 교체 시기와 실사용 감안해 구매 결정함.
  • 할인받는 팁 및 사후 관리 경험도 함께 이야기됨.

9. React 관련 용어 및 개념 공유

  • "Variant"는 컴포넌트의 유형이나 타입을 의미하며, 여러 형식 중 하나를 선택하는 용어.
  • "Mutation"은 GraphQL에서 데이터를 변경하는 작업을 뜻함.
  • "서로소 유니온(Disjoint Union)" 타입은 TypeScript에서 여러 타입을 구별해 사용할 때의 개념.
  • 개발 용어는 단순 번역이 아닌 문맥에 맞게 이해하는 것이 중요.
  • React의 상태 관리, 이벤트 핸들링, 조건부 렌더링 등의 기본 원리도 자주 언급됨.

10. 개발자 일상과 소소한 대화

  • 미라클 모닝(찬물 샤워, 공복 유산소 등) 경험 공유.
  • 개발 중 난제 해결하는 과정에서의 즐거움과 좌절감 표현.
  • 개발 공부 및 협업 문화, 에러 핸들링, 코드 리뷰 경험.
  • 개발자 사이 소통과 친목, 유머 섞인 토론이 활발함.
  • 휴식과 운동의 필요성, 건강 관리 중요성 언급.

면접팁⚡

  • React 생태계와 역사(특히 React와 XHP 관계, React의 동기) 이해하고 설명할 수 있으면 좋음.
  • 데이터 정규화 개념과 ReactQuery, 캐싱 전략의 차이점 관련 질문 대비.
  • 모달 및 컴포넌트 상태 관리 기본 원리 명확히 숙지.
  • Next.js 서버/클라이언트 컴포넌트 차이점과 "use client" 디렉티브 역할 이해하기.
  • GraphQL의 Mutation 개념과 REST API와의 차이점 설명 가능하도록 준비.

링크🔗

#React#NextJS#데이터정규화#모달#GraphQL#RabbitMQ#Kafka#CSS#개발자일상#React19
이전 포스트

2024-02-19

2024년 2월 19일
다음 포스트

2024-02-21

2024년 2월 21일