목차
- 직장 내 스트레스와 이직 고민
- JavaScript 객체 초기값 참조 문제
- Next.js + GraphQL + Apollo Client 활용과 BFF 개념
- Radix UI vs Tailwind CSS UI 라이브러리 비교
- Redux와 useReducer 간의 관계
- React Native iOS useNavigate 문제
- Vanilla Extract와 Next.js 최신 동향
- CSS 및 레이아웃 팁: Tailwind CSS와 Grid 활용
- 이직 면접 질문 팁과 대응법
- 신입 개발자 취업 준비 및 이력서 작성
1. 직장 내 스트레스와 이직 고민 😓
- 직장 내 언쟁과 스트레스로 인해 불편함과 건강 악화를 경험하는 사례가 많음.
- 대표와의 갈등, 회사 분위기 문제 등으로 인해 이직을 진지하게 고민하는 개발자들이 다수.
- "이직이 답이다"는 의견과 자신의 마음가짐, 명상과 자기암시 등으로 내면을 단련하라는 조언이 공존.
- 스트레스가 심할 때는 빠르게 퇴사하는 것이 몸과 정신 건강에 도움이 된다는 조언.
- 이직 후 후회하지 않도록 연봉, 근무환경 등을 충분히 고려 후 결정해야 함.
- 상담 전 긴장과 불안감은 자연스러운 현상이므로 경험자 조언 듣고 마음 다잡는 것이 중요.
2. JavaScript 객체 초기값 참조 문제 💡
- 객체 리터럴 내에서 같은 객체의 다른 필드 값을 참조할 수 없음. (예: const user = {group: 'design', captain: group === 'develop' ? 'Jang' : 'Lee'} 불가)
- 이러한 경우 초기값을 계산하려면 함수를 사용하여 리턴하는 방식이 일반적임.
- this로 참조하려는 것도 동작하지 않음, JavaScript 객체 리터럴은 평가 시점에 모든 필드가 독립적으로 처리됨.
- 상태 초기화 시 복잡도가 높을 경우 함수화를 통해 관리하는 것이 코드 유지보수에 유리함.
3. Next.js + GraphQL + Apollo Client 활용과 BFF 개념 🚀
- Apollo Client와 GraphQL을 사용하면 프론트엔드가 필요한 데이터만 선택적으로 요청할 수 있어 오버페칭(overfetching) 문제 해소에 효과적.
- GraphQL의 네트워크 호출 최적화, 캐싱 기능 덕분에 React 동시성 처리도 부드러워짐.
- BFF(Backend-For-Frontend) 패턴은 클라이언트별 필요한 방식으로 API를 중간에서 조합/변환하는 레이어를 뜻함.
- Next.js의 api 폴더에 BFF 레이어를 구현하면, 다양한 서비스의 데이터를 한 곳에서 조합해 프론트에 맞는 형태로 제공 가능.
- BFF는 기기별로 따로 만드는 경우도 있으며, API Composition(여러 API를 조합하는 개념)와 비슷하지만 용어 사용 시 차이점을 이해하는 것이 중요함.
4. Radix UI vs Tailwind CSS UI 라이브러리 비교 🧩
- Radix UI: React용 accessible component 라이브러리로, 실제 UI 동작에 필요한 기본 기능을 제공하나 커스터마이징에 제한이 있음.
- 예: Slider 다중 포인트 미지원, Dropdown 메뉴 닫힘 방지 설정 부족.
- 직접 Radix 소스 수정하지 않는 이상 한계가 있어 복잡한 요구사항에는 적합하지 않을 수 있음.
- Tailwind CSS: 유틸리티 퍼스트 CSS 프레임워크로 빠르고 체계적인 레이아웃 및 스타일링에 강점.
- 약칭 클래스 조합을 통해 손쉽게 스타일 작성 가능하며 번들 크기 최적화 가능.
- 장점: 빠른 프로토타입, 적은 CSS 오버헤드.
- 단점: 클래스명이 많아질 수 있고, 코드 가독성이 떨어질 수 있음.
- 상황에 따라 Radix + Tailwind 조합 혹은 Tailwind 단독 사용을 많이 추천함.
5. Redux와 useReducer 간의 관계 ⚙️
- Redux는 reducer 패턴을 활용한 상태관리 라이브러리의 대표적 예시.
- React의 useReducer 훅도 reducer 패턴을 이용해 복잡한 컴포넌트 상태 관리를 간단하게 할 수 있음.
- 문법적으로 유사하지만 Redux는 전역 상태 관리용으로 더 복잡한 미들웨어, DevTools, 액션 디스패칭 등을 포함하는 생태계를 갖춤.
- 간단한 컴포넌트 단위 상태는 useReducer로 충분하지만, 큰 앱에서는 Redux 또는 대체 라이브러리 사용을 고려.
6. React Native iOS useNavigate 문제 🍎
- useNavigate 훅은 React Router에서 라우팅을 위한 기능.
- iOS 환경에서 해당 훅이 동작하지 않는 경우가 있음.
- React Native에서 네비게이션은 보통 React Navigation 라이브러리를 사용하는데, 웹 전용 라우팅 훅이 네이티브 환경에선 지원되지 않을 수 있음.
- 문제점 조사 시 GitHub 이슈, 공식 문서, 커뮤니티 사례 검색 필수.
- 임시 해결책으로 플랫폼별 코드 분기 처리하거나 네이티브 네비게이션 라이브러리 사용 권장.
7. Vanilla Extract와 Next.js 최신 동향 🍦
- Vanilla Extract는 타입 안정성이 뛰어난 CSS-in-TypeScript 라이브러리.
- Next.js 13 버전의 appDir 기능 활성화 시 Vanilla Extract 사용에 특수 옵션 필요.
- 13.5 버전 이상에서 윈도우 환경에서 Vanilla Extract 관련 이슈 존재. 맥 환경은 상대적으로 안정적.
- 공식 GitHub 이슈, PR 참고해 최신 버전 및 패치 상황 확인 필요.
- Vanilla Extract는 Tailwind CSS와 다르게 스타일 토큰 설계에 강점이 있어 디자인 시스템에 적합.
8. CSS 및 레이아웃 팁: Tailwind CSS와 Grid 활용 🎨
- CSS로 카드를 가운데 정렬하려면 flex 혹은 grid 활용이 효과적.
- Tailwind CSS 예시: w-full h-full flex items-center justify-center 또는 grid place-items-center
- Grid의 place-items-center는 가로, 세로 중앙 정렬을 한 단어로 쉽게 처리 가능해 생산성 증가.
- 클래스 네이밍은 명확히 컨테이너/컴포넌트 역할을 구분하는 것이 좋음(e.g., card_container 등).
- CSS 문제 진단 시 개발자 도구 활용 권장.
9. 이직 면접 질문 팁과 대응법 🎯
- "왜 우리 회사에 지원했나요?"는 단골 질문이나 지나치게 반복적이면 지원자에게 부담 유발.
- 지원동기 준비 시 회사 서비스, 도메인, 기술 스택, 성장 가능성 등의 포인트 짚어 답변하면 긍정적.
- 이직 텀이 짧을 경우 솔직한 사유를 준비하되 부정적 인상을 주지 않도록 표현하는 것이 중요.
- 서류전형에서 학벌과 자격증을 보는 회사도 있으나, 깃허브 개인 프로젝트와 실무 능력으로 평가하는 회사가 많음.
- 최종 면접 결과 발표는 회사마다 상이하니 인사팀에 문의하는 것이 빠름.
- 퇴사와 이직 과정에서는 오퍼를 먼저 받고 퇴사일을 결정하는 것이 일반적이며, 무리한 조기 퇴사는 권장하지 않음.
10. 신입 개발자 취업 준비 및 이력서 작성 ✍️
- 이력서는 간결하지만 자신이 작업한 프로젝트, 기술 스택, 역할을 명확히 작성하는 것이 중요.
- 노션, PPT, 개인 웹사이트 등 다양한 형태로 자기소개서 및 포트폴리오 제작 가능.
- 기술 스택을 반영한 소개 페이지를 직접 만들어 보는 것도 좋은 방법.
- 신입의 경우 학벌과 자격증을 보는 경향이 있으니 관련 내용을 포함할지 고민 필요.
- 깃허브 등 코드 저장소 링크를 첨부하면 실무 능력 증명에 도움이 됨.
- 면접 준비할 때는 자기소개, 지원 이유, 이전 프로젝트 경험에 대해 구체적이고 솔직히 답변하는 것이 좋음.
면접팁⚡
- 기술 면접뿐 아니라 문화 적합도 질문도 중요. "왜 이 회사인가요?" 질문은 회사에 대한 충분한 사전 조사를 통한 성의 있는 답변 준비 필요.
- 짧은 이직 사유를 물으면 솔직하면서도 긍정적으로 전환하는 답변을 구사할 것.
- 프로젝트 경험과 해결했던 문제, 배운 점을 구체적으로 이야기하며 자신의 역량을 보여주기.
- 면접 중 불편한 질문이나 반복 질문은 너무 스트레스 받지 말고, 간단 명료하게 답변하며 화내지 않는 태도를 유지하는 것이 좋음.
- 퇴사 일정과 이직 계획은 확정 후 회사에 통보하는 것이 기본. 급한 경우 대화로 조율 가능.
링크🔗
#이직#자바스크립트#React#GraphQL#Nextjs#TailwindCSS#Redux#VanillaExtract#면접팁#초보개발자