web
-
Yarn Workspace에서 package.json 틸드(~), 캐럿(^) 버전 명시 주의할 점개발 블로깅/오늘의 TIL 2022. 1. 26. 01:15
yarn workspace를 이용해서 모노레포를 구축하던 중, 'package.json 버전 명시'로 인해 발생한 문제가 있었다. 지금까지는 크게 신경쓰지 않던 요소였는데, 평소 간과하게 생각하던 녀석으로 인해 이번에 처음으로 크게 데여본 경험으로.. 모노레포 작업을 하며 좋은 인사이트를 얻은 것 같아 블로그로 정리해 보려고 한다. 이슈 배경 현재 yarn workspace에서는 yar berry(2.0)를 쓰고 있다. yarn berry를 이용하게 되면 Zero install을 통해 의존성 패키지들을 더 가볍고 빠르게 설치 및 이용할 수 있다. (여기서는 zero install이 무엇인지 다루지 않는다.) 그러나 지금 작업 중인 모노레포에서는 yarn workspace 환경 세팅에 zero instal..
-
Next.js Lazy Hydration으로 웹 성능 향상시키기(HTML은 유지하고 Script는 걸러내자)개발 블로깅/Improving Performance 2021. 12. 2. 12:24
Next.js의 Hydrate개념을 아직 모르신다면,이전에 작성했던 Next.js의 Hydrate 글을 먼저 참고하시는 것을 추천드립니다. Next.js에서는 첫 페이지를 로드하면 Hydrate과정을 거치게 된다. 💡 Hydrate란? 화면에 보여줄 document 페이지를 서버 단에서 먼저 렌더링 후 브라우저로 전송한 뒤, 이후에 해당 DOM 요소에 필요로 한 Script 코드들을 바로 브라우저로 전송한다. 그리고 각 DOM 요소와 Script 코드가 매칭이 되면서 정상적으로 웹 페이지가 동작하게 된다. 그러나 이러한 Hydrate 방식은 아직 약간의 아쉬운 점이 존재하는데, 그것은 'PreRendering 된 DOM 요소의 모든 Script는 무조건 모두 가져온다는 것'이다. 이 말이 무슨 뜻인지 아..
-
Next.js 12 업데이트 사항 정리개발 블로깅/Next.js 2021. 10. 28. 22:13
너무나 빠른 Next.js의 업데이트.. 저번에 Next.11이 발표된 지 2,3달 정도밖에 안 된 것 같은데, 벌써 12가 발표라니.. 거두절미하고 새롭게 업데이트된 사항에 대해 빠르게 알아가 보도록 하자. 목차 프레임워크에서 사용하던 컴파일러를 Rust 컴파일러로 대체함 : 프로젝트 빌드 속도 증가, 새로고침 속도 증가. 미들웨어 : 서버 단에서 미들웨어 처리가 가능한 기능 추가. React 18 지원 : React 18 버전을 지원. AVIF 지원 : webP보다 20% 압출률이 더 좋은 AVIF 포맷 지원. 봇 인식 ISR 폴백 : Google Bot 등의 웹 크롤러에 최적화된 SEO 동작 관련 내용. 네이티브 ES 모듈 지원 : 표준화된 모듈 시스템과의 연계. URL 가져오기 : 모든 URL에서..
-
Preload의 개념, 그리고 올바른 사용법개발 블로깅/기타 개념 2021. 9. 5. 00:54
웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다. Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다. 한번 해당 기능이 어떻게 동작하는지 확인해보자. const JenkinsLogo= () => { return ( ); }; export default JenkinsLogo; 간단하게 Next.js 환경에서 jenkins.png 파일을 img 태그를 통해 화면에 띄우는 코드를 돌려보았다. 적용 전 ..
-
Next.js Hydrate를 최적화 시킬 수 있을까 (Partial Hydration)개발 블로깅/Next.js 2021. 8. 12. 21:46
요즘 SEO 향상을 위해서 웹 성능 개선을 계속해서 연구 중이다. (흔히 웹 성능 최적화시킬 수 있는 요소들은 거의 다 진행한 것 같으면서도, 신기하게도 할 것이 계속 나온다...) 요즘에는 프론트엔드 단에서 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 어떻게 더 개선시킬 수 있을지 연구 중인데, 며칠 전 Performance 탭에서 흥미로운 요소를 발견했다. 위 이미지의 하단 쪽을 보면, FP(First Paint)가 일어나기 전까지 Next.js Hytration 작업이 Long Task로 보여지는 것이다. (정확히는 Next.js-before-Hydration이니까, 실제 Hydration 하기 전의 특정 작업으로 볼 수 있다.) 우선 Hyd..
-
[2021.01.24] Next.js에서 페이지 뒤로가기 시 이전 페이지 스크롤 위치로 돌아가기개발 블로깅/오늘의 TIL 2021. 1. 24. 14:00
이번에 새로 입사하게 된 기업에서 프로젝트 코드 파악 겸 작은 기능 하나를 구현하는 첫 업무를 맡게 되었는데, 페이지에서 '뒤로 가기' 시 이전 페이지의 스크롤 위치 그대로 유지하도록 하는 기능이었다. 이전에는 무조건 페이지 이동이 생기면 스크롤 최상단으로 이동하도록 되어있었는데, 그러다 보니 상품 리스트가 나열된 페이지에서 어느 정도 하위에 배치된 상품을 클릭한 뒤 '뒤로 가기'를 하면, 스크롤 최상단부터 다시 서치를 해야 되는 문제가 발생하던 것이다. 이를 방지하고자, 이전 페이지로 되돌아가도 최근에 탐색했던 위치부터 이어서 탐색할 수 있도록 하기 위해 이 기능을 구현하게 되었다. 처음 이 기능에 대한 내가 들었던 생각은 이러했다. 1. 이전 페이지를 캐싱 시켜서, 뒤로 가기 시에 캐싱된 페이지와 스..
-
[2020.08.04] 브라우저 동작원리개발 블로깅/기타 개념 2020. 8. 4. 18:20
현재 정보화 사회에 이제는 없어서는 안 될 프로그램. 프론트엔드 개발자라면 무조건 다룰 수밖에 없는 도구이자, 끝없는 정보 바다에 접속하기 위한 필수 도구. 웹 브라우저. 우리가 평소에 접하는 이 화면은 도대체 어떻게 나타나게 되는 것일까? 우리는 평소처럼 당연하게 인터넷 주소창에 주소를 입력하고 거기에 해당되는 홈페이지 화면을 접하며 사이트를 돌아다니기만 했지, 이렇게 화면이 보여지는 과정이 어떻게 동작하는지는 생각해보지 못했을 것이다. (사실 그렇게까지 생각해 볼 필요도 없겠지만...) 프론트엔드 개발자 역시, HTML과 CSS 문서를 작성하고 Javascript 코드를 짜면서 기대하던 동작을 확인하며 웹 개발을 했을 것이고, 실제로 이 HTML문서가 어떻게 자리를 잡아서 웹 페이지에 각자 자리에 D..
-
[2019.08.04] PWA(Progressive Web App)이란?개발 블로깅/기타 개념 2019. 8. 4. 16:25
PWA(Progressive Web App)이란, 네이티브 앱과 웹의 장점을 합친 프론트엔드 개발 환경이다. # 웹의 특징(장,단점) 앱 설치과정 없이 URL 접속으로, 서비스 진입장벽이 낮다. 실시간 컨텐츠 업데이트 환경을 갖추고 있다. ----------------------------------------- 실행 구동이 앱보다 퍼포먼스가 떨어진다. 푸쉬알림과 같은 백그라운드 동작을 할 수 없다. 오프라인 구동이 불가능하다. # 앱의 특징(장,단점) 실행구동이 원활하다. 백그라운드 동작이 가능하다. 오프라인 구동이 가능하다. ------------------------------------------ 처음 앱 설치과정이 있어, 진입장벽이 크다. 컨텐츠 최신화 환경이 웹보다 떨어진다. # PWA 특징 ..