2024-09-24

목차

1. 리액트 렌더링 최적화 및 memo 사용법
2. React Native에서 드래그 앤 드롭 Tree UI 구현
3. Tailwind CSS 및 AI 기반 코드 생성 활용기
4. Next.js 앱 라우터와 페이지 라우터 비교
5. 이미지 로딩 완료 체크 방법
6. Ant Design Table 스타일링 방법
7. OAuth 로그인 및 쿠키 도메인 문제 해결 팁
8. Date 라이브러리 비교 및 활용
9. Git 사용법 - 파일 추가 및 커밋
10. GraphQL 사용 현황과 인식

1. 리액트 렌더링 최적화 및 memo 사용법 🎯

• 핵심
  리액트에서 컴포넌트가 리렌더링되는 주요 원인은 props나 state의 변경이다. React.memo는 props 변경이 없으면 리렌더링을 방지해 성능을 개선할 수 있다.

• 설명

  • 리렌더링은 VDOM 업데이트를 의미하며, 실제 DOM 업데이트와는 다르다.
  • 메모이제이션(memoization)은 계산 결과를 저장해 불필요한 계산을 줄이는 기법이다.
  • React.memo는 기본적으로 얕은 비교(Object.is)를 사용하며, 필요하면 직접 비교함수를 넣을 수 있다.
  • memo를 무분별하게 사용하면 오히려 성능을 저하시킬 수 있으니 계산량 많거나 리렌더링 빈도가 아주 높은 컴포넌트에 제한적으로 사용 권장.

• 의견 & 팁

  • 메모이제이션은 최적화 수단이지 무조건 해주어야 하는 것은 아니다.
  • 성능 이슈가 느껴질 때 측정 후 적용해야 한다.
  • forwardRef, useImperativeHandle 과 함께 쓰면 복잡하므로 목적을 명확히 이해할 것.
  • props가 객체인 경우, 항상 다른 참조가 전달되어 memo가 무의미할 수 있다. 이런 경우 맞춤 비교함수 작성 필요.

2. React Native에서 드래그 앤 드롭 Tree UI 구현 📱

• 핵심
  React Native 환경에서 다중 선택과 드래그 앤 드롭이 가능한 트리 구조 UI를 만든 사례 공유.

• 설명

  • react-native-draggable-flatlist 라이브러리를 사용해 리스트 아이템을 드래그 가능하게 구현함.
  • 각 노드는 isExpanded, isSelected 상태를 가지고 있어 하위 노드 토글과 선택 여부를 관리.
  • UI에서 아이콘으로 확장/축소를 표현하고, 선택 시 체크 아이콘 노출.
  • useState로 트리 데이터를 관리하며 상태 변경 시 리렌더링 유발.
  • 3단계 트리 구조도 무난히 처리 가능.

• 의견

  • 기존 오픈소스 부족한 기능을 AI 도구로 빠르게 제작 가능해져 큰 도움이 된다고 언급.
  • 다만 복잡한 기능일 경우 AI 코드 검증과 수정이 필수. 신뢰할 수 있는 수준은 직접 테스트 필요.
  • 이런 UI는 모바일 앱에서 특히 UX 개선에 도움이 됨.

3. Tailwind CSS 및 AI 기반 코드 생성 활용기 🤖

• 핵심
  Tailwind CSS를 활용한 스타일링과 AI를 사용해 UI 코드를 자동 생성하는 경험 공유.

• 설명

  • Tailwind는 클래스명 기반 유틸리티 퍼스트 CSS 프레임워크로 빠른 스타일링과 반응형 디자인에 적합.
  • AI 도구(v0.dev 등)를 이용해 Figma 스크린샷 기반 UI 코드를 자동 생성 가능.
  • AI 생성 코드는 레이아웃 구성에 도움되나 실제 상황에 맞게 수정 필요.
  • Tailwind 관련 플러그인 (e.g. className 머지 도구)도 존재.

• 의견

  • AI 코드 생성은 기본 단위 컴포넌트 생산과 레이아웃 잡기에 효과적.
  • 반응형 디자인 처리나 특정 상호작용은 직접 코딩으로 보완하는 편이 좋다.
  • AI 활용 시 코드 내부를 이해하고 수정할 수 있어야 실무 적용 가능.

4. Next.js 앱 라우터와 페이지 라우터 비교 🔀

• 핵심
  Next.js 14, 15, 16 버전에서 앱 라우터(app/ 디렉토리)와 페이지 라우터(pages/ 디렉토리)의 차이점과 사용법.

• 설명

  • 앱 라우터는 파일 기반 라우팅에 레이아웃 및 서버 컴포넌트 최적화 기능 추가.
  • 페이지 라우터는 고전적 방식으로 유지 보수 용이, 앱 라우터는 점진적 전환 가능.
  • 기능적으로 크게 바뀌기보다 새 기능이 추가된 형태이며, 기존 페이지 라우터도 계속 사용 가능.
  • 앱 라우터는 URL 관리, 레이아웃 자동 적용이 편리하며 일부 특이 케이스(레이아웃 무시 등)에서 아쉬움 존재.

• 의견

  • 두 라우터 모두 시도해보고 프로젝트 특성에 맞게 선택 권장.
  • 앱 라우터는 초기 진입 장벽이 있으며, 기존 페이지 조직과 섞기 쉬움.
  • 서버 컴포넌트, 클라이언트 컴포넌트 구분 이해와 관리 필요.

5. 이미지 로딩 완료 체크 방법 🖼️

• 핵심
  다수 이미지가 모두 로드되었는지 체크하는 안전한 방법에 대한 질문과 답변.

• 설명

  • 이미지 각각의 onLoad 이벤트로 로딩 상태를 체크할 수 있으나 상태 업데이트가 잦아 과도한 리렌더링 유발.
  • 개선책으로 useRef를 활용해 로드된 이미지 카운터만 관리하고, 모든 이미지가 로드되면 상태 업데이트하여 리렌더링 최소화 권장.
  • Promise 기반 new Image() 객체를 사용하는 Promise.all 방식도 사용 가능하며, 오류 처리도 가능해 안정적임.

• 팁

  • 상태 업데이트 횟수를 최소화해서 렌더링 성능 최적화 필수.
  • UI에는 로딩 상태 표시 (로딩 중 메시지 또는 스켈레톤) 추가하는 게 UX에 도움됨.

6. Ant Design Table 스타일링 방법 🎨

• 핵심
  Ant Design(Table 컴포넌트)의 셀(td) 패딩을 제거하는 가장 적절한 방법을 소개.

• 설명

  • <Table> 내에 style prop은 루트 요소 스타일에만 영향. 내부 td에 직접 적용 불가.
  • columns 설정 시 onCell 속성에 스타일 지정하여 각 셀에 인라인 스타일 적용 가능.
  • styled-components로 커스텀 컴포넌트 만들거나, CSS 클래스를 테이블에 부여 후 CSS로 스타일링 가능.
  • Table의 components 속성을 통해 셀 컴포넌트를 직접 커스텀하여 스타일 조절도 가능.

• 팁

  • 상황에 맞게 적절한 방법 선택 (간단한 경우 onCell 활용, 복잡한 경우 styled-component 권장).
  • 라이브러리 기본 스타일 덮어쓰는 경우 우선순위 확인 필요.

7. OAuth 로그인 및 쿠키 도메인 문제 해결 팁 🔐

• 핵심
  서버와 프론트 도메인이 다르고 쿠키 도메인이 서버인 상황에서 로컬호스트 접근 시 쿠키 전달 문제 해결 방법 공유.

• 설명

  • CORS 정책에 의해 도메인이 다르면 기본적으로 쿠키가 전달되지 않음.
  • 서버에서는 Access-Control-Allow-Origin 헤더에 특정 도메인(예: http://localhost:3000) 지정 필요.
  • credentials: true 설정을 서버와 클라이언트 모두에서 활성화해야 쿠키가 포함됨.
  • withCredentials 옵션을 클라이언트 쪽 axios 혹은 fetch 요청에 설정해야 쿠키가 포함되어 전송됨.
  • Access-Control-Allow-Credentials가 true일 때, Access-Control-Allow-Origin은 와일드카드(*) 불가. 명시 도메인만 허용.

• 팁

  • OAuth 콜백 URL 설정을 정확히 하고 로컬 테스트 시 프록시 서버 사용 고려.
  • Postman 등 툴로 먼저 API 응답과 헤더 확인 효과적.
  • window.location.href 방식 리다이렉션은 쿠키 전달 제한이 있어 보통 ajax 기반 인증이 안정적임.

8. Date 라이브러리 비교 및 활용 🕒

• 핵심
  JavaScript Date 라이브러리 중 대표적으로 dayjs, date-fns, moment.js 활용 경험과 추천 이야기.

• 설명

  • moment.js는 기능이 많지만 무겁고 더 이상 공식 지원 및 유지보수가 이뤄지지 않는 중.
  • dayjs는 moment와 API 유사하면서 가벼워 최근 대세로 떠오름.
  • date-fns는 함수 단위 모듈화 되어 있으며 유틸 함수가 많고 locale 대응 용이.
  • 기본 new Date()는 간단한 사용에 충분하지만 로컬라이징, 포맷팅에는 라이브러리 필요.

• 의견

  • 프로젝트 성격과 필요에 따라 선택, 가볍고 현대적인 dayjs 추천.
  • 음력/윤달 같은 특수 기능은 별도 커스텀 함수 작성 필요.

9. Git 사용법 - 파일 추가 및 커밋 🐙

• 핵심
  React 프로젝트 등에서 특정 파일만 Git에 추가하는 방법과 Untracked Files 문제 해결법.

• 설명

  • 파일 경로를 지정해 git add ./src/App.js 로 파일 한 개만 스테이징 가능.
  • 변경사항 전부는 git add . 로 현재 디렉토리 기준 모두 추가.
  • Untracked Files 메시지는 아직 Git이 추적하지 않는 파일 상태. add 해주면 해결됨.
  • React 프로젝트는 보통 전체 파일을 올리며 .gitignore로 불필요 파일 제외 관리.

• 팁

  • 처음에는 작게 추가하는 것도 좋지만, 전체 변경사항 커밋 습관화 권장.
  • Git 상태와 변경사항 확인은 git status로 주기적으로 확인.

10. GraphQL 사용 현황과 인식 ❓

• 핵심
  GraphQL과 REST API 사용 현황에 대한 간단한 질문과 토론.

• 설명 & 의견

  • GraphQL 사용 비율이 REST API 대비 적은 편이며, 전통적인 REST가 여전히 다수 활용 중.
  • GraphQL은 복잡한 데이터 요구에 적합하지만 도입과 운영 난이도 있어 대규모나 특정 조직에 적합.
  • 대부분 프로젝트에 REST API가 안정성 및 간단성 면에서 기본 선택.

면접팁⚡

• React memo 최적화 질문 대비

  • memo, useMemo, useCallback 개념과 사용 시기 꼭 숙지
  • 오남용 시 성능 저하 설명할 수 있을 것
  • props 객체 비교 문제와 커스텀 비교함수 활용법 이해

• OAuth 인증 구조 질문 시

  • CORS 정책, 쿠키 전달 원칙, credentials 사용 방법 명확히 말할 것
  • 로컬 개발 환경 문제 대응(프록시 등)도 언급

• Tailwind, Next.js 최신 기능

  • Next.js 앱 라우터와 페이지 라우터 차이점 개념 정리
  • Tailwind 장점과 AI 도구의 한계점 설명 준비

링크🔗

• React Native Draggable FlatList: https://github.com/computerjazz/react-native-draggable-flatlist
• v0.dev (AI UI 생성 도구): https://v0.dev/chat
• React 공식 Docs - Memoization: https://react.dev/learn/react-without-jsx#reactmemo
• Ant Design Table components: https://ant.design/components/table/
• OAuth CORS & Cookies 설정 참고: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
• Dayjs 라이브러리: https://day.js.org/
• Git 공식 사이트: https://git-scm.com/
• Youtube - React Forget Compiler (참고영상): https://www.youtube.com/watch?v=lGEMwh32soc
• Wappalyzer (웹사이트 기술 분석 크롬 확장):