목차
- 급여 밀림 이슈와 퇴사 고민
- HTML/CSS 기초 강의 추천 및 학습 방법
- React에서 두 번 렌더링 문제와 해결법
- Chakra UI vs Tailwind CSS 등 스타일링 라이브러리 고민
- 면접 질문 및 기술 스택 작성 팁
- Flutter와 React, JavaScript 트렌드 논의
- 계약직, 수습 기간에 대한 현황과 주의사항
- React 훅(useEffect, useState) 내부 구조와 활용
- 리렌더링 최적화에 대한 개발자 의견
- 기타 개발 관련 팁 및 커뮤니티 분위기
1. 급여 밀림 이슈와 퇴사 고민
- 몇몇 개발자들이 월급이 제때 들어오지 않아 스트레스를 겪고 있음
- 반복된 급여 지연에 퇴사 고민 중인 사례도 있었음
- 급여 지연은 회사의 신뢰도에 큰 영향을 미치므로 주의가 필요함
- 첫 월급부터 밀리는 경우가 있어 신입 입장에서 심적 부담이 커 보임
💡 팁: 급여가 밀리는 회사는 빠르게 상황을 파악하고 필요 시 이직 고민을 하는 것이 정신 건강과 경력 관리에 도움됨
2. HTML/CSS 기초 강의 추천 및 학습 방법
- 기초가 부족하다는 의견이 있어 학습 코스 추천 요청
- 'web.dev'를 추천, 구글에서 운영하는 웹 개발 공식 학습 사이트
- 기초부터 차근차근 배우는 것이 중요하다는 조언
- React, Vue 등 프레임워크 전에 HTML/CSS 기본기를 탄탄히 할 것
설명
HTML은 웹페이지의 구조를 만드는 언어이고, CSS는 그 구조에 스타일을 입히는 언어임. 초보자는 두 기술을 튼튼히 익혀야 프론트엔드 개발에 탄탄한 기반이 됨.
3. React에서 두 번 렌더링 문제와 해결법
- React.StrictMode 사용 시 개발 환경에서 useEffect 내부의 API 요청이 두번 발생하는 이슈가 공유됨
- StrictMode는 리액트 앱의 잠재적인 문제를 미리 발견하기 위한 개발 단계 기능임
- 프로덕션 빌드에서는 두 번 렌더링되지 않음
- useEffect 의존성 배열, 초기 state 값이 null 이거나 빈 값일 때 두 번 호출되는 경우가 많음
- 비동기 호출 코드와 useEffect 내부 로직 점검 필요
핵심
React.StrictMode는 일부 함수형 컴포넌트를 두 번 렌더링하여 문제를 조기에 파악하게 도와줌. 개발 중에 두번 호출되는 현상은 정상이며, 프로덕션 빌드 시 자동으로 제거됨.
4. Chakra UI vs Tailwind CSS 등 스타일링 라이브러리 고민
- Next.js 14 App Router 프로젝트에 Chakra UI를 쓸지, Tailwind CSS를 쓸지 고민하는 개발자 다수
- Chakra UI는 쉽고 빠른 컴포넌트 기반 UI 라이브러리, 다만 설정에 따라 이슈 발생 가능
- Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로 높은 커스터마이징 가능
- Radix-ui와 Tailwind를 조합해 쓰는 경우도 있고, shadcn/ui 라이브러리 활용도 추천됨
설명
- Chakra UI: React 컴포넌트 라이브러리, 접근성과 테마를 손쉽게 관리 가능
- Tailwind CSS: 클래스 기반 스타일링으로, 자유도 높고 퍼포먼스 최적화에 유리
- Radix UI: 접근성 좋은 UI primitives 제공, Tailwind와 함께 쓰면 강력함
5. 면접 질문 및 기술 스택 작성 팁
- 주니어 프론트엔드 개발자가 2차 면접에서 나올 질문에 대해 불안감을 토로함
- 수퍼베이스(Supabase)는 Firebase 유사 Backend-as-a-Service (BaaS), 기술 스택에 넣으려면 관련 질문에 답할 준비가 필요
- "기술 스택에 이름만 적으면 독이 될 수 있다"는 조언이 있음
- 면접에서 받은 질문 예시 : "안정성이 높은 프로젝트 마감 연기 vs 마감 지키지만 안정성이 떨어지는 개발 중 무엇이 더 나은가?"
- 답변 팁: 안정성 중요, 마감은 현실적인 일정 관리가 필요하나 품질 저하는 신뢰 손실로 이어짐
6. Flutter와 React, JavaScript 트렌드 논의
- Flutter는 모바일 앱 개발 중심이며 웹 빌드도 가능하지만, 내부적으로는 HTML/CSS/JS로 변환됨
- Flutter 앱의 렌더링 방식은 전통적 웹 개발과 다름(직접 그리기 방식)
- JavaScript와 React가 웹 프런트엔드의 대세임을 다시 확인
- Flutter는 앱 위주로 사용되며 웹은 아직 부가적인 활용에 머무름
7. 계약직, 수습 기간에 대한 현황과 주의사항
- 3개월 계약직 이후 정규직 전환 케이스가 많음
- 계약직과 수습 기간은 엄연히 다름(계약직은 계약 기간 끝나면 고용 종료 가능, 수습은 평가 후 정규직 전환 가능)
- 계약서와 기업 정책을 꼼꼼히 확인할 필요성 강조
- 수습 기간 없이 계약직인 경우 좀 더 위험할 수 있으니 주의 권고
8. React 훅(useEffect, useState) 내부 구조와 활용
- React 훅은 내부적으로 getCurrentDispatcher 등 매커니즘으로 동작, 최근 업그레이드 상황 공유됨
- useEffect 내에 if 문을 두는 것은 가능하나, useEffect 자체를 if문 안에서 호출하는 것은 리액트 훅 규칙 위반임
- 여러 훅들이 'use' 접두어를 가지며, 커스텀 훅도 쉽게 만들 수 있음
- 리액트 훅의 본질과 구현 원리를 공부하면 심화된 리액트 앱 개발에 도움됨
9. 리렌더링 최적화에 대한 개발자 의견
- 컴포넌트가 자주 리렌더링 되는 문제에 대해 다양한 의견 공유
- 리렌더링 횟수보다 성능 저하가 체감되는지 여부가 더 중요하다고 보는 시각 많음
- input 등 느려지면 최적화 진행하되, 기기 성능 향상으로 어느 정도 과거보다는 여유로워짐
- React DevTools에서 보이는 리렌더링이 항상 문제인 건 아님
10. 기타 개발 관련 팁 및 커뮤니티 분위기
- react-beautiful-dnd 라이브러리의 드래그 시 인덱스 조작 관련 질문과 링크 공유
- setTimeout, requestAnimationFrame 사용 이유와 타이밍 제어 관련 설명
- CI/CD 대기 중 지루함 토로, 실무자의 공감대 형성
- 개발자들끼리 사내 간식, 점심 메뉴, 몸무게 농담 등 친밀감 있는 소통 부드럽게 이어짐
- 리액트 관련 신간 나눔 이벤트, 깃헙 RFC React 컨커런트 모드 언급 등 정보도 공유됨
면접팁⚡
- 면접에서 기술 스택에 적은 라이브러리나 기술은 반드시 기본적인 질문에 대답할 수 있도록 준비할 것
- "안정성 vs 마감" 질문은 안정성을 우선시 하며 구체적 상황에서 어떻게 조정할지 사례 중심으로 답변하면 좋음
- React 훅 규칙(최상위에서 호출, 조건문 안에서 호출 금지)을 잘 숙지하면 훅 관련 질문 대응에 유리
- 수습/계약직 문제에 대해 질문받을 경우, 회사 방침과 계약서 내용을 정확히 이해하고 의견 제시하는 모습이 긍정적
링크🔗
#React#JavaScript#CSS#FrontEnd#ChakraUI#TailwindCSS#Flutter#면접팁#계약직#리렌더링