Study/Next(2)
-
[Next] PDF 뷰어 구현하기 ( API 라우팅 vs embed 태그 )
개요 아늑 프로젝트에서 대학원 입시요강을 PDF 뷰어로 웹상에서 볼 수 있도록 구현해야 했다. 처음에는 Next.js에서 API 동적 라우팅을 통해 해당하는 PDF를 불러오도록 했다. 여기서 발생한 문제는 일반대학원, 교육대학원으로 2개의 pdf를 불러와야 하는 경우가 있다는 점이었다. 실제 배포해서 사용할 수 있는 서비스를 구현하고 있다 보니 로딩 속도가 가장 주된 관심사였다. 그래서 머릿 속에서만 고민하지 말고 실제로 비교해보고자 했다! 결과적으로는 embed 태그로 바로 불러왔다. lighthouse로 성능 비교 비교 조건 동일한 pdf 파일을 불러오도록 함. 하나의 파일만 불러오도록 함. embed 태그를 사용해서 pdf 파일을 불러왔을 때 API 라우팅을 통해 pdf 파일을 불러왔을 때 전체적인..
2023.01.31 -
[Next] NextJs에서 구글 폰트 아이콘 사용하기
개요 지금 진행하고 있는 프로젝트에서 디자인을 맡은 후배들이 Figma에 작성해주면 구현하는 역할을 하고 있다! 디자인팀이 아이콘에 피그마 댓글로 다음처럼 달아줘서 물어봤더니 구글폰트 아이콘이라고 해서 사용법을 알아보게 되었다! 구글 폰트 아이콘은 여기서! https://fonts.google.com/icons?preview.size=37&icon.platform=web&icon.style=Rounded Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants..
2022.12.29