COMMIT.chat
View Bookmarks
react 썸네일react

2023-10-12

목차

  1. React Native 빌드 이슈와 환경 설정
  2. JavaScript와 React, 문제 해결 능력의 관계
  3. HTTP 통신과 Axios 오류 처리
  4. Next.js 13의 App Router vs Pages Router 논의
  5. TypeScript 오버로딩과 함수 서명
  6. UI 및 라이브러리 관련 팁 (Bottom Sheet, 테이블, suspense 등)
  7. 대용량 텍스트 파일 렌더링 문제 및 대응 방법
  8. iOS React WebView와 네이티브 간 통신 문제 해결
  9. 프로젝트 유지보수, 코드 정리, 그리고 개발 문화
  10. 면접 준비 및 개발자 성장 관련 조언

1. React Native 빌드 이슈와 환경 설정 🚧

  • React Native(RN) 빌드 실패 경험담이 많이 나옴.
  • RN은 Gradle 설정 등 안드로이드 환경 설정 성공 여부에 따라 빌드가 좌우됨.
  • Gradle 버전 불일치 시 앱이 실행되지 않음.
  • RN 앱 개발 입문자는 환경 설정에 시간이 많이 소요될 수 있음.
  • "자바 극혐" 발언처럼 안드로이드 부분은 까다로운 편임.

설명: React Native는 안드로이드와 iOS 네이티브 코드를 다루기에 환경 구성(특히 Android의 Gradle 세팅)이 까다롭다. 빌드 오류가 많고 시간이 걸리기 때문에 초반 진입장벽이 높다. 적응이 필요하며, 에러 원인 분석 능력과 환경 설정 경험이 중요하다.

2. JavaScript와 React, 문제 해결 능력의 관계 ⚛️

  • "JavaScript를 잘하면 React도 잘한다"는 명제에 대해 의견 분분.
  • React는 JavaScript 위에서 동작하지만 철학과 구조가 다름.
  • React를 잘하려면 JavaScript 문법뿐 아니라 React의 라이프사이클, 상태관리, 훅 등 개념을 이해해야 함.
  • 서버사이드 렌더링(SSR) 같은 개념은 JavaScript만 잘 아는 것으로 충분치 않음.
  • CS 지식(자료구조, 알고리즘, 네트워크 등)이 중요한 기반임.
  • 문제해결 능력이 개발 실력에 큰 영향을 미침.

설명: JavaScript는 프로그래밍 언어고, React는 UI 개발을 위한 라이브러리다. JavaScript를 잘해도 React의 동작방식을 이해하지 못하는 경우가 있다. 반대로 React를 잘 못해도 JavaScript는 잘하는 경우도 많다. 근본적으로 문제 해결력과 CS 지식이 중요하다.

3. HTTP 통신과 Axios 오류 처리 📡

  • Axios 요청 시 에러 핸들링 시 e.response.status 같은 속성을 직접 읽는 방법이 잘 안될 때가 있음.
  • 해결법은 e.toJSON()을 활용해 에러 객체를 상세하게 기록하는 것.
  • 네트워크 요청 과정과 HTTP 흐름을 이해하는 것이 인터뷰 질문에서 중요하게 여겨짐.
  • 예시: "구글 검색창에 검색어 입력 후 결과 페이지를 띄우기까지의 네트워크 과정 설명"이 대표적 질문.

설명: Axios는 Promise 기반 HTTP 클라이언트로, 요청 실패 시 error 객체에 response가 존재할 경우 HTTP 상태코드와 메시지를 받을 수 있다. 하지만 경우에 따라 내부 구조가 복잡해 직접 접근 시 오류가 날 수 있어, toJSON() 으로 내용을 보는 것이 좋다.

4. Next.js 13의 App Router vs Pages Router 논의 🔀

  • Next.js 13부터 App Router가 공식으로 베타를 졸업했음.
  • 기존 Pages Router와 비교 시 App Router는 서버 컴포넌트 기반이고, 클라이언트 훅 사용 제한이 있음.
  • App Router 도입 초기에는 학습 곡선과 안정성 문제 때문에 보수적인 선택이 많음.
  • 서버 컴포넌트란 브라우저가 아닌 서버에서 먼저 렌더링되는 컴포넌트, 브라우저 API나 상태 훅 사용 불가.
  • 점차 App Router가 주류가 될 것으로 예상됨.

설명: Next.js는 React 기반 SSR 프레임워크로, 13버전부터 app 디렉토리를 통한 새로운 라우팅 방식(App Router)을 지원. 서버에서 렌더링하는 컴포넌트를 도입해 성능 및 개발 생산성을 높이려 하지만, 기존 익숙한 Pages Router와 다르기 때문에 적응이 필요하다.

5. TypeScript 오버로딩과 함수 서명 🧩

  • TypeScript에서 함수 오버로딩은 여러 함수 시그니처를 정의하지만 실제 구현체는 하나임.
  • 자바스크립트에서는 명시적 함수 오버로딩 지원이 없고, 타입스크립트는 타입 시스템 차원에서만 가능.
  • type a = { (): 'bar' } 같은 형태는 호출 시그니처(Call signature)를 의미.
  • 함수 여러 형태를 선언해 API 사용성을 높이거나 라이브러리 타입 정의를 작성할 때 사용됨.

설명: 오버로딩은 함수 이름은 같지만 매개변수 유형이나 개수에 따라 다르게 동작하는 것을 의미. JavaScript는 직접 지원하지 않아 조건문 등으로 구현하지만, TypeScript는 타입 단계에서 여러 시그니처를 정의해 개발자가 더 안전하게 코드를 짤 수 있도록 돕는다.

6. UI 라이브러리 및 컴포넌트 활용 팁 🎨

  • React 18 미지원 react-spring-bottom-sheet 대신 대안 UI를 찾는 중(Framer Motion 활용 가능성 있음).
  • Suspense의 fallback UI가 너무 빠르게 사라지면 오히려 눈에 피로를 줄 수 있어 애니메이션이나 타임아웃으로 자연스럽게 표현 추천.
  • Slick-slider에서 특정 조건에서 슬라이드 개수나 이동 수 설정에 대해 이슈 발생, 이벤트 핸들러(afterChange) 활용해 조건에 맞게 조정 가능.
  • 모멘트(moment.js) 큰 번들 이슈로 dayjs, Intl 사용 권장.
  • Styled-components 반응형 구현 시 media query 사용이 기본, Tailwind CSS나 다양한 작성법 선호도 존재함.

7. 대용량 텍스트 파일 렌더링 문제 해결 방법 📄

  • 20MB 가량 크고 텍스트 위주인 파일을 브라우저에 한 번에 렌더링하면 브라우저가 멈추는 문제 발생.
  • 해결책으로 데이터 일부만 스트리밍하거나 부분적으로 렌더링하는 가상화(virtualized) 라이브러리 추천(ex: react-virtualized).
  • 네이버 쇼핑 관련 데이터이고, 검증 목적이면 브라우저에서 전체 렌더링보단 HTTP 요청만 테스트하는 방안도 있음(ex: Postman).
  • Next.js 커스텀 서버로 데이터를 서비스한다고 하나, 브라우저 렌더링 부하 최소화가 중요.

8. iOS React WebView 네이티브 호출 문제 해결법 📱

  • React WebView에서 iOS 네이티브 함수 호출 시 window.webkit.messageHandlers를 이용하지만, 함수가 호출되지 않는 문제 발생.
  • iOS 앱 쪽에서 WKUserContentController에 핸들러 이름을 정확히 등록해야 함 (userContentController.add(self, name: "myApp")).
  • React 쪽에서 window.webkit.messageHandlers.myApp.postMessage() 호출 후, 콘솔(또는 alert)로 핸들러 존재 여부 체크 권장.
  • 시뮬레이터에서 테스트할 때 Safari 콘솔 활용 가능.
  • 디버깅은 앱팀과 협업이 필수.

9. 프로젝트 유지보수, 코드 정리, 개발 문화 💡

  • 레거시 코드 유지보수 경험 공유, 정리가 어려워서 흥미나 동기가 떨어진다는 이야기도 다수.
  • 팀 문화로 eslint 알림 무시하거나 코드 안 쓰는 부분 방치하는 사례 등장.
  • 노션이나 개인 문서에 공부거리 쌓아두지만 활용 어려움 존재.
  • 작은 규모라도 블로그 등 개인 프로젝트를 만들어 문제 해결 경험 쌓는 것이 추천됨.
  • 개발자 간 유머, 소통(예: “꿈과 희망 가득한 리액트 방 환영합니다”)이 분위기 긍정적으로 작용.

10. 면접 준비 및 개발자 성장 관련 조언 ⚡

  • Axios, HTTP 통신, 네트워크 흐름 등 CS 기본기 질문 자주 등장.
  • "Google.com 입력 후 엔터 쳤을 때 어떤 과정으로 검색 결과가 뜨는지" 설명할 수 있어야 함.
  • 문제 해결 능력과 CS지식이 언어나 프레임워크보다 근본적임을 강조.
  • TypeScript 콜 시그니처, 오버로딩, React SSR, Next.js 라우터 차이 등 심화 내용도 공부 필요.
  • 백준 등 알고리즘 문제 푸는 것도 실력 향상에 크 도움됨.
  • 이력서는 여러 장 돌려보며 다양한 경험 제시하는 것이 유리함.

링크🔗

#ReactNative#JavaScript#React#Nextjs13#TypeScript#Axios#iOSWebView#ReactSuspense#개발면접#대용량렌더링
이전 포스트

2023-10-11

2023년 10월 11일
다음 포스트

2023-10-13

2023년 10월 13일