react 썸네일react

2023-10-08

목차

  1. 유료 강의 구매 및 공유에 대한 의견
  2. React Native 네비게이션 에러 해결 팁
  3. Git Fork와 Pull Request 처리법
  4. Parcel과 Rollup 같은 번들러 소개
  5. React Native 에러 사례와 해결법
  6. 스프링부트 MVC 패턴 간단 리뷰
  7. 데이터 변환과 for문 활용 질문 사례
  8. D3.js 및 관련 그래픽 라이브러리
  9. 개발자 취미와 코딩에 대한 소소한 대화
  10. 프론트엔드와 백엔드 간 MVC 패턴 재미 발견

1. 유료 강의 구매 및 공유에 대한 의견

  • 유료 강의는 프레임워크나 라이브러리 단순 튜토리얼보단 심도 있는 내용이어야 의미 있음.
  • 각자 학습 목적이 다르니 의미 있는 강의라면 공유해서 판단하는 게 좋음.
  • 공유 여부는 강의 내용을 직접 보고 판단하는 게 바람직함.

2. React Native 네비게이션 에러 해결 팁

  • 네비게이션 에러 예: Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager
    • 이는 네이티브 모듈이 제대로 연결되지 않았을 때 발생함.
  • 해결 방법:
    • JDK 버전 문제일 수 있어 공식 문서에 맞는 JDK 설치 필요 (https://reactnative.dev/docs/environment-setup).
    • react-native-safe-area-context, react-native-screens, @react-navigation/native 등의 최신 버전 사용 권장.
    • pod install (iOS) 또는 gradlew clean 및 rebuild (Android) 등 캐시 정리 후 빌드 시도.
    • 프로젝트의 네이티브 모듈이 잘 연결되었는지 확인(링크, 자동 링크 등을 점검).
  • 자주 사용하는 라이브러리인 react-navigation과 react-native-navigation은 둘 다 널리 쓰이는데, 차이점은
    • react-navigation은 JS 중심, 사용하기 쉽고 유연함.
    • react-native-navigation은 네이티브 네비게이션 성능 중심, 조금 더 복잡할 수 있음.

3. Git Fork와 Pull Request 처리법

  • Fork는 원본 저장소를 복사해 개인 공간에서 작업하는 방법임.
  • 원본 저장소로 PR(Pull Request)을 보내면 코드 병합 요청 가능.
  • 개인 저장소에서 직접 커밋하고 푸쉬하려면 원본 저장소가 아니라 내 fork 저장소에 해야 함.
  • 이미 원본 저장소로 PR을 보냈다면 해당 PR은 수정 가능하나, 수정 방법은 새 커밋 푸쉬 후 PR이 자동 업데이트 됨.
  • PR이 자꾸 다른 저장소로 보내진다면, 원격 저장소 주소(origin, upstream)를 확인하여 직접 푸쉬할 저장소를 조절해야 함.
  • 초보자를 위한 팁: 로컬 git 브랜치와 푸쉬 대상 원격 브랜치를 명확히 지정하면 혼란이 줄어듬.

4. Parcel과 Rollup 같은 번들러 소개

  • Parcel과 Rollup은 JavaScript 애플리케이션에서 여러 파일을 하나의 파일로 묶어주는 도구(번들러)임.
  • Parcel 1.0 코드는 6년 전 것이며, 현재는 Parcel 2.0까지 발전하여 더 나은 성능과 편의 제공.
  • Rollup도 8년 역사를 가진 번들러로 모듈을 효율적으로 처리하는 특징 보유.
  • 번들러는 코드 실행 속도 향상, 모듈 의존성 관리, 코드 최적화에 기여함.
  • 초보자도 이해하기 쉽도록 번들러는 여러 스크립트 파일들을 하나의 실행 가능한 파일로 통합한다고 보면 됨.

5. React Native 에러 사례와 해결법

  • Unsupported class file major version 64 에러는 JDK 버전 호환 문제로 주로 발생함.
    • JDK 20 이상이 문제일 수 있으므로 React Native 문서 추천 버전 사용 권장 (예: JDK 11 또는 17).
  • 에러 발생 시 Gradle 캐시 삭제 및 JDK 버전 재설치 권장.
  • react-native-safe-area-context 관련 에러는 네이티브 모듈 설정 관련 문제임.
  • 개발 환경과 라이브러리 버전 호환성 중요, 공식 환경 설정 가이드 반드시 확인할 것.

6. 스프링부트 MVC 패턴 간단 리뷰

  • MVC 패턴은 Model(데이터), View(사용자 화면), Controller(비즈니스 로직) 세 가지 컴포넌트로 구성함.
  • 스프링부트에서 MVC는 서버 사이드 렌더링 시 매우 유용하며 패턴을 이해하면 백엔드 개발을 쉽게 할 수 있음.
  • Mustache 같은 템플릿 엔진을 이용해 View를 렌더링함.
  • 프론트엔드와 백엔드 간 역할 분담과 구조화를 명확히 해 줌.

7. 데이터 변환과 for문 활용 질문 사례

  • JSON에서 특정 값만 뽑고 싶을 때 for문이나 배열 메서드(map, filter) 등을 활용하면 편리함.
  • 예: 객체 배열에서 value 값만 따로 추출하는 변환 작업은 흔히 하는 데이터 가공 패턴.
  • 초보자도 for문을 통해 문제 해결 가능하며, 이후 map과 같은 함수형 방법도 익히면 좋아짐.

8. D3.js 및 관련 그래픽 라이브러리

  • D3.js는 웹에서 데이터를 시각화할 때 가장 유명하고 강력한 라이브러리임.
  • SVG, Canvas를 이용해 복잡한 인터렉티브 차트나 그래프를 만들 수 있음.
  • D3 기반으로 더 쉽게 쓰는 라이브러리가 많아 처음 접근할 때는 유틸리티 라이브러리 활용도 추천.

9. 개발자 취미와 코딩에 대한 소소한 대화

  • 개발자 취미 1,2위는 코딩과 게임이라는 농담.
  • 코딩은 취미를 넘어 좋아할수록 성장에 큰 도움이 됨.
  • 개발자는 가끔 휴식과 재미를 위한 외부 활동도 필요함.

10. 프론트엔드와 백엔드 간 MVC 패턴 재미 발견

  • 백엔드 공부하다가 MVC 패턴에 흥미를 느껴 프론트엔드에도 적용해보고 싶다는 의견.
  • 프론트엔드 프레임워크에도 MVVM, Redux 패턴 등 구조화 개념이 다양하므로 공부해볼 만함.
  • 패턴을 이해하면 코드 설계가 훨씬 명확하고 유지보수가 쉬워짐.

면접팁⚡

  • React Native 네비게이션 문제 관련 질문 시,
    • 네이티브 모듈 연동 과정과 JDK 호환성 문제를 언급하면 좋음.
  • Git 협업 시 Fork, Pull Request의 기본 흐름과 문제 상황 해결 방법 숙지 필수.
  • MVC 패턴 설명 시, 각 컴포넌트 역할을 명확히 알고 자신이 경험한 프로젝트 예시를 함께 말하면 좋음.
  • JavaScript 번들러에 대한 이해는 프론트엔드 개발 직무 면접에서 유리함.

링크🔗

#ReactNative#Git#빌드에러#번들러#MVC패턴#프론트엔드#백엔드#D3js#개발자취미#네비게이션