COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-18

목차

  1. 차트 라이브러리 선택과 디자인 고민
  2. 코드 에디터 라이브러리 추천 및 활용
  3. IRP 및 은퇴자금 준비 이야기
  4. React와 SPA, 프론트엔드 기술 토론
  5. 협업 시 API 설계와 백엔드-프론트엔드 소통 방법
  6. 직장 내 프론트엔드 개발자 위상과 어려움
  7. 프로젝트 관리와 스타트업 복지 현실
  8. 넥스트.js(fetch)와 배포 환경
  9. 개발자 커뮤니티와 기술 면접 관련 팁
  10. 기타 개발 관련 Q&A 및 소소한 이야기

1. 차트 라이브러리 선택과 디자인 고민 🎨📊

  • 차트 라이브러리는 Chart.js, Recharts, Ant Design Chart, D3 등 다양함.
  • 디자인 측면에서 "이쁜 차트" 선택이 쉽지 않음. 대부분 기본 디자인이 평범하거나 부족하다는 의견 많음.
  • 고용주 및 디자이너들은 보통 차트 라이브러리 스펙에 맞춰 디자인을 하기 때문에, 완전한 커스텀은 쉽지 않음.
  • Highcharts 무료버전도 괜찮은 옵션임.

차트 라이브러리 이해

  • Chart.js: 초보자도 쓰기 쉽고 가벼움. 다양한 차트 종류 지원.
  • Recharts: React 친화적, SVG 기반, 컴포넌트 구조로 확장성 좋음.
  • D3: 커스텀 고급 차트 제작에 용이하나 복잡도 높음.
  • Highcharts: 상업적 사용 제한 있긴 하지만 차트 종류 많고 기능성 높음.

2. 코드 에디터 라이브러리 추천 및 활용 📝

  • 웹상에 코드 작성 및 편집 가능하게 하는 라이브러리로 ‘react-simple-code-editor’, ‘@monaco-editor/react’ 추천.
  • Visual Studio Code (VSCode)의 Monaco Editor가 강력하며 코드 편집기 구현에 자주 사용됨.
  • 필요 시 코드샌드박스 임베드 방식으로도 편리하게 구현 가능.

3. IRP 및 은퇴자금 준비 이야기 💰

  • IRP는 ‘Individual Retirement Pension’의 약어로 개인퇴직연금계좌 의미.
  • 회사에서 퇴직금을 IRP 계좌에 넣어 관리하며, 일부는 개인이 추가 납부 가능.
  • 퇴직연금의 유형에는 DB(확정급여형), DC(확정기여형)가 있음.
    • DB: 회사가 나중에 받을 연금액 보장.
    • DC: 근로자가 직접 운용해 수익률에 따라 연금액 변동.
  • 국민연금 등 공적연금에 대한 우려도 많으며, 각자 별도의 준비가 필요하다는 의견이 나옴.

4. React와 SPA, 프론트엔드 기술 토론 ⚛️

  • React 사용 이유:
    • 선언형 UI 구성이 용이함.
    • 상태 관리와 DOM 업데이트를 효율적으로 처리해 복잡한 UI 관리에 강점.
    • 방대한 커뮤니티, 익숙함, 좋은 취업 조건.
    • SPA(Single Page Application) 구현에 최적화됨.
  • React 외 Vue, Angular 비교:
    • Vue는 규모 커질수록 로직 관리 어려움.
    • Angular는 구글 공식 지원하지만 사용자는 적음.
  • React 구조상 코어와 렌더러 분리로 다양한 플랫폼 대응 가능 (예: React DOM, React Native, React Ink).
  • 플러터(Flutter)와도 상태 관리 및 선언형 UI 개념이 비슷함.
  • 프로젝트에 따라 React를 쓸지, 단순 HTML/Vanilla JS를 쓸지 선택하는 것이 중요함.

5. 협업 시 API 설계와 백엔드-프론트엔드 소통 방법 🤝

  • API 설계는 백엔드와 프론트엔드가 함께 협업하는 것이 이상적.
  • 전자는 협업, 후자는 분업 모델로 볼 수 있음.
  • 협업 시 프론트 요구사항에 따라 API를 설계 및 수정하면서 효율성을 극대화.
  • 서버에서 페이징 인자를 ‘page’와 ‘pageSize’ 같은 관용적인 네이밍으로 주고 받아 작업함.
  • 좋은 협업은 역할 분담 명확하고 수시로 소통하며 요구사항 반영이 핵심.

6. 직장 내 프론트엔드 개발자 위상과 어려움 😓

  • 일부 회사에서 프론트엔드 개발자를 ‘화면만 찍는 사람’으로 오해하거나 무시하는 경우 존재.
  • 개발자 내부에서도 프론트엔드와 백엔드, 풀스택 직군 간 견해 차이가 있음.
  • 실제로 프론트엔드 개발은 UI/UX 고려, 상태관리, 불안정한 환경 대응 등 매우 전문적이고 어려움.
  • 개발 환경·문화가 좋은 곳에서는 프론트엔드의 중요성을 인정하고 협업 가능.
  • 무시당하는 경우 스트레스가 크니, 스스로 실력을 키우고 인정받는 환경을 찾는 것이 중요.

7. 프로젝트 관리와 스타트업 복지 현실 🚀

  • 스타트업에서 성과급 및 근무조건 좋은 사례도 있지만, 인력·자금 한계로 어려움 존재.
  • PM/PL 역할 겸하는 경우가 많음.
  • 성과 관리 시 WBS(Work Breakdown Structure)를 통한 일정 관리와 책임 소재 명확화가 중요.
  • ‘자유롭게 일하고 책임지는’ 문화는 명확한 목표와 소통이 뒷받침 되어야 효과적임.
  • 스타트업 복지는 경영 여건에 따라 천차만별, 현실적인 기대 조정 필요.

8. 넥스트.js(fetch)와 배포 환경 ☁️

  • Next.js 서버 컴포넌트(Server Components)에서는 기본적으로 내장된 fetch API를 사용함.
  • 클라이언트 컴포넌트에서는 axios 등 별도의 HTTP 클라이언트를 활용 가능.
  • Next.js 내부적으로 fetch를 래핑하여 캐싱, 최적화 지원.
  • 배포는 대부분 AWS EC2 사용자가 많으며, Vercel(Next.js 만든 회사) 사용 시 비용 문제 발생할 수 있음.
  • 개인 프로젝트나 MVP는 EC2가 비용 대비 자유도가 높고 익숙한 선택.

9. 개발자 커뮤니티와 기술 면접 관련 팁 💡

  • 강력한 커뮤니티 존재가 React 선택의 큰 이유.
  • 면접 준비 시 커뮤니티에서 흔히 나오는 질문 (ex: React를 쓰는 이유, 상태관리 방법, SPA 특징 등) 대비 필요.
  • 기술 이슈 및 트렌드에 꾸준히 관심을 두고 경험 공유하는 것이 중요.
  • 스터디를 통해 실무 적합성을 높이고 취업 준비 효율 극대화.
  • 면접에서는 “왜 React인가?”, “API 협업 방식”, “차트 라이브러리 선택 이유” 등을 명확히 설명하면 긍정적임.

10. 기타 개발 관련 Q&A 및 소소한 이야기 🗨️

  • urlEncodeURIComponent로 한글 URL 처리 권장하나 너무 길어질 때 고민됨. 실제로는 한글 URL을 그대로 쓰기보다 인코딩이 안정적임.
  • CSS 선택자 성능 이슈는 일상에서 크게 문제되지 않음. 브라우저가 대부분 최적화 처리함.
  • 마우스패드, 태블릿 등 주변기기 평소 사용 경험 및 추천 공유.
  • 긴 코드 작성 시 서버 API 우선 설계와 프론트 개발 병행 방식 다양함.
  • 개인 프로젝트 미완성 시 재취업 후 완성하는 사례 다수.
  • 직장 내 갈등, 멘탈 관리, ‘눈에 보이는 UI는 쉽다’는 착각 등 직장 생활 현실도 언급됨.
  • 취업 전 취미 활동처럼 프론트엔드 외 다양한 경험도 중요하다는 의견.

면접팁⚡

  • “React를 사용하는 이유”를 명쾌하게 설명할 준비를 하자.
    • 선언형 UI,
    • 상태 관리의 용이성,
    • 컴포넌트 재사용성,
    • 방대한 커뮤니티 및 생태계,
    • SPA 개발에 적합함을 강점으로 말할 것.
  • API 설계 협업 경험 강조하기.
  • 차트 라이브러리 장단점, 선택 기준에 대해 이해하고 설명할 수 있을 것.
  • 프론트엔드가 단순히 ‘화면 그리는 작업’이 아니라는 점을 강조하라.
  • 프로젝트 경험을 구체적으로 말하며, 복지나 팀 문화 등 현실적 고민도 공유 가능.

링크🔗

#ChartJS#React#Frontend#API협업#IRP#넥스트JS#스타트업복지#코드에디터#개발자토크#커뮤니티
이전 포스트

2023-11-17

2023년 11월 17일
다음 포스트

2023-11-19

2023년 11월 19일