COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-04

목차

  1. 클라우드 오브젝트 스토리지 선택과 비용 이슈
  2. 타입스크립트 기본 개념 질문과 설명
  3. React Native 최신 변화 및 Expo 생태계 논의
  4. 스타일 관리: StyleX와 기존 CSS-in-JS 비교
  5. 안드로이드 스튜디오 빌드 문제와 USB 디버깅 실수
  6. Apache Tomcat 설치 및 실행 방법
  7. Next.js 앱 라우터 안정화와 사용 경험
  8. React에서 상태관리 팁 (Ant Design Drawer 관련)
  9. 토스 증권 커뮤니티 영구 정지 사례와 운영정책 이슈
  10. 개발 환경과 툴 관련 문제 공유 및 해결 조언

1. 클라우드 오브젝트 스토리지 선택과 비용 이슈 ☁️

  • 클라우드타입 백엔드에 디스크 마운트가 지원되지 않아 외부 오브젝트 스토리지를 찾아봄.
  • S3 (Amazon Simple Storage Service) 추천과 사용 결정.
  • 오브젝트 스토리지는 파일이나 데이터 블록을 객체 단위로 저장하는 방식으로, 디스크처럼 마운트되지 않고 REST API로 접근 가능.
  • 비용 관리는 복잡하지만 용량이 크고 안정적이라 다른 대안이 거의 없음.
  • 클라우드플레어도 대안으로 고려할 수 있으나 AWS S3가 보편적 선택.

2. 타입스크립트 기본 개념 질문과 설명 💡

  • 자바스크립트에는 enum과 튜플이 존재하지 않으며, 타입스크립트에서만 제공하는 기능임.
  • enum: 열거형으로 상수 집합을 이름 붙여 관리할 때 사용. JS에는 없으나 TS에선 코드 가독성과 안정성을 위해 자주 사용됨.
  • 튜플: 고정된 요소 개수와 타입을 가지는 배열, JS는 타입이 없으므로 TS 전용.
  • string | number | any 같은 유니언 타입에서 any는 모든 타입을 포괄하므로 사실상 any가 우선 적용됨.
  • 타입스크립트는 점점 더 실무에서 중요해지고 있음.

3. React Native 최신 동향과 Expo 생태계 🛠️

  • Expo는 React Native 개발을 쉽게 하기 위한 생태계로, 자체 CLI와 EAS(Expo Application Services) 등의 서비스를 제공.
  • react-native init 명령어가 2024년 12월 31일 중단 예정이나, 최신 커맨드로 대체해 사용 가능.
  • Expo Router는 간단하고 직관적인 반면, 복잡한 커스터마이징에 한계가 있음.
  • React Navigation이 아직 대중적이며 복잡한 네비게이션에 적합함.
  • Expo는 점차 Next.js급 DX(Developer Experience)를 목표로 하며, 로컬 개발도 잘 지원하고 있음.
  • CNG (Configurable Native Modules)라는 개념으로 Expo의 unimodules를 개선, 네이티브 모듈 사용을 더 간편하게 만듦.
  • 기존 eject 개념은 사라지고 Expo를 점진 도입하는 방식이 권장됨.
  • Turbo Modules와 같은 최신 React Native 기술도 도입 완료 중.

4. 스타일 관리: StyleX와 기존 CSS-in-JS 비교 🎨

  • StyleX는 Facebook에서 만든 스타일링 라이브러리로, 빌드 시 CSS 파일을 생성해 성능 최적화를 달성.
  • 기존 emotion, styled-components는 런타임에 스타일을 생성해 성능 저하 우려가 있음.
  • React Native의 StyleSheet.create와 비슷한 개념이라 RN 개발자에게 익숙함.
  • StyleX는 웹용으로도 적합해 RN 경험자가 적응하기 쉬움.
  • 컴포넌트와 스타일의 결합도를 낮춰 코드 가독성이 향상되는 장점이 있음.
  • 완전히 StyleX로 교체하기 어려운 경우 모듈 CSS, SCSS 병행 사용 가능.

5. 안드로이드 스튜디오 빌드 문제와 USB 디버깅 실수 🤦‍♂️

  • 최신 안드로이드 스튜디오에 맞춘 JDK 및 Gradle 버전 문제로 빌드 에러 발생 빈번.
  • USB 디버깅 설정을 까먹는 경우가 많아 개발 시간 낭비 요인.
  • Android 빌드 환경을 위해 JDK, Gradle, SDK 호환성 유지가 매우 중요함.
  • 개발자용 USB 케이블 문제도 의심되는데, 디버깅 옵션 확인을 우선 권장함.

6. Apache Tomcat 설치 및 실행 방법 ☕

  • Tomcat은 자바 서블릿 컨테이너로, zip 압축 파일 다운로드 후 별도 설치 프로그램 없이 실행 가능.
  • Windows용 인스톨러가 있으나 zip 파일로 받아서 직접 실행하는 경우도 많음.
  • Tomcat 실행은 배치파일(startup.bat) 또는 터미널 명령으로 서버 구동.
  • Windows 서비스 설치 옵션을 사용하면 부팅 시 자동실행 설정 가능.
  • Unix 환경에서는 jsvc를 빌드해서 데몬처럼 실행할 수 있음.
  • 공식 문서와 RUNNING.txt 파일 참조 추천.

7. Next.js 앱 라우터 안정화와 사용 경험 🔄

  • Next.js 13부터 앱 라우터가 도입되었으며, 15버전(릴리즈 후보)에서 안정화 진행 중.
  • 앱 라우터는 파일 기반 라우팅에 서버 컴포넌트와 클라이언트 컴포넌트 구분을 지원함.
  • "use client" 지시문은 반드시 파일 최상단에 위치시켜야 하며 그렇지 않으면 오류 발생.
  • 고급 기능이 아직 완전하지 않아서 복잡한 프로젝트는 React Navigation 등 기존 방식도 고려됨.
  • Next.js 14, 15 버전에서도 사용 가능하나 점진적으로 버그가 줄어드는 추세임.

8. React 상태관리 팁: Ant Design Drawer 예제 📝

  • Drawer 컴포넌트에서 클릭한 항목의 id 값을 부모 컴포넌트 상태로 올려서 관리하는 일반적 방식 추천.
  • useState를 활용해 setOpen(true)와 함께 클릭한 id를 상태로 저장하면 깔끔함.
  • 별도의 정적 함수 호출 방법보다 상태로 관리해야 UI 업데이트와 동기화가 쉬움.
  • 필요한 경우 overlay-kit 라이브러리를 활용해 모달/드로어 호출 구조를 간소화할 수 있음.
  • Ant Design의 Modal.confirm 처럼 확장 기능 활용 가능하지만 Drawer는 정적 메서드 없음.

9. 토스 증권 커뮤니티 영구 정지 사례와 정책 이슈 ⚠️

  • 오픈채팅방 링크 공유가 토스 증권 커뮤니티 운영 정책 위반으로 자동 정지 사유.
  • 신고 누적으로 인해 사전 경고 없이 바로 영구 정지가 이루어지는 경우가 있음.
  • 정지 이유에 억울함을 호소하는 사례 많으나, 정책 노출이 미흡해 대응이 어렵다는 의견.
  • 토스 증권 내부 커뮤니티는 리딩방(투자 권유) 뿐 아니라 단순 수다방도 엄격하게 관리됨.
  • 해결을 위해 공식 상담원 접촉 및 증빙자료 제출해도 부서 연결 어려움.
  • 정책 준수를 위한 커뮤니티 활동 관리 필요.

10. 개발 환경과 툴 관련 문제 공유 및 해결 조언 🛠️

  • Xcode 인덱싱 시간이 오래 걸려 불편함, 대안으로 Expo 사용 권장.
  • React Native 최신 버전 업데이트 시 npm 패키지 호환성 점검 필요.
  • Flipper 디버깅 도구 사용 여부와 관련해 네이티브 코드 추가가 복잡할 수 있음.
  • AI 도구(예: ChatGPT) 활용은 코드 작성, 문제 해결에 도움되나 완전 대체는 어려움.
  • Gradle, JDK, React Native 버전 맞춤 설정이 빌드 성공 열쇠.
  • 출근, 근무 시간 관련 소소한 대화 및 농담도 있음.

면접팁⚡

  • 타입스크립트에서 enum과 튜플의 차이를 설명할 수 있어야 함. JS에는 없는 개념임을 명확히 할 것.
  • React Native Expo와 Bare Workflow 차이, 그리고 EAS와 CNG 개념에 대해 이해하고 있으면 기술면접에서 경쟁력 있음.
  • Next.js 앱 라우터에서 'use client' 지시문의 위치 문제와 서버/클라이언트 컴포넌트 구분 이해를 보여주면 좋음.
  • Ant Design 컴포넌트 등 UI 라이브러리 사용 시 상태 관리 원칙(상태 끌어올리기 등)에 대해 명확히 설명할 것.

링크🔗

#클라우드스토리지#타입스크립트#ReactNative#Expo#StyleX#안드로이드#ApacheTomcat#Nextjs#상태관리#토스증권
이전 포스트

2024-10-03

2024년 10월 3일
다음 포스트

2024-10-05

2024년 10월 5일