2024-02-14

목차

1. 신입 리액트 개발자 취업과 경쟁률
2. SI 업체 경험과 개발자 현실
3. React에서 List 렌더링 시 Key 문제와 해결
4. Next.js vs React 프로젝트 선택 고민과 조언
5. HTTP 요청 시 Origin 헤더 수정 불가 이슈
6. 아이콘 사용 라이브러리 및 디자이너 커뮤니케이션
7. React 관련 에러 처리 및 상태관리 팁
8. 취업 준비 조언과 서류 합격률 높이는 방법
9. 개발자 연봉과 실력에 관한 이야기
10. 면접 시 비즈니스 도메인 질문 경험

1. 신입 리액트 개발자 취업과 경쟁률 🎯

• 신입 리액트 개발자 채용은 존재하지만 경쟁이 매우 치열함.
• 한 명 뽑는데 지원자가 291명인 경우도 있음.
• 경쟁률이 높아 기본 리액트, 리덕스, 타입스크립트, Next.js, Jest 등 기술 스택을 갖추는 것이 중요.
• 중고신입(1년 정도 경력)의 경우 스타트업 등 작은 회사에서 경험 쌓기도 함.
• SI 업체 경험은 다양하지만 경력이 애매해질 수 있어 신입 취업 시 유리하지 않을 수 있음.

초보 개발자를 위한 팁:

• 어떤 회사든 채용 기준을 넘는 것이 중요함. 그 후는 경쟁자의 실력에 따라 달라짐.
• 기술 스택에 집중하는 한편, 프로젝트를 깊게 진행하는 경험이 필요.
• SI 경험은 서비스 구축 능력 향상에 도움이 되지만, 잡다한 업무가 많아 경력이 분산될 수 있음.

2. SI 업체 경험과 개발자 현실 🏢

• SI 업체는 다양한 업무를 경험할 수 있지만, 잡다한 일로 인해 특정 기술 심화가 어렵다는 단점 존재.
• 개발자가 원하는 분야와 다른 업무가 부여되어 혼란 발생 가능.
• SI 하면 '개발자의 무덤'이라는 인식도 있으나, 경험과 위치에 따라 연봉은 높은 편.
• 자체 프레임워크나 자체 언어를 사용하는 SI 업체도 있지만, 몸값을 상승시키기 어려운 경우도 많음.
• SI 경험은 서비스 구축 경험을 쌓는 데 유리하지만 워라밸(일과 삶의 균형)은 낮을 수 있음.

3. React에서 List 렌더링 시 Key 문제와 해결 💡

• React에서 리스트 렌더링 시에는 각 자식 요소에 고유한 key props를 주어야 함.
• key는 리액트 내부에서 항목 식별 및 효율적인 업데이트를 위해 필요.
• 보통 상태를 업데이트할 때 key 값이 변경되지 않아야 하며, 변경되면 리렌더링에 문제 발생.
• 가짜로 인덱스나 조합된 문자열 등으로 키값을 줄 수 있지만, 중복되지 않고 변하지 않는 값이어야 함.
• key는 컴포넌트 내부에서 props로 받는 것이 아니라 React가 따로 관리하는 특별한 속성임.
• 배열의 각 항목에 id 같은 고유 식별자를 부여하고, 그 값을 key로 사용하는 것이 좋음.
• 상황에 따라 nanoid 같은 라이브러리를 사용해 고유 ID를 생성할 수 있으나, 렌더링 시마다 값이 변경되면 안 됨.

4. Next.js vs React 프로젝트 선택 고민과 조언 ⚖️

• Next.js 공부 중인 취준생의 고민: Next.js로 프로젝트를 만들 것인지, 아니면 React에 집중할 것인지.
• Next.js는 React 기반의 프레임워크로, 서버사이드 렌더링(SSR), 정적 사이트 생성 등이 가능한 최신 기술.
• Next.js 14와 같은 신버전은 대규모 프로젝트에서 유용하지만, 작은 프로젝트에서는 장점이 명확하지 않을 수 있음.
• 초기에는 React 프로젝트로 기본기를 다진 뒤, Next.js로 자연스럽게 확장하는 것을 추천.
• 스타일링시 기존 styled-components에서 tailwind-css로 이동할 때 스타일 작성 방식과 관련 속성 사용법이 다르니 주의 필요.
• axios와 fetch에 익숙하지 않은 혼용 문제, Interceptor, baseUrl, default headers 관리 등에 대한 학습 필요성 강조.

5. HTTP 요청 시 Origin 헤더 수정 불가 이슈 🔒

• HTTP 요청의 Origin 헤더는 브라우저의 보안 정책(CORS)상 클라이언트에서 임의로 수정할 수 없음.
• MDN 공식 문서에 따르면 자바스크립트로 Origin 값을 수정하는 것은 불가능하다 명시됨.
• 백엔드 개발자가 요청하여도 정책적으로 막혀 있어, 프로젝트에서는 다른 접근법(예: 서버 측 프록시, CORS 설정 변경 등)을 찾아야 함.
• 이 문제를 잘 이해하고 협업 시 명확히 설명하는 것이 중요.

6. 아이콘 사용 라이브러리 및 디자이너 협업 팁 🎨

• 개발 시 아이콘 사용 라이브러리는 프로젝트마다 다름.
• 인기 있는 라이브러리 예: Feather icons, React Icons, Iconify 등.
• 아이콘은 svg 형식이 커스터마이징에 유리하고 깨짐이 적음.
• 디자이너 요구에 따라 png 형식을 사용하는 경우도 있음(고정 사이즈, 용량 경량화 목적).
• Iconify는 Figma 플러그인도 지원해 디자이너와 개발자 간 연동 편리.
• 캐싱은 로컬스토리지에 되고, 런타임에 아이콘을 다운받아 사용하는 방식.
• 아이콘 선택 시 사용자 경험과 프로젝트 성격에 맞게 결정할 것.

7. React 관련 에러 처리 및 상태관리 팁 ⚙️

• React 상태 업데이트 시 렌더링이 안 된다면 key 문제, 상태 업데이트 비동기 특성, 컴포넌트 재사용 이슈를 의심해야 함.
• useState의 setState는 비동기로 동작하며, 바로 확인하면 변화가 반영되지 않은 것처럼 보일 수 있음.
• 올바른 상태 변경과 렌더링 관리 위해 상태를 업데이트하는 콜백 방식이나 useEffect 활용 필요.
• React hook form 사용 시 상태, 변경 핸들러가 다소 특이해 문제 발생할 수 있음.
• 에러 바운더리(Sentry 등)와 에러 로그가 중복되는 문제는 에러 핸들링 구조 점검 필요.

8. 취업 준비 조언과 서류 합격률 높이는 방법 🎓

• 지원 시 목표 회사나 분야를 명확히 정하는 것이 중요.
• 포트폴리오 및 프로젝트는 해당 회사 기술 스택과 닮은 데 집중하는 것이 서류 합격률에 도움됨.
• 도메인에 관한 질문은 면접에서 회사에 대한 관심도 파악 차원으로 종종 등장하며, 비즈니스 도메인 기본 이해는 긍정적.
• 꾸준한 지원과 폭넓은 기술 스킬과 경험이 결국 합격으로 연결됨.

9. 개발자 연봉과 실력에 관한 이야기 💰

• 연봉은 실력과 어느 정도 연관 있지만, 회사 나름이고 실력만으로 결정되지는 않음.
• 대기업, 글로벌 기업은 고연봉 사례가 많음 (예: 토스, 프레스토랩스 등).
• 실력이 상위 수준이며 기회가 많으면 더 좋은 급여를 받을 가능성 높음.
• 연봉 협상 시 회사 재정상황, 시장 시세, 본인 실력을 객관적으로 파악하는 것이 중요.

10. 면접 시 비즈니스 도메인 질문 경험 🤔

• 일부 면접에서 지원자가 지원한 회사의 비즈니스 도메인에 대해 물어보기도 함.
• 도메인 질문은 회사에 대한 관심과 기본 지식을 확인하기 위한 목적임.
• 도메인 지식이 부족하더라도, “조금 공부했고 이해하려 노력 중”이라는 태도도 긍정적 평가를 받음.
• 너무 깊은 내용을 모른다고 좌절할 필요 없고, 본인의 기술적 강점과 학습 의지를 어필하는 것이 더 중요.

면접팁⚡

• 리액트 리스트 Key: key 값은 고유하고 변하지 않는 값이어야 하며, 컴포넌트 내부 prop로 받지 않는다는 점을 명확히 설명 가능해야 함.
• Origin 헤더 문제: 클라이언트 요청에서 Origin 헤더를 변경하는 것이 불가능함을 정책과 보안 관점에서 설명하면 신뢰도 향상.
• 기술 스택 선택: Next.js와 React 차이를 이해하고 회사 기술 스택과 자신의 수준에 맞춰 프로젝트 선택 및 학습 계획을 논리적으로 설명할 준비 필요.
• 도메인 질문 대응: 면접에서 도메인 관련 질문이 나오면 관심과 기본조사를 했음을 보여주고, 모르는 부분은 솔직하게 학습 의지를 표현하자.

링크🔗

• React Icons: https://react-icons.github.io/react-icons/
• Feather Icons: https://feathericons.com/
• Iconify: https://iconify.design/
• Iconify Figma Plugin: https://www.figma.com/community/plugin/735098390272716381
• MDN Origin Header 관련 문서: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin
• Github 언어 인기 통계: https://octoverse.github.com/
• Next.js 공식 문서: https://nextjs.org/
• React 공식 문서(리스트와 key): https://reactjs.org/docs/lists-and-keys.html
• Tailwind CSS postcss 이슈: https://github.com/tailwindlabs/tailwindcss/issues/8806
• VSCode Remote: https://code.visualstudio.com/docs/remote/vscode-server
• Zed IDE (차세대 에디터): https://zed.dev/
• React Query 공식 문서: https://react-query.tanstack.com/