전체 글
-
모바일에서 Webpack-dev-server에 접근하지 못하는 문제et cetera/Trouble Shooting 2021. 9. 30. 19:54
■ 상황 Webpack-dev-server에서 돌리는 로컬 서버에 모바일 기기로 접근할 수 있다고 해서, 나도 시도를 해봤는데 접속이 되지 않았다. 참고로 Windows 10을 사용하고 있는 상황. ■ 상세 현재 사용중인 Wi-fi의 속성 탭으로 들어가서 네트워크 프로필을 개인으로 설정해주면 된다. 내 경우에는 네트워크 프로필이 공용으로 설정되어 있었기 때문에(왜 그랬지?) 안되고 있었던 것. ■ 비고 모바일 반응형 UI를 구현할 때 맨날 개발자 도구에서 확인하기만 했는데, 실제로 모바일로 접속해야 알 수 있는 문제들이 제법 있더라. 그래서 모바일에서 프로젝트를 구동해야 할 필요성을 느꼈고, 마침 모바일에서 webpack-dev-server에 접근할 수 있다는 얘기를 듣고 시도해보았다. webpack.c..
-
Webpack cli가 종료되지 않는 문제et cetera/Trouble Shooting 2021. 9. 24. 18:41
■ 상황 Webpack에다가 플러그인을 몇 개 추가해주고 나서 빌드를 수행했는데, ('npm run build' 같은 스크립트를 통해 빌드를 수행했다) 빌드가 완료된 이후에도 터미널이 원래대로 되돌아오지 않았다. 즉, 빌드가 완료되었다는 메시지가 떴는데도 Webpack의 수행이 종료되지 않았다. ■ 상세 원인은 바로 WebpackBundleAnalyzer였다. WebpackBundleAnalyzer를 서버 모드로 수행하고 있어서, 빌드가 완료된 이후에도 Bundle 결과를 보여주기 위해 계속해서 서버를 돌리고 있었던 것. 결과적으로, WebpackBundleAnalyzer를 development 모드일 때만 실행하게 함으로써 문제가 해결되었다. 다른 해결 방법으로는 서버 모드 말고 html 파일을 생성하..
-
렌더링 성능 최적화 수업 정리Web/Optimization 2021. 9. 24. 18:12
※ Jank(화면 버벅거림) 일반적인 스크린의 주사율은 60FPS(Frame Per Second)이다. 60FPS = 1초에 60프레임 = 1프레임 당 16.67ms 컨텐츠가 업데이트되는 주기도 물리적인 스크린이 업데이트되는 주기와 맞춰져야 끊겨보이지 않는 화면 업데이트가 가능해진다. 이를 위해 requestAnimationFrame을 사용하는 것. 만약 브라우저의 Main Thread에 일이 넘쳐나게되면 1초에 60프레임을 맞추지 못하고 화면이 버벅거리게 된다. 그러면, Main Thread가 일을 너무 많이 하지 않게 도와주는 방법은 어떤 게 있을까? 1. reflow, repaint가 생각보다 너무 많이 일어나는 것을 개선한다. 2. 똑같은 작업을 매번 새로하지 않도록 개선한다. 3. 일을 여러명이..
-
이미지 프리로딩(Image Preloading)Web/Optimization 2021. 9. 23. 19:38
갤러리와 같은 형태의 페이지, 즉 이미지가 많이 필요한 페이지의 경우에는 종종 이미지 최적화가 곧 해당 페이지의 성능 최적화 그 자체인 경우가 많다. 이번에 프로젝트로 진행한 Babble 웹페이지도 마찬가지. 이런 경우에 이미지 로딩을 최적화하기 위해 자주 사용되는 방법 중에 하나가 바로 Image Preloading이다. Image Preloading은 유저가 이미지를 요청하기 전에 미리 이미지를 다운받아 캐시에 저장하고, 필요할 때 캐시에서 바로바로 꺼내쓰는 것을 의미한다. 브라우저가 해당 페이지에서 요청한 이미지, CSS, JS 등을 캐싱하여 사용한다는 특징을 이용한 테크닉이다. 초기 페이지에 보여질 이미지 로딩과 관련된 테크닉은 아닌 것 같고, 유저가 특정 버튼을 클릭하거나 다른 페이지로 갈 때 ..
-
로딩 성능 최적화 수업 정리Web/Optimization 2021. 9. 22. 19:38
#1. 요청 크기 줄이기 어떤 타입의 요청이 크기가 큰지를 파악하고, 해당 요청의 크기를 줄인다. 1. 텍스트 컨텐츠 (소스 코드) ■ Minify & Uglify - 번들러에서 빌드 옵션으로 제공 - Webpack 5부터 production mode에서는 기본으로 최적화 - CSS 파일은 별도로 minify - CSS in JS는 Babel transpile 과정에서 minify ■ GZIP 압축 - 모던 브라우저에는 모두 내장되어있는 압축 프로그램 - AWS, 스프링 등 서버에서 설정할 수 있음 - Brotli는 더 효율적으로 압축, 그러나 아직까진 지원이 미비 2. 이미지 평균적으로 웹페이지 용량에서 이미지가 파지하는 비율은 60% 이상. 이미지 용량만 잘 관리해도 어느 정도의 성능은 잡고갈 수 있..
-
React에서 setInterval 사용하기Web/React 2021. 9. 5. 01:18
최근에 리액트 프로젝트를 진행하면서 setInterval을 사용할 일이 많아졌다. 채팅방 목록을 새로고침할 때 setInterval을 사용해서 주기적으로 HTTP 요청을 보낸다던가(polling), 채팅이 도착했을 때 setInterval을 사용해서 브라우저 탭 제목을 바꾼다던가 하는 식이다. (페이스북 DM이 도착했을 때 브라우저 탭 제목이 '(4) facebook' 이런 식으로 바뀌는 것 처럼) 채팅방 목록을 보여주는 페이지에 처음 접속했을 때, 즉 페이지가 mount될 때 채팅방 목록을 일정 주기마다 불러오는 polling을 하기 위해서 empty dependency를 가진 useEffect 내부에 setInterval을 호출해줬는데, 생각지 못한 문제가 발생했다. const example() =>..
-
프론트엔드 배포 일지Web/Build and Deploy 2021. 8. 24. 19:01
언젠가는 배포에 관해 공부를 해야겠다고 생각을 했다. 하지만 자바스크립트 공부만 하기에도 너무 바빴기 때문에 미루고 미뤘었다. 만약 우테코가 아니었더라면 취업하기 전에 배포를 직접 만져볼 일이 있었을까 싶기도 하고. 맨 땅에 했더라면 굉장히 막막했을텐데, 같은 팀의 백엔드 크루인 '현구막'이 도와줘서 수월하게 마칠 수 있었다. 이전 포스팅에서도 말했듯이, 디스코드로 화면공유하면서 거의 아바타 소개팅처럼 배포를 진행했던 기억. 기존에는 배포할 일이 있어도 조그마한 토이프로젝트 정도였기 때문에 그냥 Netlify에다가 올려놓기만 했었다. 그래서 이번에도 처음에는 빠른 배포를 위해 Netlify를 사용했는데, 프로젝트의 사이즈가 점점 커지기도 하고 캐싱, 최적화 세팅 등등 설정할 세부사항들이 많아져서 마냥 N..
-
프론트 배포를 위한 잡다한 사전 지식Web/Build and Deploy 2021. 8. 23. 16:57
얼마 전까지만 해도 프론트 배포라고 하면 Netlify밖에 떠오르지 않았다. (놀랍게도 실화) 하지만 프로젝트를 진행하면서 S3 + Cloudfront로 배포를 진행해야하는 상황이 발생했다. 백엔드 크루의 도움을 받아 배포를 진행하면서도 웹 관련 기본 지식이 부족했기 때문에 무슨 아바타 소개팅마냥 하라는 대로 하면서 필기만 하는 수밖에 없었다. 사실 Netlify를 통한 배포는 별도의 공부를 하지 않고도 정말 편하게 배포할 수 있다는 장점이 있지만 그 말은 곧, 인프라와 관련해서 배울 수 있는게 전혀 없다는 말이기도 했다. (근데 나중에 알고보니 Netlify도 S3보단 제한적이지만, 설정할 수 있는 옵션들이 굉장히 다양하더라.) 최근 들어 프론트엔드가 백엔드와 완전히 분리되기 시작하면서, 더 이상 배포..