목차
- 코드푸시(CodePush)와 이미지 업데이트 📱
- 머지(Merge) 후 문제 발생 시 대응하기 ⚠️
- React 및 Next.js 최신 버전 경험 공유 & 문제점 🚀
- public 폴더 내 자원 참조 이슈와 해결법 📂
- VSCode Extension 개발 및 사용자 피드백 🛠️
- 이벤트 핸들러 네이밍 컨벤션 토론 📝
- 주식 API 추천 질문과 답변 💹
- 상태 관리 라이브러리 Recoil 유무와 대체제 토론 🔄
- 유쾌한 개발자 일상과 소소한 대화 🎉
- 면접 팁⚡ 및 커뮤니케이션 조언 💡
1. 코드푸시(CodePush)와 이미지 업데이트 📱
-
핵심 내용
- React Native에서 코드푸시(CodePush)는 앱 심사 없이 JS코드만 실시간 업데이트 가능.
- 기본적으로 이미지 파일(JS 외 자산)은 코드푸시로 업데이트 되지 않음.
- SVG를 JS 코드로 변환해 포함하면 JS파일로 인식되어 코드푸시가 가능해짐.
-
초보자용 설명
- CodePush는 모바일 앱에서 앱스토어 심사를 거치지 않고 코드만 빠르게 업데이트 하는 서비스입니다.
- 보통 JS 파일만 업데이트 가능하며, 이미지 같은 정적 자원 변경은 어렵습니다.
- 이미지(특히 SVG)를 JS 코드에 포함시키면 코드푸시로 변경 사항을 적용할 수 있습니다.
- PNG 같은 래스터 이미지 파일은 보통 변경이 어렵지만, 번들에 포함된 상태라면 코드푸시로 대체 가능하다는 의견도 있었습니다.
-
토론 의견
- require 문법을 이용해 이미지를 JS에 포함하면 업데이트 가능하다는 StackOverflow 링크 공유.
- 빌드 툴에 따라 (Webpack/Metro) 기준 파일 크기 이하는 자동으로 JS내 포함될 수 있음.
- 업데이트 성능 저하는 있지만 초기에 자주 바꾸기 때문에 자주 사용.
- 실제 현업에서는 네이티브 지식이 중요함을 공유.
2. 머지(Merge) 후 문제 발생 시 대응하기 ⚠️
-
핵심 내용
- 머지 후 버그 혹은 문제가 발생하면 책임 문제, 처리 방법에 대한 의견 교환.
-
초보자용 설명
- Merge란 여러 개발자가 작업한 코드를 하나로 합치는 과정입니다.
- 합칠 때 충돌이 생길 수 있고, 충돌 해결 후 버그가 발생할 수도 있습니다.
- 문제 발견 시 누가 고쳐야 하는지, 누구 책임인지에 대한 개발팀 내 공감대가 중요합니다.
-
질문 & 팁
- 문제 발생 즉시 빠르게 해결하는 것이 가장 중요.
- 책임 회피보다 오너십(내 일처럼 책임지고 해결하는 태도) 갖는 게 좋은 개발 문화.
- 리뷰 부족일 경우 모두의 책임으로 보는 시각도 있음.
- 바쁜 상황, 감정 소모 문제 인정하며 팀 단위 협업 권장.
3. React 및 Next.js 최신 버전 경험 공유 & 문제점 🚀
-
핵심 내용
- Next.js 14.2.0 버전 릴리즈 후 사용 중 에러 경험.
- 핫 리로드 속도 증가, ESBuild 제거 기대 및 우려.
-
초보자용 설명
- Next.js는 React 기반 SSR(서버사이드렌더링) 프레임워크입니다.
- 새 버전 릴리즈 시 호환성 에러가 발생할 수 있으므로, 안정 버전을 사용하는 것이 추천됩니다.
-
토론 의견
- 빠른 핫 리로드 개선은 환영하지만, 신규 버전 문제로 일부는 하위 버전 유지.
- ESBuild 제거 여부에 관심 많음.
4. public 폴더 내 자원 참조 이슈와 해결법 📂
-
핵심 내용
- React 프로젝트에서 public 폴더 밖 자원 상대경로 참조 불가.
- 오류 메시지: "Relative imports outside of src/ are not supported".
-
초보자용 설명
- React 프로젝트 구조는 일반적으로 src와 public 폴더로 나뉘며,
- src 폴더 안에서만 JS 모듈을 불러올 수 있고 상대경로로 public 경로 접근은 제한됩니다.
- 정적 파일은 public 폴더에 두고, URL 경로(/images/...)로 접근해야 함.
-
해결 방법
- 이미지나 정적 자원을 src 내부로 옮기거나,
- public 내 리소스는 절대 경로(URL 경로)방식으로 참조.
- vite 등 빌드 툴마다 다를 수 있어 주의.
5. VSCode Extension 개발 및 사용자 피드백 🛠️
-
핵심 내용
- RG님이 개발한 VSCode 익스텐션 'VisualWind' 가 visualization 부문 트렌딩 1위 달성.
- 리액트 UI에서 코드 위치 탐색 & 역탐색 기능.
-
초보자용 설명
- VSCode 확장 프로그램은 개발 편의성을 높이는 도구로, 코드 시각화는 특히 복잡한 코드 탐색에 도움됨.
-
사용자 의견 & 개선점
- 초기 설정 번거로움 존재.
- UI 디자인 (배경 및 텍스트 색상) 개선 희망 제기.
- 지속적인 피드백 및 업데이트 약속.
6. 이벤트 핸들러 네이밍 컨벤션 토론 📝
-
핵심 내용
- 이벤트 콜백 함수 이름을 onOpened vs onOpenEnd 중 무엇이 좋은지 토론.
-
초보자용 설명
- 이벤트 핸들러 네이밍 컨벤션은 가독성과 명확성에 매우 중요.
- 보통 on 접두사를 붙이고, 동사의 현재형, 완료형을 고민함.
-
의견 요약
- onOpened: 완료된 상태 이벤트를 강조(과거 완료형).
- onOpenEnd: 이벤트 완료 시점을 명확히 표현.
- React 공식 스타일은 통상 onOpen 같은 짧은 현재형 선호.
- 접두사 handle과 이벤트 명칭 결합 등 핸들러 네이밍 예시 공유.
- 각자 스타일 차이가 있으므로 팀 내 합의 중요.
7. 주식 API 추천 질문과 답변 💹
-
질문
- "해외/국내 주식 조회 API 추천 부탁드립니다. 매매 기능은 필요 없고, 조회만 가능한 API 원함."
-
답변 및 팁
- 위키독스(https://wikidocs.net/book/7845) 참고 권장.
- 금융 데이터 제공하는 공공 API, 혹은 Yahoo 금융 API, Alpha Vantage, IEX Cloud 등이 일반적.
- API 문서 및 한도 정책 꼼꼼히 확인 필요.
8. 상태 관리 라이브러리 Recoil 유무와 대체제 토론 🔄
-
핵심 내용
- Recoil 상태 관리 라이브러리 유지보수가 부진함.
- 쥬스(Jotai), Zuststand 등 대체 라이브러리 추천.
-
초보자용 설명
- 여러 React 상태관리 라이브러리 중 Recoil 은 페이스북에서 만든 신규 도구지만, 최근 활동이 뜸함.
- Jotai, Zustand 등은 가볍고 사용하기 쉽다고 평가.
-
의견
- 새 프로젝트 선택 시 페이스북 공식 도구 대신 유지보수 활발한 라이브러리 선택 권장.
9. 유쾌한 개발자 일상과 소소한 대화 🎉
- 개발자 사이의 유머, 드립, 가벼운 잡담이 활발히 오가며 활기찬 분위기 유지.
- 퇴사, 입사, 이직 소식과 응원 메시지 공유.
- 닉네임 및 포켓몬, 나루토, 군대 드립 등 친근한 문화 나타남.
- 때로는 주식, 기술, 음식, 운동 등 다양한 주제 섞임.
면접팁⚡
- Merge 후 이슈 해결 경험은 협업과 문제해결 능력을 보여주는 좋은 소재.
- 이벤트 핸들러 네이밍 컨벤션 토론 내용은 코드의 명확한 커뮤니케이션 능력 강조에 활용 가능.
- React Native 앱의 코드푸시와 이미지 번들링 이해도는 모바일 개발 면접에서 좋은 인사이트.
- 최신 Next.js 버전 문제와 빌드 에러 처리 경험은 빠르게 변화하는 기술 트렌드 적응력으로 어필.
링크🔗
-
React Native CodePush 이미지 업데이트 관련:
https://stackoverflow.com/questions/35244170/how-to-deploy-arbitrary-resources-for-react-native-with-codepush -
Next.js 14.2 릴리즈 노트:
https://nextjs.org/blog/next-14-2 -
VSCode Extension (VisualWind) 마켓플레이스:
https://marketplace.visualstudio.com/items?itemName=n3rds-inc.visualwind -
주식 API 입문용 문서:
https://wikidocs.net/book/7845 -
NPM 상태 확인:
https://status.npmjs.org/
#CodePush#ReactNative#Nextjs#MergeConflict#React#VSCodeExtension#EventNaming#API#상태관리#개발자일상