Study(20)
-
[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 -
[Next] SVGR 로더를 이용해서 SVG 파일 불러오기
사건 발생 Figma에서 사용한 아이콘을 svg 파일로 다운받아 사용하려고 했다. 어떻게 하면 깔끔하게 사용할 수 있을까? Install svgr loader를 설치한다. npm install @svgr/webpack --save-dev next.config.js 설정을 변경한다. // next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; module.exports = nextConfig..
2022.12.24 -
[Git] 사라진 일주일치 커밋
갑자기 사라진 일주일치 커밋..... 원인을 찾아보자 CRA로 구현했던 커리큘럼 사이트를 Next로 바꾸는 과정에서, 이전에 clone했던 폴더를 삭제했다. contribution은 .git을 참고한다고 하는데, 브랜치 및 로컬 폴더를 모두 삭제했더니 사라진 것으로 보인다. 나의 소중한 잔디들.... 앞으로 잔디를 잃어버리지 않으려면 어떻게 해야 할까? - default 브랜치를 설정하고 기여할 수 있도록 변경해야 할 것 같다. - 리포지토리를 삭제하기 전에 좀 더 고민해봐야 할 것 같다. Reference https://league-cat.tistory.com/395
2022.12.18 -
[Github] 뭐야 내 잔디 돌려줘요 사라진 커밋을 찾아서 (Contribution Graph)
사건 발생 개요 일 중독으로 인해....수요일에 메인 프로젝트가 끝나자마자 목요일부터 다시 새 프로젝트를 시작했다. 분명 커밋을 많이 했는데도 채워지지 않고 휑한 잔디밭을 발견하고 말았다. 원인은? 1. 깃허브에 설정된 이메일과 다를 때 아래 코드를 통해 확인해보았고, 일치함을 확인하였다. git config --global user.name git config --global user.email 2. 커밋한 브랜치가 default 브랜치가 아닐 때 develop 브랜치를 default 브랜치로 두고, feat/#이슈번호 브랜치에서 작업해서 생긴 이슈였다. 작업 중인 브랜치로 변경 후 커밋하니 반영되었다. 이 리포지토리는 거의 혼자 작업하기 때문에 상관 없지만 다른 프로젝트에서는 어떻게 반영될지 확인해 ..
2022.12.14 -
[Github] 협업을 위한 템플릿 설정하기(이슈, PR)
이슈 템플릿 Settings에 들어간다. PR 템플릿 위에서 이슈 템플릿을 만들었다면 .github 폴더가 생성되었을 것이다. Add file을 통해 pull_request_template.md 파일을 만든다. 폴더 안에 원하는 양식을 작성하고, 커밋한다. 이름은 꼭 위와 같이 정해야 한다.
2022.10.25