목차
- AI 코드 생성과 프롬프팅 전략
- React 환경에서의 쿼리키와 캐싱 문제
- React 상태관리: Props Drilling과 Context API
- CSS-in-JS, Tailwind, Emotion, Stylex 등 비교
- iOS WKWebView 내 오디오 제어 이슈
- 개발자 직장 생활과 업무 분배 고민
- 피그마와 디자인 협업 관련 팁
- 면접과 직장 환경 이야기
- 출퇴근 지역 및 주거지 선택 팁
- 추천 리소스 및 커뮤니티
1. AI 코드 생성과 프롬프팅 전략 🤖
- AI가 생성하는 코드는 동일한 프롬프트여도 매번 결과가 달라질 수 있음.
- 원하는 결과를 얻으려면 프롬프트를 신중하게 설계해야 함.
- 생성된 코드는 반드시 사람이 검토해야 하며, 코드를 분석하고 이해하는 능력이 필수임.
- 문제점을 판단하고 적절한 가이드를 AI에 제시하는 과정 자체가 매우 중요함.
- 예를 들어, 디자인이 정상적으로 출력되지 않으면 코드를 해석해 무엇이 문제인지 찾아야 최적화 가능.
_프롬프팅(Prompting)_이란 AI에게 정확하고 원하는 답변을 얻기 위해 질문이나 지시문을 정교하게 작성하는 능력임.
2. React 환경에서 쿼리키와 캐싱 문제 💾
- React Query 등의 라이브러리에서 쿼리키가 동일하면 데이터를 캐싱하여 재호출을 막음.
- 같은 조건으로 호출 시에는 ‘isPending’이나 ‘isFetching’ 상태 변화가 없어서 로딩 표시가 어려움.
- 해결책으로는 invalidateQueries를 이용해 캐시를 무효화하거나, 쿼리 키를 다르게 만들어 다시 호출하는 방법 제안.
- UI에서는 사용자에게 ‘검색 중’임을 알릴 별도의 로딩 상태 관리를 권장함.
3. React 상태관리: Props Drilling과 Context API 🔄
- Props Drilling: 컴포넌트 트리의 상위에서 하위로 props를 여러 단계에 걸쳐 전달하는 것.
- 이 과정에서 불필요한 컴포넌트들이 props를 받기만 할 때 관리가 어렵고 비효율적임.
- 이를 해결하기 위해 Context API를 많이 쓰며, 전역 상태를 관리하는 데 용이함.
- 다만, Context API도 남용하면 성능 저하 우려 있어 구조 변경 후 사용하는 것이 좋음.
- 실무에서는 Context API가 많이 사용됨. 먼저 구조를 재배치해보고, 그래도 안 되면 Context API 도입 권장.
4. CSS-in-JS, Tailwind, Emotion, Stylex 등 비교 🎨
- 최근 styled-components가 공식적으로 종료되어 점차 저물어가는 추세임.
- Tailwind CSS, Emotion, Stylex 등 다양한 스타일링 도구 중 선택이 고민됨.
- 각 도구들은 CSS를 관리하는 패러다임이 다르므로 팀과 프로젝트 상황에 맞는 도구 선택이 중요함.
- styled-components는 인지도가 높았지만 기능상 타 도구에 뒤처진 점 지적됨.
- Stylex는 페이스북에서 사용하는 CSS-in-JS 대안으로 추천되기도 함.
5. iOS WKWebView 내 오디오 제어 이슈 📱
- iOS WKWebView에서 오디오를 재생하면 iOS 제어 센터에 오디오가 잡히는 문제가 있음.
- 이는 iOS의 웹뷰 내에서 미디어 세션이 자동으로 컨트롤 센터와 연결되기 때문임.
- 문제 해결을 위해서는 WKWebView 설정 조절이나 JavaScript 레벨에서 오디오 재생 제어 로직을 작성해야 함.
- 비슷한 환경에서 Flutter WebView와는 차이가 있으니 WKWebView 고유 특성으로 이해 필요.
6. 개발자 직장 생활과 업무 분배 고민 💼
- 신입 혹은 입사 초기에는 프로젝트 셋팅, 리팩토링, 테스트 코드 작성 등의 허드렛일 중심 업무를 맡는 경우가 많음.
- 단순 반복 UI 작업만 맡게 되면 업무 만족도와 성장에 고민이 생김.
- 이럴 때 상사에게 업무 희망을 직접 표현하는 것이 중요한 해결책임.
- 회사마다 분위기 차이가 크지만 보통은 의사 전달을 하면 긍정적으로 반영되는 경우가 많음.
- 사수가 적극적으로 멘토링을 해주면 실무 투입이 더 빨라지는 효과가 있음.
7. 피그마와 디자인 협업 관련 팁 🎨
- 디자인 도구인 피그마에서 ‘셀렉션 링크’를 통해 특정 오브젝트나 셀렉션을 공유하는 것이 효과적임.
- 일부 사용자 경험 오류는 피그마 자체 문제가 아닌 연동 서비스(CURSOR) 오류인 경우도 있음.
- clone 코딩용 피그마 자료는 구글 검색 시 ‘Figma web templates’로 다양하게 찾을 수 있음.
- 제플린 사용자는 피그마에 비해 느린 업데이트에 아쉬움을 표하지만, 여전히 널리 활용됨.
8. 면접과 직장 환경 이야기 🎤
- 면접 중 술 한 잔 하는 것에 대해 긴장을 완화시켜 긍정적이라는 의견까지 다양함.
- 좋은 직장은 최소한 물 한 잔이라도 제공하는 것이 기본이라는 농담 섞인 토론 존재.
- 면접 시에는 평상시 하던 대로 침착하게 임하는 것이 중요하며, 독특한 분위기도 공유됨.
- 연봉과 복지 외에도 피드백 및 조직문화도 중요한 평가 요소라는 점 강조.
9. 출퇴근 지역 및 주거지 선택 팁 🏠
- 서울과 경기 출퇴근 시 지역별 특성이 매우 다름.
- 예를 들어, ‘하남’ 지역은 교통과 생활 편의 때문에 ‘극악’이라는 평가도 있음.
- ‘강남/분당’ 쪽은 신분당선 라인을 따라 접근성이 좋음.
- ‘신림’역 등도 교통 편리 지역으로 꼽힘.
- 주거지는 출퇴근 시간, 안전성, 임대주택 가능성 등을 고려해 지역 커뮤니티나 현지 경험자를 통해 정보를 수집하는 것이 좋음.
10. 추천 리소스 및 커뮤니티 🔗
- MDN CSS ::picker-icon - CSS 관련 참고 자료
- GitHub Status - GitHub 서비스 상태 확인
- 패스트캠퍼스 데브캠프 프론트엔드 프로젝트십 3기
- React 공식 Docs (Context API)
- 피그마 웹 템플릿 검색 예시
면접팁⚡
- 면접 시 긴장을 푸는 방법으로 가벼운 음주는 개인차에 따라 효과적일 수 있음. 하지만 과음은 피해야 함.
- 면접관에게 ‘평소 하던 대로’ 자신감을 갖고 임하는 것이 합격의 지름길임.
- 면접에서 회사가 최소한 물 한 잔이라도 제공하지 않는다면 조직 문화나 복지에 대해 꼼꼼히 살펴볼 필요가 있음.
- 자신이 맡고 싶은 업무가 있으면 면접이나 입사 후 빠르게 의사 표명하는 것이 중요함.
#React#프론트엔드#프롬프팅#상태관리#쿼리키#CSSinJS#WKWebView#개발자생활#피그마#면접팁