개발자들이 남긴 기록..

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

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 경력이 오래되었다고 무조건 우대받지 못함. 실무에 적합한 설계 및 구현 능력이 더 중요.

링크🔗

MobX 소개 및 사용법 관련 영상 및 문서 (직접 검색 권장)
Protopie 사용 가이드
Chrome HSTS 삭제 페이지
아웃스탠딩 스타트업 현황 (스타트업 성적 참고 사이트)
IT 통계 정보 (IITP)

2024-04-15

목차