목차
- 유료 강의 구매 및 공유에 대한 의견
- React Native 네비게이션 에러 해결 팁
- Git Fork와 Pull Request 처리법
- Parcel과 Rollup 같은 번들러 소개
- React Native 에러 사례와 해결법
- 스프링부트 MVC 패턴 간단 리뷰
- 데이터 변환과 for문 활용 질문 사례
- D3.js 및 관련 그래픽 라이브러리
- 개발자 취미와 코딩에 대한 소소한 대화
- 프론트엔드와 백엔드 간 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 번들러에 대한 이해는 프론트엔드 개발 직무 면접에서 유리함.
링크🔗
- React Native 공식 환경설정 가이드: https://reactnative.dev/docs/environment-setup
- React Navigation: https://reactnavigation.org/docs/hello-react-navigation/
- WIX React Native Navigation: https://github.com/wix/react-native-navigation
- Parcel 1.0 코드: https://github.com/parcel-bundler/parcel/tree/f615d7d777e215eb58fbc82438cce2767596fd6c
- Rollup 8년 전 코드: https://github.com/rollup/rollup/tree/53f98a40188215573e47ed95294bc5f631aeec28
- GitHub Pull Request 개념 도움말: https://docs.github.com/en/pull-requests
- RNSScreen 관련 에러 해결 자료:
- D3.js 공식 사이트: https://d3js.org/
- 백그라운드 이미지 컴포넌트 글: https://velog.io/@leehyunho2001/background-image-component
#ReactNative#Git#빌드에러#번들러#MVC패턴#프론트엔드#백엔드#D3js#개발자취미#네비게이션