2024-09-29

목차

1. 앱 디자인 개선과 피드백 방식
2. React Native 트리 UI 구현과 데이터 구조
3. React 성능 최적화 이슈와 프로파일링 조언
4. 메모리 관리와 최적화에 관한 토론
5. React 개발 도구 및 프로파일링 툴 소개
6. VSCode 파일 위치 표시 기능
7. 킷허브(KitHub) 베타 테스트 계획 공유
8. 채팅방 광고 정책 및 운영 소식
9. 로깅과 사진 촬영 관련 즐거운 대화
10. NASA 스타일 장시간 노출 사진 촬영법

1. 앱 디자인 개선과 피드백 방식 🎨

• 기능 개발 후 전체 디자인을 손보며 완성도를 높임.
• 디자이너가 앱 화면 캡쳐에 덮어쓰거나 코멘트 형식으로 직접 피드백 제공하는 방식 제안.
• 감성적이고 감각적인 디자이너와 함께 작업하면 재미있고 효과적임.
• 로고 제작 후에는 디자이너에게 리뷰만 의뢰하기도 함.

2. React Native 트리 UI 구현과 데이터 구조 🌳

• 트리 구조를 Flat 데이터 배열로 관리하며 각 항목에 parentId, order 포함.
• 데이터 예시: [{ id, name, parentId, order }]
• UI는 DraggableFlatList를 이용해 드래그 앤 드랍으로 순서와 부모-자식 구조 변경 가능.
• 각 아이템의 확장/축소, 선택 상태를 관리.
• 렌더링 최적화를 위해 React.memo로 아이템 컴포넌트를 감쌀지 고민중임.
• UI 갱신 시 기존 데이터에서 순서(order)와 부모 정보(parentId) 기반으로 트리를 재계산해야 함.

트리 UI 구성 초보자 설명:
트리는 계층적 데이터를 시각화하는 방법입니다. Flat한 데이터에 부모-자식 관계를 나타내는 parentId를 포함시키면, 이 데이터를 코드 내에서 트리 구조로 변환해 화면에 보여줍니다. 드래그 앤 드랍은 사용자가 항목 위치나 계층을 직관적으로 바꿀 수 있도록 합니다. 이런 복잡한 UI는 상태변경과 렌더링 최적화가 매우 중요합니다.

3. React 성능 최적화와 프로파일링 조언 ⚡️

• 상태 변경 시 변경된 아이템만 리렌더링하도록 key 사용 권장.
• React.memo나 useMemo 등 메모 제이션은 섣부른 사용보다 프로파일링 후 결정할 것을 추천.
• 성능 프로파일링을 통해 실제 느려지는 구간 확인 후 최적화해야 함.
• 눈에 보이는 버벅임이 없다면 굳이 복잡한 최적화 작업은 불필요함.
• 리액트 개발툴(예: React Developer Tools) 및 브라우저 퍼포먼스 탭 활용 권장.

4. 메모리 관리와 최적화에 관한 토론 🧠

• 자바스크립트는 가비지 컬렉터(GC)가 있지만, 무조건 메모리 걱정을 안 해도 되는 것은 아님.
• 메모리 누수나 불필요한 객체 생성 등을 개발자가 신경 써야 함.
• React 컴파일러와 메모리 관리 관련 내용 공유 (관련 블로그 링크 존재).
• 성능 개선 전 코드 가독성과 구조도 같이 고려할 필요성 강조.
• 100만 건 같은 대규모 데이터를 렌더링하는 극단적 테스트도 권장.

5. React 개발 도구 및 프로파일링 툴 소개 🛠

• Google Chrome 개발자 도구 > Performance 탭을 통해 상세 렌더링 성능 분석 가능.
• React Developer Tools 확장 프로그램을 활용해 컴포넌트별 렌더링 횟수 및 원인 조사 가능.
• 성능 문제를 눈으로 직접 확인하고 판단하는 '눈 테스트'의 중요성 강조.

6. VSCode 파일 위치 표시 기능 📁

• VSCode는 특정 파일 열 시 해당 파일의 위치를 탐색기(워크스페이스 뷰)에서 자동으로 표시함.
• 파일 위치로 빠르게 이동하는 기능이 있음.
• Intellij와 비교하면 VSCode는 파일 이동 시 폴더 표시가 자동으로 변경되는 장점이 있음.
• 커맨드 키 조작 등으로 빠른 탐색 기능 가능.

7. 킷허브(KitHub) 베타 테스트 계획 🚀

• 개인 프로젝트인 킷허브 베타 테스트가 10월 중순경 1주일 동안 진행 예정.
• 베타 종료 후 피드백 반영해 12월 정식 출시 목표.
• 킷허브는 개발자 커뮤니티 및 협업 서비스인 듯 함.

8. 채팅방 광고 정책 및 운영 소식 🛑

• 운영진은 광고 메시지 차단 및 엄격한 정책 유지 중.
• 무분별한 광고글은 바로 가려짐.
• 이런 조치는 개발자 커뮤니티 질서 유지에 도움됨.

9. 로깅과 사진 촬영 관련 즐거운 대화 📸

• 인공위성, 비행기 등의 야간 장시간 노출 촬영 경험 공유.
• 15~20초 노출로 우주 관련 고퀄 사진 촬영 가능.
• NASA가 촬영하는 은하 사진과 비슷한 효과 기대 가능.

10. NASA 스타일 장시간 노출 사진 촬영법 🌌

• 노출 시간을 길게 잡으면 움직이는 빛들의 궤적을 포착할 수 있음.
• 별, 위성, 비행기 등의 궤적이 찍히면서 은하수나 별빛을 생생하게 표현 가능.
• 촬영 위치는 어두운 외곽지역 추천 (예: 양평 벗고개).

면접팁⚡

• React 성능 최적화에 대해 질문받으면 프로파일링 도구 활용의 중요성을 강조할 것.
• 섣부른 최적화보다는 실제 성능 병목 발견 후 개선하는 전략 언급하기.
• 트리 UI 구현 시 상태 관리와 렌더링 효율화 방법에 대해 구체적 설명 준비.
• 메모리 관리도 고려 대상임을 인지하고 효율적인 자원 관리를 어필.

링크🔗

• react-complex-tree: https://www.npmjs.com/package/react-complex-tree
• React 컴파일러와 메모리 최적화 블로그: https://emewjin.github.io/react-compiler-closure-performance/
• 대규모 리스트 렌더링 최적화 관련 글: https://m.blog.naver.com/pjt3591oo/222690257837