react 썸네일react

2024-04-14

목차

  1. 도메인과 호스팅 환경 분리 이슈
  2. Safari foreignObject 태그 transform 문제
  3. 맥북 에어 M3 및 SSD, RAM 구매 고민
  4. 애플 칩셋별 SSD 속도 차이와 성능
  5. 맥북 프로와 그래픽 카드 성능 비교
  6. Adobe 소프트웨어와 맥북 성능 이슈
  7. 리액트 네이티브로 링크드인 같은 서비스 개발 가능성
  8. 커뮤니티 대화 및 잡담 흐름

1. 도메인과 호스팅 환경 분리 이슈 🔗

  • 같은 도메인에서 데스크탑과 모바일 버전을 각각 다른 호스팅 방식(Firebase Hosting, GCF)으로 운영할 수 있냐는 질문이 있었음.
  • 현실적으로 같은 도메인 혹은 서브도메인이라도 서버가 다르면 각각의 호스팅을 병행하기 힘듦.
  • 일반적인 해결책은 도메인을 새로 따거나 리다이렉트를 이용해 특정 접속 환경에 따라 서버를 분리하는 방법.
  • 서브도메인도 엄밀히 따지면 ‘같은 도메인’로 분류하지만, 서버 위치에 따라서 독립적인 호스팅이 필요함.
  • 복수 호스팅 환경의 구축은 DNS 설정, 리버스 프록시, 클라우드 설정을 잘 다뤄야 가능.

용어 설명:

  • Firebase Hosting: 구글의 서버리스 정적 웹호스팅 서비스. 빠르고 간편하지만 서버 측 로직은 별도로 처리 필요.
  • GCF(Google Cloud Functions): 함수 단위로 서버리스 백엔드를 실행하는 플랫폼으로, 동적 콘텐츠 호스팅에 주로 사용됨.
  • 리다이렉트: 방문자가 특정 URL로 접속했을 때 자동으로 다른 URL로 이동시키는 기법.

2. Safari foreignObject 태그 transform 문제 🐦

  • Safari 브라우저에서 SVG 내 <foreignObject> 태그 내부 특정 요소에 opacity를 설정하면,
    부모 <foreignObject>에 적용된 transform: scale()이 적용되지 않는 현상 발생 문의.
  • 이는 Safari의 렌더링 엔진이 foreignObject 내부 스타일과 SVG 변환(transform) 렌더링 간 충돌이 있어 발생하는 버그로 추정됨.
  • 대안으로 foreignObject 내부 요소에 직접 transform을 적용하거나, opacity 대신 다른 방법(visibility 변경 등)을 시도해야 할 수도 있음.

용어 설명:

  • foreignObject 태그: SVG 내에서 HTML과 같은 외부 XML 네임스페이스 콘텐츠를 삽입하는 태그.
  • transform: scale(): CSS 변환 속성으로 요소 크기를 배율에 따라 확대/축소함.
  • opacity: 불투명도 조정 CSS 속성. 0에 가까울수록 투명함.

3. 맥북 에어 M3 및 저장장치, 메모리 구매 고민 🍎💻

  • M3 맥북 에어를 램 16GB, SSD 516GB로 구매하면 충분한지 질문이 있었음.
  • SSD 용량은 개인 사용량에 따라 다르지만, 256GB도 충분한 경우가 많음. 실제 사용하는 용량이 적은 사용자들이 많음.
  • SSD 구조 상 용량이 절반 이상 사용되면 성능 저하 우려는 과거 이야기일 수 있으나, 최신 칩셋은 개선 상황.
  • RAM 8GB보다 16GB가 훨씬 쾌적한 작업 환경 제공, 특히 포토샵, 라이트룸 같은 무거운 프로그램 사용 시 중요.
  • ‘에어’가 쿨러가 없고 무거운 작업에 적합하지 않아 가벼운 작업용으로 적합하다는 의견 많음.
  • 프로 모델은 더 높은 성능을 제공하지만 가격 차이가 큼.

4. 애플 칩셋별 SSD 성능 이슈 및 속도 차이 🔍

  • M1·M2 칩셋에서 SSD 용량별 속도 차이가 이야기됐는데, 용량이 클수록 속도가 더 빠른 경우가 있음.
  • M1은 용량별 SSD가 별개의 칩으로 구성되어 있고, M2부터 단일 칩으로 바뀌어 내부 구조 변화 있음.
  • 큰 SSD 용량이 속도에 일부 영향을 주는 경우 있으나, 일상 사용에서는 체감 차이는 크지 않을 수 있음.
  • 저장 속도를 제대로 활용하려면 CPU나 전체 시스템 성능도 뒷받침돼야 함.

5. 맥북 프로와 그래픽 카드 성능 비교 ⚔️

  • 고성능 작업용으로 NVIDIA RTX 4090 워크스테이션 대비 맥북 프로의 한계 토론.
  • 맥북 프로가 휴대성과 안정성은 좋지만, 그래픽 연산 성능에서는 데스크탑의 고성능 GPU에 비해 한계가 명확.
  • 애플 M 시리즈 GPU는 숫자가 많아 보여도 실제 성능은 NVIDIA 최신 GPU 대비 낮을 수 있음.
  • 실제 그래픽 및 CUDA 최적화 작업에는 NVIDIA GPU가 우세.

6. Adobe 소프트웨어와 맥북 성능 이슈 📷🎨

  • 포토샵, 라이트룸, 애프터 이펙트(애펙) 같은 Adobe 제품은 맥북, 특히 M1/M2 기반에서 가끔 퍼포먼스가 떨어지는 경험 사례 공유.
  • 특히 렌더링, 이미지 편집 같은 무거운 작업에서 성능 부족 느낌.
  • 아이폰과 색깔 매칭을 위해 불가피하게 맥북 사용해야 하는 상황 발생.
  • 전반적으로 무거운 작업에는 전문가용 프로세서와 많은 램, 빠른 스토리지 필수.

7. 리액트 네이티브로 링크드인 같은 서비스 개발 가능성 📱🖥

  • 질문: 리액트 네이티브로 링크드인 웹, 앱 수준의 복합 서비스를 만들 수 있을까?
  • 답변 요약: 가능은 하지만, 링크드인 안드로이드 앱은 본래 네이티브 코드 임.
  • 리액트 네이티브는 크로스플랫폼 앱 개발 프레임워크로, 웹뷰(webview)를 활용하는 경우도 있으나 성능 및 UX 차이 존재.
  • 클라이언트의 요구사항에 따라 적합한 플랫폼 선정 및 기술 스택 결정 필요.
  • 앱 서비스 개발 시 네이티브 개발자 참여 중요성도 언급됨.

용어 설명:

  • 리액트 네이티브(React Native): 자바스크립트로 모바일 앱을 개발할 수 있게 해주는 페이스북 오픈소스 프레임워크.
  • 웹뷰(WebView): 앱 내에서 웹 페이지를 불러와 보여주는 컴포넌트.

8. 커뮤니티 대화 및 잡담 흐름 💬

  • 주말인데도 활동하는 개발자 소수, 대화 내용은 주로 개발 정보, 맥북 신제품, 게임, 취미 등 자유로운 분위기.
  • 많은 참가자가 맥북 사양, 가격, SSD 용량과 RAM, 그래픽카드 성능에 대해 서로 의견 공유함.
  • 웃음과 농담 섞인 대화 다수 포함, 친근한 개발자 커뮤니티 문화 엿볼 수 있었음.

면접팁⚡

  • 도메인 분리와 호스팅 배포 문제:
    • "같은 도메인에서 서로 다른 서버 환경을 어떻게 운영할 수 있는가?" 질문에
    • DNS, 서브도메인, 리버스 프록시, CDN, 클라우드 함수 활용 방법으로 답변할 수 있어야 함.
  • 웹 브라우저 호환성 문제:
    • "SVG foreignObject 관련 Safari 호환성 문제와 해결책"에 대해 설명할 수 있어야 함.
  • 클라우드 및 서버리스 아키텍처 이해:
    • Firebase Hosting, GCF 등 서버리스 환경 차이를 명확히 설명하는 능력 필요.
  • React Native 장단점:
    • 크로스 플랫폼 vs 네이티브 개발 차이점과 실제 서비스 사례를 들어 답변 준비.
  • 제품별 하드웨어 성능 비교:
    • MacBook M1/M2/M3 칩셋 구조 및 SSD, RAM 사양이 성능에 미치는 영향과 실제 사용경험 공유 가능.

링크🔗

#도메인호스팅#맥북에어#SSD속도#ReactNative#Safari버그#애플칩셋#웹앱개발#프론트엔드#성능이슈#기술토론