프론트엔드 공학적으로 필요한 내용 요약
1. Next.js 관련 내용
•
SSR vs CSR vs 타임리프
◦
일반적으로 타임리프(Thymeleaf)가 SSR(Server-Side Rendering) 및 CSR(Client-Side Rendering)보다 빠름
◦
Next.js를 예로 들면, 프론트엔드 서버를 따로 두고 SSR을 수행하는 방식
•
•
Three.js 번들 사이즈 최적화
◦
메인 페이지에서 Three.js를 사용해 3D 모델 렌더링 시 번들 사이즈가 커짐
◦
Dynamic Import를 활용해 청크(chunk)로 분리하면 번들 크기를 줄일 수 있음
◦
실제로 First Load JS 크기 373kB → 118kB로 감소
•
Next.js에서 대량 데이터 최적화
◦
서버에서 수천 개의 데이터 배열을 받아 화면에 렌더링해야 하는 경우 최적화 필요
◦
Next API 서버에서 페이징 처리 후 Virtual Scroll 구현
◦
문제점: 아코디언 UI 사용으로 각 데이터 높이가 다름 → 스크롤 성능 저하 발생
◦
해결 방법: React Window 또는 React Virtualized 활용
2. UI 라이브러리 및 디자인 시스템
•
Tailwind CSS 친화적인 UI 라이브러리 추천
◦
추천 가능 라이브러리 없음 (사용자의 요청)
◦
Tailwind와 호환성이 좋은 컴포넌트 라이브러리로 Shadcn/ui, Headless UI, Daisy UI 추천
•
3. Next.js에서 이벤트 핸들링 방식
•
버튼 이벤트 핸들링 방식
◦
간단한 경우 onClick 내부에 직접 작성 가능
◦
복잡한 경우 별도 함수로 분리하여 관리
<button onClick={() => swiper?.slidePrev()}>
<LeftArrowIcon />
</button>
<button onClick={() => swiper?.slideNext()}>
<RightArrowIcon />
</button>
TypeScript
복사
→ 이 경우 함수가 간단하므로 인라인 작성 가능
→ 하지만 복잡해질 경우는 별도 함수로 관리하는 것이 좋음
4. Expo 및 React Native 관련
•
Expo 네이티브 코드 지원
◦
최근 Expo가 네이티브 코드 수정을 지원
◦
신규 프로젝트 시작 시 Expo 사용이 괜찮은 선택
◦
Bluesky도 Expo 사용 → 안정화 단계에 접어듦
◦
React Native 라이브러리 지원 목록 참고: React Native Directory
5. 프론트엔드 개발을 위한 참고 자료
•
프론트엔드 기본 개념 학습 사이트
•
Git 래핑 서비스
•
Flock (개발자 협업 도구)
•
백준 전용 IDE
안녕하세요
•
관련 기술 문의와 R&D 공동 연구 사업 관련 문의는 “glory@keti.re.kr”로 연락 부탁드립니다.
Hello
•
For technical and business inquiries, please contact me at “glory@keti.re.kr”