목차
- Zustand와 Redux 비교
- 프로토타입 개발과 디자인 툴 활용법
- React useState 비동기 이해와 팁
- 신입 개발자 연봉 고민과 면접 조언
- 피그마(Figma)와 코드 변환 관련 정보
- 개발 관련 소소한 일상과 유튜브 UI 변화
- Electron과 데스크탑 앱 개발 현황
- 기술 면접에서 활용할 수 있는 내용
Zustand #Redux #useState #피그마 #신입연봉 #면접팁 #Electron #프론트엔드 #프로토타입
1. Zustand와 Redux 비교 🔄
- Zustand는 React 상태 관리 라이브러리 중 하나로, Redux와 비슷한 이름을 붙이기도 하지만 엄밀히 다름.
- Redux는 복잡한 상태를 예측 가능하게 관리할 수 있도록 고안된 라이브러리로, reducer 함수를 사용하는 패턴이 특징임.
- Zustand도 reducer를 지원하지만, Redux가 제공하는 엄격한 구조와는 다르다고 봐야 함.
- 개발자 사이에서 Redux가 '좋다 / 안 좋다' 평가는 개인 취향 차이로 따지는 경우가 많음.
- 핵심은 프로젝트 규모와 팀 선호도에 따라 적합한 라이브러리를 선택하는 것이 중요.
2. 프로토타입 개발과 디자인 툴 활용법 🎨
- 프로토타입은 제품 개발 초기에 기능 점검과 UI 흐름 확인에 도움.
- 피그마(Figma)는 UI/UX 디자인을 위한 협업 툴로, 프로토타입 디자인에 널리 사용됨.
- 초보자나 피그마 전문가 모두, 처음부터 코딩을 바로 진행하는 경우가 많음.
- 피그마에서 디자인을 코드로 바로 추출하는 기능이 존재하지만 대체로 제한적이며, 개발자들이 직접 코드를 작성하는 비중이 큼.
- 피그마의 코드 추출 기능은 보통 유료 플랜(Dev Mode)에서 더 강력하게 지원됨.
3. React useState 비동기 이해와 팁 ⚛️
-
React의 useState는 상태를 설정하는 setState 함수가 비동기처럼 동작함.
-
상태 업데이트 후 즉시 console.log를 하면 예전 값을 출력하는 이유는 React가 상태 변경을 스케줄링하기 때문임.
-
공식 문서에 따르면, 상태 업데이트는 배치 처리되어 화면이 리렌더링 되기 전까지 반영되지 않음.
-
상태 변경 시점 이전 값을 알고 싶으면 setState의 함수형 업데이트를 활용하면 됨: js setState(prev => { console.log(prev); return prev + 1; });
-
이런 방법으로 상태 변화를 추적하면 동기/비동기 문제를 극복할 수 있음.
-
React 공식 문서를 자주 읽는 것이 매우 중요하며, 초보들도 꼭 참고할 것.
4. 신입 개발자 연봉 고민과 면접 조언 💰
- 신입 프론트엔드 개발자 희망 연봉 3200만원(중소기업 기준)은 현실적이고 크게 높지 않은 편으로 평가받음.
- 연봉이 면접 불합격 요인이 될 가능성은 낮으며, 대부분 회사는 조정을 통해 해결하려 함.
- 연봉 제시는 마음 편히 하되, 회사의 기술 스택, 성장 가능성, 업무 환경 등을 함께 고려하는 것이 중요.
- 현명한 선택을 위해 연봉 외에도 ‘내가 성장할 수 있는 곳인지’를 먼저 판단할 것.
- 면접에서 연봉 희망액 질문이 나올 때 자신감 있게 답해도 무방.
- 취업 준비 중인 분들에겐 선배들 조언을 듣고 힘내라는 응원을 전함.
5. 피그마(Figma)와 코드 변환 관련 정보 🖥️
- 피그마는 UI 디자인 도구이고, 일부 코드 뽑아내기 기능이 있지만 완벽하지 않음.
- 대부분 숙련된 개발자들은 피그마 디자인을 참고해 직접 코딩하는 방식 선호.
- 코드 추출 기능은 제한적이며, 고급 기능은 유료 플랜에서 지원됨.
- 디자인 툴과 개발 툴을 효율적으로 연결하는 스킬은 개발자의 생산성에 도움됨.
6. 개발 관련 소소한 일상과 유튜브 UI 변화 🎬
- 개발자들 사이 자연스런 소통과 응원 분위기.
- 유튜브 PC용 UI가 업데이트되어 영상 시청 중 댓글을 아래로 내려가면서 볼 수 있는 기능 추가됨.
- 앱도 업데이트 되고, 이런 UI 변화들은 사용자 경험을 개선하는 방향임.
7. Electron과 데스크탑 앱 개발 현황 🖥️
- Electron은 웹 기술로 데스크탑 앱을 만드는 프레임워크.
- 현업에선 Electron보다 .NET, 자바, C#, 파이썬 같은 전통적 데스크탑 개발 환경도 많이 쓰임.
- Electron은 크로스 플랫폼 개발에 유리하나, 성능 이슈나 무거운 앱 문제로 비판 받기도 함.
- 개발자들 사이에 Electron 사용 여부는 프로젝트 상황과 선호에 따라 달라짐.
8. 기술 면접 활용 팁⚡
- React 상태 관리에서 useState의 비동기성은 자주 묻는 질문 주제.
- setState 함수형 업데이트를 활용한 상태 추적 방법 설명 능력은 좋은 인상 줌.
- Zustand와 Redux의 차이를 이해하고, 각 라이브러리 선택 기준을 설명할 줄 아는 것도 도움이 됨.
- 신입 연봉 협상 시 현실적 조언과 성장 가능성에 대한 고민을 면접관과 공유하면 신뢰도 상승.
링크🔗
- React 공식 useState 문서 및 상태 업데이트 설명
https://react.dev/reference/react/useState#ive-updated-the-state-but-logging-gives-me-the-old-value - 유튜브 최신 UI 업데이트 영상
https://youtu.be/2RsDtRhHnOg?si=svVomlU_Ajf7mOcf
#React#Zustand#Redux#useState#피그마#신입연봉#면접팁#Electron#프론트엔드#프로토타입