react 썸네일react

2024-04-15

목차

  1. React Native와 웹 개발 커리어 인식
  2. MobX 상태 관리 경험
  3. 구조조정과 채용시장 분위기
  4. Tailwind CSS와 Storybook 스타일링 문제
  5. SVG 아이콘 경로 문제 해결 팁
  6. Chrome HTTP → HTTPS 강제 리다이렉트 문제 대처법
  7. Monorepo 빌드 방식 노하우
  8. React 중급 이상 학습 방법 및 커리어 팁
  9. 면접 경험 및 전략 공유
  10. 실무 개발 팁과 협업 노하우

1. React Native와 웹 개발 커리어 인식

  • React Native(RN) 개발자가 프론트엔드 웹 개발자로 인정받는 데 어려울 수 있음.
  • RN은 모바일 앱 개발에 특화되어 웹 개발 전용 커리어에는 약간 불리한 인식이 존재.
  • 웹 개발 커리어를 목표한다면 주로 React, Vue 등의 웹 프레임워크에 집중하는 게 유리함.

설명:
React Native는 모바일 환경에서 네이티브 앱처럼 동작하는 앱을 만들 수 있는 프레임워크임. 하지만 웹 개발자는 HTML, CSS, DOM 조작과 웹의 고유 특성에 익숙해야 하므로 RN 경력만으로는 웹 개발 역량을 충분히 증명하기 어려울 수 있음.

2. MobX 상태 관리 경험

  • MobX는 러닝커브가 낮아 사용하기 쉽다는 평이 많음.
  • 전역 상태 관리가 필요할 때 사용하기 적합하고, 큰 불편함 없이 장기간 애용하는 사례도 존재.
  • 특히 상태 관리가 복잡해질 때 Redux보다 직관적일 수 있어 초보자에게도 추천됨.

설명:
MobX는 앱 상태 변경을 자동으로 감지해 UI에 반영하는 반응형 상태 관리 라이브러리로, 비교적 단순한 API와 적은 보일러플레이트 코드가 특징임. 처음 배우는 사람도 빠르게 익힐 수 있으며, 작은 프로젝트부터 중간 규모 프로젝트까지 적합함.

3. 구조조정과 채용시장 분위기

  • 최근 대기업 및 스타트업 중심으로 구조조정, 권고사직 사례가 늘고 있음.
  • 채용 시장이 어려워졌고, 채용공고 수가 감소하는 등 전반적인 취업 여건이 악화됨을 확인할 수 있음.
  • 현업 개발자들은 5월 또는 하반기에 기업 상황을 살피면서 이직 준비를 권장함.

설명:
서울 주요 대기업과 유망 스타트업들도 경영난으로 인력을 줄이는 추세임. 이런 상황에서 무작정 기다리기보다는 채용공고, 기업 성과 등을 꾸준히 모니터링하고, 채용 플랫폼이나 커뮤니티를 활용해 대비하는 것이 필수임.

4. Tailwind CSS와 Storybook 스타일링 문제

  • Tailwind 클래스명(ex. fill-black-700)이 개발자도구엔 보이나 스타일이 적용되지 않는 경우는 설정 문제일 확률이 높음.
  • Storybook을 사용할 때는 main.js나 preview.js에 Tailwind CSS를 명시적으로 로드해야 스타일이 정상 적용됨.
  • 오타 또는 설정 누락, 로딩 순서 문제로 스타일이 깔끔히 적용되지 않을 수 있으니 점검 필요.

설명:
Tailwind CSS는 유틸리티 클래스 기반 CSS 프레임워크로, 빌드 과정에서 사용하는 도구 설정에 따라 Storybook 내에서 스타일이 빠질 수 있음. Storybook 설정 파일에 Tailwind를 임포트하는 작업이 없으면 스타일이 무시됨.

5. SVG 아이콘 경로 문제 해결 팁

  • VSCode 및 React 프로젝트에서 상대경로를 정확히 맞추지 않으면 .svg 아이콘 불러오기 오류 발생.
  • 확장자(.svg)를 명시하거나, import 구문에 중괄호 {} 여부도 확인 필요.
  • 경로 및 파일명이 카멜케이스, 케밥케이스 등 혼용되면 인식 오류가 발생할 수 있어서 정합성 체크가 중요함.

팁:
경로가 맞는지, 실제 파일이 존재하는지, 확장자명이 잘 붙어있는지 순서대로 점검하고, VSCode 재시작 및 캐시 삭제도 시도할 것.

6. Chrome HTTP → HTTPS 강제 리다이렉트 문제 대처법

  • 크롬 HSTS(HTTP Strict Transport Security) 설정 때문에 HTTP 요청이 자동으로 HTTPS로 리다이렉트되는 문제 있음.
  • chrome://net-internals/#hsts 에서 도메인에 대한 HSTS 설정을 삭제해도 해결이 안 될 때가 있음.
  • 캐시 및 쿠키 완전 삭제, 시크릿모드 확인, 컴퓨터 재부팅 등 여러 방법 시도 필요.
  • Vite, Next.js 등 개발 서버 설정에서 HTTPS 설정 여부도 확인해야 함.

설명:
HSTS는 보안 목적으로 https 접속 강제를 기억시키는 기능임. 한번 적용된 도메인은 클라이언트에서 일정 기간 HTTP 접속 시 HTTPS로만 연결함. 개발 중 이런 현상이 불편할 수 있으니 개발용 도메인을 변경하거나 HSTS 설정을 신중히 관리해야 함.

7. Monorepo 빌드 방식 노하우

  • Monorepo 구조에서 각 레포가 독립 빌드를 하더라도 의존 관계 및 경로 문제로 404 오류가 발생할 수 있음.
  • 보통 root에서 공통 의존을 관리하고, 개별 패키지별로 빌드 설정과 경로를 명확히 하는 것이 중요함.
  • Yarn Workspaces 같이 전략적으로 의존성을 관리하며, 빌드 후 결과물을 올바른 위치에 배치해야 함.
  • 빌드시 의존성 있는 패키지 순서대로 빌드하거나, 루트 스크립트에 통합 명령어를 넣는 것도 방법임.

8. React 중급 이상 학습 방법 및 커리어 팁

  • React는 사용법 습득 후 설계, 아키텍처, 유지보수가 관건임.
  • 클린 아키텍처, 상태 관리 라이브러리(xstate, MobX 등)와 결합해 모듈화, 오류 방지에 집중할 것.
  • 실제 고도화된 서비스 소스코드 분석, 오픈소스 레포 참조가 많은 도움이 됨.
  • 단순 API 사용법보다 요구사항 파악과 코드 구조 설계가 더 중요함.
  • 면접에서는 React 경험년수보다는 문제 해결 능력과 설계 능력을 평가하는 경우가 많음.

9. 면접 경험 및 전략 공유

  • 빠른 전형 진행, 당일 혹은 하루 내에 결과 통보하는 기업도 있음.
  • 평판이나 리뷰가 낮은 기업은 카운터 오퍼용으로 활용 가능.
  • 면접 대화 중 근무 환경, 워라밸, 연봉 등을 솔직히 확인하는 것이 중요함.
  • 면접 일정 조율이 어려운 경우 다른 곳 지원을 우선시하는 전략 권장.
  • 현 시장에서 신입 및 주니어 개발자 채용이 많지만, 단순 인력 교체는 장기적으론 비효율이라는 의견도 존재.

10. 실무 개발 팁과 협업 노하우

  • 퍼블리셔와 협업 시 Git 충돌 문제를 막기 위해 작업물 공유 전략 수립 필수.
  • API 엔드포인트는 서비스별 객체로 관리하여 유지보수를 편하게 하는 방법 추천.
  • 모니터암 및 작업환경 개선으로 건강을 챙기며 개발 효율도 높일 수 있음.
  • 커뮤니케이션과 요구사항 이해가 오류 없는 개발의 핵심임.
  • React 개발에서는 요구사항 분석, 테스트 케이스 스스로 도출이 중요하며, 단순 라이브러리 숙지가 전부가 아님.

면접팁⚡

  • 기업 리뷰 및 평가는 여러 채용 플랫폼의 평점을 참고하되, 프리미엄 리뷰나 다수 리뷰로 정량적 판단을 하자.
  • 요구사항 파악 능력을 높여서 면접 시 프로젝트 기획 의도를 코드에 충실히 옮길 수 있음을 어필하면 좋음.
  • 빠른 전형 결과 통보 기업 선호도가 높으며, 면접 시 연봉 및 워라밸 조건을 적극적으로 확인할 것.
  • React 경력이 오래되었다고 무조건 우대받지 못함. 실무에 적합한 설계 및 구현 능력이 더 중요.

링크🔗

#ReactNative#MobX#TailwindCSS#Monorepo#React학습#개발자채용#면접팁#Chrome리다이렉트#SVG오류#개발협업