목차
- AG Grid 라이센스 및 도입 이슈
- 기술 부채(Technical Debt)와 개발 속도
- React 19 업그레이드 경험 공유
- antd Table의 반응형 행(row) 수 조절 방법
- Intersection Observer와 코드스플리팅 관계 이해
- Next.js에서 파라미터 전달 및 POST 방식 처리
- SRE(Site Reliability Engineering) 개념과 역할
- 쉬는 시간의 중요성과 개발 생산성
- 개발자 일상 소소한 대화
- 기타 공유 링크 소개
1. AG Grid 라이센스 및 도입 이슈
- AG Grid 유료버전 도입 시, 개발자마다 별도의 라이센스 구매가 필요한지 문의가 많음.
- 실제로는 회사 정책 및 사용 범위에 따라 라이센스 구매 수량 결정됨(사용 건수, 개발 인원수 등).
- 도입 전 충분한 검토와 사내 개발자 의견 수렴이 중요함.
- AG Grid는 기능이 많아 유료버전 사용 시 프리미엄 기능 사용 가능.
- 참고로 공식 유튜브 영상 링크 공유됨 (https://www.youtube.com/watch?v=8EMrjq188nQ).
AG Grid는 자바스크립트 그리드 라이브러리로, 테이블 UI를 아주 강력하게 구성할 수 있음. 유료버전은 데이터 필터링, 그룹핑, 피벗 등 고급 기능 제공.
2. 기술 부채(Technical Debt)와 개발 속도
- 기술 부채란 빠른 개발을 위해 코드나 시스템 완성도를 희생한 상태를 말함.
- 완성도를 높이기 위해 시간을 더 쓰면 속도가 느려지지만, 부채가 쌓이면 장기적으로 유지보수가 어려워짐.
- 상황에 따라 기술 부채를 의도적으로 만들기도 함. (빠른 프로토타이핑, 마감 임박 등)
- “기술 부채는 내년부터 해소하러 달린다… 그러나 자주 미뤄진다”라는 농담도 나옴.
- 기술 부채는 잘 관리하며 점진적으로 해소하는 것이 권장됨.
기술 부채 예시: 임시방편 코드 작성, 리팩토링 미실시, 문서화 부족 등이 있음. 관리하지 않으면 팀 생산성 저하, 버그 증가 우려.
3. React 19 업그레이드 경험 공유
- React 19 사용 경험 공유가 있었음.
- 회사에서 프로덕션 환경에 사용 중인 사례도 나옴.
- 새 버전이 스테이블하고 성능 최적화 등에 긍정적 평가.
- 다만 초기 적응과 테스트는 필요함.
- 업무 특성에 따라 업그레이드 시기 신중 고려 필요.
4. antd Table의 반응형 행(row) 수 조절 방법
- antd Table에서 화면 크기에 따라 행 수를 늘렸다 줄였다 하는 방법 문의.
- 해결책으로 ResizeObserver API 활용이나 Virtual Scroll 옵션 사용 추천.
- Virtual List는 긴 리스트에서 화면에 보여지는 일부 데이터만 렌더링해 성능을 최적화하는 기법임.
- 반응형 UI를 구성할 때 실제 표시 영역에 맞게 동적으로 행 수를 조절하는 것이 가능함.
ResizeObserver: 특정 DOM 요소 크기 변화를 감지하는 Web API로, 반응형 UI 구현에 매우 유용함.
5. Intersection Observer와 코드스플리팅 관계 이해
- Intersection Observer는 뷰포트 안에 요소가 들어왔을 때를 감지하는 API임.
- 주로 이미지나 동영상의 'Lazy Loading'에 사용됨.
- 코드스플리팅은 JS를 여러 청크로 나눠 필요한 시점에 로딩하는 기법임.
- 인터섹션 옵저버를 이용해 요소가 뷰포트에 들어올 때 컴포넌트를 lazy 로드하는 것도 가능하나 실제로는 많이 사용하지 않음.
- 무분별한 lazy import는 오히려 성능 저하를 유발할 수 있음.
- 따라서 퍼포먼스 최적화를 위한 무한 스크롤이나 지연 로딩 목적에 더 적합.
6. Next.js에서 파라미터 전달 및 POST 방식 처리
- Next.js에서 URL 파라미터를 POST 방식으로 숨겨서 전달하는 기능 없음.
- GET 방식은 URL에 파라미터 노출됨.
- POST로 데이터 전달 시 API Route 또는 커스텀 서버 핸들러 필요.
- 페이지 이동 시 파라미터를 넘기려면 쿼리 스트링 또는 쿠키/세션 활용.
- getServerSideProps에서는 context API나 Redux 사용 불가.
- 쿠키나 세션 관리를 통해 로그인 상태나 게시판 데이터 관리 가능.
- 새로고침 후 상태 유지 고려는 별도 설계 필요.
Next.js는 SSR(서버 사이드 렌더링)을 지원하는 프레임워크로, 페이지로 데이터 넘길 때 기본적으로 GET 방식이 사용됨.
7. SRE(Site Reliability Engineering) 개념과 역할
- SRE는 Google에서 처음 도입한 조직/직무 개념임.
- 소프트웨어 엔지니어링과 IT 운영 기술을 결합해 시스템 신뢰성, 확장성, 효율성을 보장함.
- 전통적인 운영 업무를 자동화하고 개선하는 데 초점.
- 데브옵스와 유사하지만 좀 더 소프트웨어 중심적임.
- 작은 회사에선 명확히 구분하지 않고 혼용하는 경우도 있음.
8. 쉬는 시간의 중요성과 개발 생산성
- 개발 중 뇌 과부하, 스트레스가 심할 때 쉬는 게 중요함.
- 쉬면서 뇌가 아이디어를 내놓고 문제를 해결하는 데 도움됨.
- "오기 생길 때 쉬어야 한다"는 경험적 조언 공유.
- 규칙적인 휴식은 장기적 생산성 향상에 기여함.
9. 개발자 일상 소소한 대화
- 점심, 커피 한잔 하자는 친근한 제안과 대화 다수.
- 출퇴근, 재택근무, 전철 파업 등 일상 근황 공유.
- 과거와 미래 농담, 개발 용어 대화, 업무 환경 토크 등 편안한 분위기.
- 시험, 공부, 회사 생활 등 서로의 상황에 공감하는 모습.
10. 기타 공유 링크
- AG Grid 소개 영상: https://www.youtube.com/watch?v=8EMrjq188nQ
- RN Suspense 관련 블로그: https://ykss.netlify.app/translation/new_architecture_is_here
- Javascript Scheduler API 관련: https://velog.io/@sehyunny/javascript-scheduler-api
- 흑소울(게임) 영상: https://youtu.be/rBYR3za-2y8?si=x4VayGApIT81Wnny
- React Lazy 로딩 공식 문서: https://react.dev/reference/react/lazy#reference
- Lazy Load에 Intersection Observer 적용 사례: https://fe-developers.kakaoent.com/2021/211202-gpu-intersection-observer/#lazy-load%EB%8A%94-intersectionobserver%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90
- Next.js POST 처리 관련 유튜브: https://youtu.be/IaMaSGQgJ0g?si=U4E3vOJRk4w0mkrM
면접팁⚡
- 기술 부채에 대한 이해: 왜 필요할 때 만드는지, 어떠한 위험과 관리법이 있는지 설명할 수 있어야 함.
- Intersection Observer API 활용법: Lazy Loading, 무한 스크롤 등 프론트엔드 성능 최적화 방법 구체 사례 언급 가능.
- Next.js 데이터 전달 방식: SSR 환경에서 GET/POST 차이, API routes 활용법, 쿠키/세션 기본 관리 전략 이해 필수.
- SRE 역할과 중요성: DevOps와의 차이, 조직 내 시스템 신뢰성 강화 역할 인지 필요.
- React 최신 버전 특징과 마이그레이션 시 고려사항: 새 기능 및 안정성, 성능 개선점 짚기.
#React#AGGrid#기술부채#IntersectionObserver#Nextjs#SRE#코드스플리팅#프론트엔드#개발팁#안td