react 썸네일react

2024-12-18

목차

  1. 개발 현황과 근황 소소한 이야기
  2. 인지복잡도(Cognitive Complexity) 개념과 코드 품질
  3. React와 훅(Hooks) 사용 관련 질문과 의견
  4. 플러터(Flutter) 기술 스택과 개발 경험
  5. 환경변수(env) 관리 방법과 보안
  6. 개발 도서 출판과 최신 API 변경 문제
  7. GitHub 시크릿(Secrets)과 보안 팁
  8. UI/UX: 플립 폰 환경 대응과 CSS 인 JS
  9. AI와 코딩 보조 도구 활용 현황
  10. 잡담 및 사내 분위기와 팀 문화

1. 개발 현황과 근황 소소한 이야기 ☕️

  • 인터페이스 호환 문제로 작업 중단, 조기퇴근하는 분들도 있음.
  • 한파에 관련된 농담과 대화가 많았음. 영하 6도~8도 사이, 패딩과 코트에 대한 경험 공유.
  • 사내 분위기는 자유롭고 친근하지만, 때로는 과도한 발언은 자제해야 한다는 의견도 있었음.
  • 팀원들 간 근황을 묻고 답하는 따뜻한 소통이 활발했음.
  • 최근 복구 중인 팀원의 인성 문제와 자숙 의지도 언급됨.

2. 인지복잡도(Cognitive Complexity) 개념과 코드 품질 🧠

핵심

  • 인지복잡도는 코드 이해에 필요한 '인지적 노력'을 수치화한 메트릭임.
  • 순환복잡도(Cyclomatic Complexity)와 달리, 단순 분기 수가 아니라 사람이 코드를 해석하는 난이도를 반영함.

설명

  • 순환복잡도는 코드 내 조건문, 분기문의 개수를 세는 메트릭.
  • 인지복잡도는 코드가 얼마나 난해하고 복잡해 보이는지, 즉 가독성과 유지보수에 영향을 미치는 부분을 평가한다.
  • 예를 들어, 깊은 중첩, 반복적인 조건문, 복잡한 로직플로우가 높게 측정됨.

의견

  • 실무에서도 점점 중요시되는 추세이며, 복잡도 낮추기를 위해 코드 리팩토링 권장됨.
  • "인지복잡도가 높으면 니 코드 못 봐주겠다"라는 개발자 농담으로 표현됨.

3. React와 훅(Hooks) 사용 관련 질문과 의견 ⚛️

질문

  • 커스텀 훅을 자식 컴포넌트에 프랍(prop)으로 넘기는 패턴에 대한 질문
  • 훅 호출 시 순서 보장, 문제 유무에 대한 궁금증

설명

  • 일반적으로 훅은 컴포넌트 내부에서 직접 호출해야 함.
  • 훅을 프랍으로 넘기는 패턴은 권장되지 않음. 이는 훅 자체가 상태 관리와 라이프사이클 관리를 위해 React가 내부적으로 호출 순서를 엄격하게 체크하기 때문임.
  • 프랍으로 훅 호출 결과(값이나 함수)를 넘기는 것은 가능하지만, 훅 자체를 프랍으로 넘기는 것은 React 설계 철학과 맞지 않음.

의견

  • 훅 호출이 순서에 민감하기 때문에, 직접 컴포넌트 내부에서 호출하는 게 안전함.
  • 코드 가독성과 유지보수를 위해 패턴을 지키는 것이 중요함.

4. 플러터(Flutter) 기술 스택과 개발 경험 🛠

  • 사내에 플러터 도입에 대한 고민과 토론 많음.
  • 플러터 개발은 애플리케이션 메시징, 이벤트 송수신, SDK 호환 이슈 등이 주요 고려 사항임.
  • 플러터 개발에 AI 코딩 도구와의 호환성에 대한 의견 교류도 있었음.
  • 커서 기반 코드 추천 기능 등 AI 도구가 플러터 개발 생산성에 도움을 주고 있음.
  • 구글의 느린 일처리로 인해 커뮤니티 버전 'Flock' 등장과 현재 소식 부재에 대한 아쉬움도 공유됨.

5. 환경변수(env) 관리 방법과 보안 🔐

핵심

  • 포트 번호 등 서버 환경 변수를 process.env를 통해 관리함.
  • 다만, 브라우저 환경에서 환경변수는 노출될 수 있다는 점을 인지해야 함.

설명

  • 환경변수(env)는 보통 민감한 정보(비밀번호, API키 등)를 관리하기 위해 사용됨.
  • 클라이언트 사이드에서는 절대 시크릿 정보가 노출되므로, 이러한 변수는 서버에서만 사용해야 함.
  • 브라우저에서 보이는 변수는 중요도가 낮은 값으로 제한하는 것이 좋음.
  • GitHub Actions 등 CI/CD 시크릿 기능을 활용해 외부에 정보가 노출되지 않도록 관리 가능.

의견

  • 포트번호 정도는 크리티컬하지 않으니 노출되어도 큰 문제는 없으나, 데이터 노출에 주의는 필수임.

6. 개발 도서 출판과 최신 API 변경 문제 📚

  • 일부 출판된 개발서가 최신 API 버전(예: Java 19)와 맞지 않아 실무 적용에 어려움 존재.
  • 출판과 동시에 새 버전 출시로 책 업데이트가 늦어지는 경우 많음.
  • 이에 따라 최신 버전 학습은 별도로 진행하거나 공식 문서 참고 권장됨.
  • 개발서 구매는 개인별 차이가 크고 절판 우려도 있어 신중히 결정 필요.

7. GitHub 시크릿(Secrets)과 보안 팁 🔑

  • GitHub 시크릿은 CI/CD 환경에서 민감한 환경변수 관리 기능임.
  • 외부 커밋 히스토리에 시크릿 정보 유출을 방지할 수 있음.
  • 개인이나 조직 환경에서 반드시 보안상 활용해야 하는 기능으로 강조됨.

8. UI/UX: 플립 폰 환경 대응과 CSS 인 JS 💻

  • 플립 폰(폴더블폰) 해상도 대응 문제가 여전히 존재하고 있음.
  • 대표적인 대응 방법은 CSS 미디어쿼리를 사용해 반응형 디자인 적용.
  • 플립 폰 해상도가 낮아 UI가 깨지는 문제를 방지하기 위해 최소 해상도 대응이 중요함.
  • JavaScript보다는 CSS로 해상도 및 스타일 대응하는 것이 권장됨.
  • 일부 기업 임원진 이슈로 인해 현실적으로 모든 해상도 대응이 어렵다는 의견도 존재.

9. AI와 코딩 보조 도구 활용 현황 🤖

  • GitHub Copilot, Cursor AI 등 다양한 AI 코딩 도구 사용 경험 공유됨.
  • 커서 기반 인라인 추천 기능은 개발 생산성 향상에 기여함.
  • AI 도구가 일부 복잡한 컴포넌트 구현도 도와주지만, 결과가 항상 완벽하지 않은 경우도 많음.
  • 상황별로 AI 도구 의존도를 조절하며 사용 중임.

10. 잡담 및 사내 분위기와 팀 문화 🎉

  • 연말 분위기 속 크리스마스 준비와 솔로 이야기 다수.
  • 적극적인 소통과 친근한 분위기가 돋보이나, 적절한 언행 자제 권고도 있음.
  • 팀원 간 점심 메뉴 추천, 개인 근황 공유, 스트레스 이야기 등이 자연스럽게 오감됨.
  • 기술과 잡담을 적절히 섞어 활기찬 소통 문화 유지 중.

면접팁⚡

  • 인지복잡도에 대해 설명하고, 순환복잡도와의 차이를 명확히 구분할 수 있어야 함.
  • React 훅을 사용하는 올바른 패턴에 대해 질문받을 수 있으니 프랍으로 훅 자체를 넘기는 패턴은 권장되지 않는다는 점 숙지할 것.
  • 환경변수 관리 시 보안 고려 사항과 GitHub 시크릿 활용 경험이 있으면 좋음.
  • 최신 API 버전과 기존 서적 콘텐츠 간 차이, 학습 전략을 언급하면 현실적인 개발자임을 어필 가능.

링크🔗

#React#Flutter#인지복잡도#환경변수#AI코딩도구#UIUX#보안#개발도서#GitHubSecrets#소통