2024-10-02

목차

1. 날씨와 계절 변화에 대한 소소한 대화
2. React 폼 밸리데이션과 입력 처리 방법
3. 유지보수 업무와 계약 범위 설정
4. React와 React Native 차이점 및 학습 방향
5. CSS 관리 방법: CSS Module vs Tailwind CSS
6. 모바일 웹 배포 후 UI 문제 해결 팁
7. 코딩 면접(코테) 준비와 개발자 적합성
8. 개발 관련 커뮤니티와 협업 문화 이야기
9. 개발자의 일상 및 분위기 소통
10. 기술 질문 및 유용한 참고 링크 소개

1. 날씨와 계절 변화에 대한 소소한 대화 🍂🌡️

• 갑자기 추워진 날씨에 대한 이야기로 시작됨.
• 가을이 너무 짧고, 겨울이 일찍 찾아온다는 농담이 오감.
• 지하철이나 대중교통에서의 체감 온도 차이, 옷차림에 대한 다양한 의견 공유.
• 이런 날씨 변화에 맞는 개인용품(휴대용 선풍기 등) 이야기도 나옴.

2. React 폼 밸리데이션과 입력 처리 방법 📝

• 폼 밸리데이션 시, 잘못된 입력에 대해 입력을 강제로 막을지 vs 에러 메시지만 띄울지에 대해 토론.
• 입력 처리 방식 설명:
  • setState를 통해 입력이 변경될 때 상태를 업데이트 하는데, 이를 막으면 입력과 UI가 불일치할 수 있음.
  • 입력 제한(예: 글자 수 제한, 비밀번호 강도 체크)은 사용자 경험 측면에서 일관적인 힌트를 제공하는 방식을 권장.
• 유저 경험 고려:
  • 입력 전에도 오류 표시가 나올 수 있으므로 사용자가 인풋 필드를 만졌는지 상태를 기억하는 방법 필요.
  • 숫자 타입 강제 입력 등 경우에 따라 HTML5 기본 속성 활용 권장.
• 정리: 무조건 입력을 막는 것보다 유연하게 안내 메시지를 주는 방식이 일반적.

3. 유지보수 업무와 계약 범위 설정 🔧

• 유지보수는 기능 추가와 다르며, 일반적으로 버그 수정, 이미지 및 텍스트 수정 정도를 포함.
• 계약서에 유지보수 범위와 추가 작업 금지 명시가 중요함.
• 유지보수 비용은 보통 개발비의 20% 수준으로 책정.
• 때때로 고객사와 커뮤니케이션 시 추가 요청에 대해 철저히 계약 내용을 기반으로 대응해야 함.
• 가끔 재택 근무, 연차 등 근무 관련 이야기와 함께 업무 효율성 분야도 심도 있게 다뤄짐.

4. React와 React Native 차이점 및 학습 방향 📱💻

• React는 웹 브라우저 DOM을 다루는 라이브러리, React Native는 모바일 네이티브 UI 컴포넌트를 다루는 프레임워크임.
• 기본 JavaScript 언어는 같지만 렌더링 방식과 대상 플랫폼이 다름.
• React Native는 Virtual DOM 대신 네이티브 컴포넌트로 렌더링 하므로 약간의 구조적 차이가 있음.
• 웹뷰 기반 React Native 앱이라면 React 웹 지식만 있어도 어느 정도 유지보수가 가능.
• 리액트만 알면 React Native 입문은 쉽지만, 모바일 네이티브 영역은 추가 학습 권장.

5. CSS 관리 방법: CSS Module vs Tailwind CSS 🎨

• CSS Module은 컴포넌트별 스타일 scoping에 용이하고, Tailwind CSS는 유틸리티 클래스 방식으로 빠른 스타일 적용이 가능.
• 외주, 협업, 확장성 측면에서 선택 기준이 다름.
• 의견 공유:
  • 받고 수정하는 입장에서는 Tailwind가 더 편할 수 있음.
  • 유지보수나 확장성 고려 시 CSS Module이 더 적합하다는 의견도 존재.
• Tailwind CSS 사용 시 @apply 문법의 과용은 권장되지 않음.
• 프로젝트와 팀 상황에 맞게 선택하는 것이 가장 중요.

6. 모바일 웹 배포 후 UI 문제 해결 팁 📱🛠️

• 크롬 개발자 도구 모바일 에뮬레이션에서 문제 없어도 실제 배포 후 모바일에서 UI가 틀어지는 경우가 있음.
• 문제 발생 시 체크 포인트:
  • 실제 모바일 기기로 접속해 테스트
  • 개발 환경과 프로덕션 환경 빌드 차이 확인
  • CSS 초기화 스타일이나 미디어 쿼리 문제 가능성 검토
• ADB(Android Debug Bridge)와 Safari 리모트 디버깅으로 모바일 요소 점검 추천.
• 구체적인 구글링 키워드는 "모바일 웹 UI 배포 오류" + "크롬 개발자도구 모바일 테스트" 정도가 유용.

7. 코딩 면접(코테) 준비와 개발자 적합성 🧑‍💻🎯

• 코딩 테스트 문제를 잘 못 푼다고 해서 개발자 적합성까지 단정하기 어렵다는 의견 다수.
• 문제 풀이 스킬은 학습할 수 있는 능력이며, 꾸준한 연습과 끈기가 중요함.
• 현타(의욕 저하) 올 때는 답을 참고하고 비슷한 문제를 반복해서 풀어보는 전략 추천.
• 회사마다 코테 비중 및 난이도가 달라서 너무 좌절하지 말고 자신의 목표에 맞게 준비 필요.
• 면접에서는 기술 외에도 태도, 커뮤니케이션 능력도 크게 평가됨.

8. 개발 관련 커뮤니티와 협업 문화 이야기 🤝

• 개발자들 사이에서 공감되는 이야기(예: 번들 사이즈, UI 최적화 "성급한 최적화는 모든 악의 근원" 명언 등) 공유.
• 유지보수 시 외주와의 협업, 계약상 문제, 추가 요청 처리에 대한 경험 나눔.
• 업무 외 소소한 일상과 취미 공유(애니, 맛집, 회식 등)로 팀 분위기 환기.
• 온라인 채팅방에서의 예의와 오해 최소화를 위한 노하우 조언도 오감.

9. 개발자의 일상 및 분위기 소통 ☕💬

• 재택근무와 연차 사용 팁, 팀 분위기 에피소드, 점심 메뉴 고민 등 소소한 일상 대화.
• 개발자가 겪는 작은 스트레스, 멘탈 관리 방법 소개.
• 팀 내 신입 또는 동료 문제 상황 공유와 해결 고민 나눔.
• 개발자 외형과 인상에 관한 재치있는 농담과 친목 도모.

10. 기술 질문 및 유용한 참고 링크 소개 🔗

• antd 테이블에서 컬럼 클릭 시 상세 정보 표시 방법 질문
  → 기본 옵션으로는 모달 팝업이 적합하며, 커스텀 컴포넌트 생성 추천.
• Visual Studio Code에서 TypeScript 에러 재시작 방법: Cmd + Shift + P → Restart TypeScript Service
• React Strict DOM 실험 기능과 Expo에서의 가능성 공유
• 모바일 웹 UI 문제 해결 참고 블로그:
  • 아이폰 모바일 웹 개발자 모드 확인법
• FSD (Feature Sliced Design) 방법론 소개:
  • Feature Sliced Design 공식문서

면접팁⚡

• 폼 밸리데이션에서 입력 데이터 오류 처리 시
  입력을 막기보다는 에러 메시지로 안내하고, 사용자가 입력 필드를 수정했는지 여부를 상태로 관리해주는 것이 UX에 좋음.
• React Native 학습하기 전에
  앱이 100% 웹뷰로 동작한다면 React 웹 지식 만으로도 유지보수 가능, 하지만 네이티브 컴포넌트 조작 시 추가 학습 필요.
• 코딩테스트 문제풀이가 어렵다고
  곧바로 개발자 부적합으로 판단하기보다, 꾸준한 연습과 관련 알고리즘 학습을 통해 극복하는 자세가 중요함.
• 모바일 웹 UI 문제 해결
  실제 기기 테스트를 우선시하고, 개발 환경과 프로덕션 빌드 차이점을 파악해야 문제 원인을 찾기 쉽다.

링크🔗

• 아이폰에서 모바일 웹 개발자 모드 확인
• Feature Sliced Design 공식문서
• StackOverflow - React Native vDOM 관련 답변: https://stackoverflow.com/a/48916954