react 썸네일react

2025-04-28

목차

  1. 아침 인사와 출근 관련 팁
  2. 파일 저장과 서버 액션 관련 Q&A
  3. React Native와 Tailwind CSS 동향
  4. 월급 지연과 파이어족(FIRE) 이야기
  5. UI 스케일링 문제 (RN & Figma 디자인)
  6. Next.js와 데이터베이스 선택 고민
  7. 웹 캐싱 문제와 무효화 방법
  8. AI를 활용한 개발과 퍼블리싱 전략
  9. 통신사 개인정보 유출 및 유심 보호 서비스 논란
  10. Next.js 라우트 API와 백엔드 대체 가능성

1. 아침 인사와 출근 관련 팁 ☀️

  • 개발자들 간에 아침 인사와 출근 이야기로 가볍게 시작.
  • 버스 이용 시 동쪽에서 서쪽으로 이동할 때 버스 오른쪽 좌석에 앉으면 햇빛을 덜 받는다는 꿀팁 공유.
  • 출근 첫 3일은 특히 정신없으니 일단 자리를 잡는 게 성공이라고 느끼는 사람이 많음.

2. 파일 저장과 서버 액션 관련 Q&A 📁

  • 도면 같은 큰 파일은 일반적으로 DB에 직접 저장하지 않음.
  • AWS S3 같은 오브젝트 스토리지를 활용해 파일을 저장하고, 경로나 메타데이터만 DB에 관리하는 방식 추천.
  • 서버 액션으로 PDF 같은 파일을 GET 할 수 있는지 물음.
    → 서버 액션은 서버에서 처리하는 동작을 의미하며, 일반적으로 REST API 혹은 서버 함수로 파일을 클라이언트에 전달 가능함.
  • 즉, 파일 다운로드 경로나 API를 통해 간편하게 PDF를 제공할 수 있음.

3. React Native와 Tailwind CSS 동향 🌬️

  • React Native에서도 Tailwind CSS를 사용할 수 있느냐는 질문에 "nativewind"라는 라이브러리가 떠오르고 있음.
  • Tailwind CSS는 유틸리티 퍼스트(Utillity-first) CSS 프레임워크로서, 빠른 스타일링과 생산성 향상을 위해 널리 사용 중.
  • 'nativewind'는 React Native 환경에 맞춰 최적화된 Tailwind 스타일링 방법을 제공하며, 모바일 앱에도 적용 가능함.
  • Tailwind CSS의 인기는 계속 확산되고 있고, TypeScript와도 자연스럽게 연동할 수 있는 새로운 스타일링 라이브러리들도 관심 대상.

4. 월급 지연과 파이어족(FIRE) 이야기 💸

  • 월급이 밀리면 자연스럽게 출근과 업무도 미루게 되는 상황 공감대 형성.
  • 파이어족(FIRE: Financial Independence, Retire Early)은 경제적 자립을 통해 조기 은퇴를 꿈꾸는 사람들을 의미함.
  • 참여자 중 가진 돈이 적어 힘들어하는 현실 이야기와 웃음 섞인 대화가 오감.
  • 경제적 여유와 안정에 대한 고민은 개발자 커뮤니티에서도 흔한 주제임.

5. UI 스케일링 문제 (RN & Figma 디자인) 📏

  • React Native 개발 시, Figma 기반 디자인을 적용하는데 폰 크기 기준과 실제 디바이스 비율 차이로 인해 UI가 눌린 형태로 표시되는 문제 발생.
  • 예: 피그마에서 정사각형 90x90 크기지만, 세로로 눌린 폰(아이폰7 등)에서는 직사각형으로 나옴.
  • 해결 팁:
    • 단순 픽셀 기반 크기보다는 상대적 비율과 오토레이아웃(유연한 레이아웃 방식)을 활용해야 함.
    • 디바이스의 실제 해상도와 비율(aspect ratio)을 계산하여 비율에 맞게 크기를 조정.
    • RN에서 Dimensions API를 활용해 화면 가로세로 크기를 얻고, 이를 기반으로 UI 요소를 스케일링하는 방법이 효과적임.

6. Next.js와 데이터베이스 선택 고민 🗄️

  • Next.js 사용 시 MariaDB와 PostgreSQL(PgSQL) 중 어떤 걸 선택할지 문의.
  • PostgreSQL은 Next.js와 타입스크립트 환경에서 기본 지원과 생태계가 활발하며, 견고한 기능을 자랑함.
  • MariaDB는 MySQL 기반으로 익숙한 사용자에게 적합하나, 일부 최신 기능은 PostgreSQL이 더 앞서는 경향.
  • 실무에서는 팀 경험, 기존 인프라, 확장성, 필요 기능 등을 고려해 선택 권장.

7. 웹 캐싱 문제와 무효화 방법 🔄

  • 리액트 + Vite로 웹 서비스 배포 후 변경 사항이 브라우저에 반영되지 않고, 강력 새로고침해야 적용되는 문제 발생.
  • 이는 브라우저 캐싱으로 인한 일반적인 현상. 캐싱은 웹 페이지나 리소스의 빠른 로딩을 위해 저장해두는 기능이다.
  • 해결 방법:
    • 배포 시 서버에서 Cache-Control 헤더 설정하여 무효화 정책 적용. 예) no-cache, max-age=0 등.
    • 파일명에 해시값을 추가하여 변경 시마다 새로운 리소스로 인식되게 함(해시 네이밍).
    • CDN 사용 시 캐시 무효화(invalidation)를 명시적으로 수행.
    • 캐싱 설정은 사용자 경험과 성능을 고려해 적절히 조정되어야 함.

8. AI를 활용한 개발과 퍼블리싱 전략 🤖

  • AI 도구를 활용해 퍼블리싱과 기본 구조 셋업에 효율성을 크게 높이고 있음.
  • AI에게 개발 계획서 작성, 특정 서비스 특징 이해시키기, 컨텍스트 전달 방법을 고민 중.
  • “토스같은 느낌으로 만들어줘” 같은 추상적인 요구는 AI가 기대한 결과를 내기 어려우며, 구체적이고 단계별 지시가 필요함.
  • 프로젝트 셋업은 직접 작성하는 편이 더 편리할 수 있지만, 반복작업이나 단순한 퍼블리싱 작업은 AI가 큰 도움.
  • 앞으로 AI 활용 능력이 개발자 역량 중 중요한 평가 요인이 될 것이라는 기대.

9. 통신사 개인정보 유출 및 유심 보호 서비스 논란 🔐

  • 최근 대규모 통신사 개인정보 유출 이슈와 관련된 걱정과 논의 활발.
  • 유심(USIM) 보호 서비스는 유심 일련번호를 복제하는 해킹 시도를 막고, 복제 시도를 차단하는 기능.
  • 유심 교체가 2차 피해를 예방하는 중요한 조치로 부각됨.
  • 통신사 사태 시 정부 감사, 배상 책임, 기업 존폐 문제에 대한 의견 교환.
  • 스타링크(Starlink) 등 대체 통신 수단까지 논의되면서 기술과 정책의 복합적인 문제로 확장됨.

10. Next.js 라우트 API와 백엔드 대체 가능성 🔧

  • Next.js의 Route API 기능은 간단한 API 서버 역할을 할 수 있어, 작은 백엔드 요구사항을 충족 가능.
  • 하지만 전통적인 Express나 NestJS와 같은 백엔드 프레임워크와는 목적과 기능성에 차이가 있음.
  • Next.js API 라우트는 프론트엔드 중심 개발자에게 간편하지만, 복잡한 비즈니스 로직이나 서버 관리에는 적합하지 않을 수 있음.
  • 서버리스 환경과 비교하며 각자의 장단점을 고려한 선택 필요.

면접팁⚡

  • Next.js의 철학과 구조 이해하기
    Next.js는 ‘configuration by convention’을 지향하여, 폴더 구조와 파일명으로 기능을 자동화함. 이를 설명할 때는 스프링 프레임워크의 ‘제어의 역전(IoC)’ 개념과 비교하며 발전된 개념이라고 말할 수 있음.

  • 웹 캐싱과 CDN 무효화 경험
    대규모 서비스 배포 시 캐싱 문제는 흔함. 캐시 무효화를 위한 Cache-Control 헤더, 해시 네이밍, CDN 인밸리데이션 경험을 구체적으로 이야기하면 좋음.

  • React Native UI 적응형 설계
    비표준 해상도(비율) 문제에 대한 대응법을 명확히 아는지 묻는 경우가 있음. 디바이스별 해상도와 DPI 차이를 고려한 UI 설계 중요성 강조.

  • AI 도구 활용 경험
    현대 개발 환경에서 AI 도구를 어떻게 효율적으로 활용하는지가 경쟁력임. AI에게 단계적 명령을 줘야 원하는 결과가 나온다는 점 설명 가능하면 유리.

링크🔗

#Nextjs#ReactNative#TailwindCSS#웹캐싱#AI활용#파일저장#통신사유출#FIRE#멘토링#UI스케일링