Web
-
EC2로 Next.js 앱 배포하기Web/Build and Deploy 2021. 10. 6. 20:13
사실 글 자체는 Next.js에 크게 초점이 맞춰져 있지는 않다. EC2를 이용해서 앱을 배포하는 것이 메인 주제이지만, 굳이 'Next.js 앱' 이라고 덧붙인 이유는 Next.js는 별도의 서버 로직을 작성할 필요가 없기 때문이다. 물론 Customizing을 원한다면 직접 서버 로직을 작성해서 EC2에다 배포해도 되긴 하지만, 대부분의 경우에는 Next.js에서 기본으로 제공해주는 서버 로직을 사용해주는 것이 좋다고 한다. 서버 로직을 직접 작성하면, Next.js의 기본 서버 로직이 갖고 있는 성능 최적화의 이점이 사라지기 때문. 1. EC2 콘솔에 접속해서 인스턴스 시작 버튼 누르기 2. Amazon Machine Image(AMI) 선택하기 AMI는 인스턴스를 시작하는 데에 필요한 정보를 제공..
-
CRA를 Next.js로 마이그레이션하기Web/React 2021. 10. 6. 02:39
서버 사이드 렌더링(SSR)을 언젠가 한 번쯤 해봐야겠다고 생각하곤 있었는데, 막상 프로젝트 진행하고 미션 진행하고 하다보니 딱히 시도해 볼만한 시간이 안났다. 사실 핑계이긴 하다.. 쉴 시간 줄여서 공부하면 되긴 하니깐. 반성... 그러던 중 때 마침 미션으로 SSR 관련 미션이 나와서 Next.js를 아주 가볍게 이용하여 SSR을 살짝 맛볼 수 있게 됐다. 서버 사이드 렌더링 중에서도 Next.js, 그 중에서도 CRA에서 Next.js로 마이그레이션 하는 방식으로 아주 가볍게 도입만 해 본 셈이지만, SSR을 깊게 공부할 수 있는 발판이 될 수 있지 않을까 생각한다. 1. 설치 CRA의 불필요한 dependency들을 제거한다. npm uninstall react-scripts react-route..
-
렌더링 성능 최적화 수업 정리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보단 제한적이지만, 설정할 수 있는 옵션들이 굉장히 다양하더라.) 최근 들어 프론트엔드가 백엔드와 완전히 분리되기 시작하면서, 더 이상 배포..