- #Next.js
- #렌더링
- #프로젝트
HIPPO'S DAILY LOG
최신 글 보기프로젝트 이야기
실무와 사이드 프로젝트에서 진행한 내용입니다.
- #Velite
- #MDX
- #Next.js
모든 포스트
최신 순으로 모든 글을 볼 수 있습니다.
개발 환경 ·
[Monorepo] Turborepo, mf-app 환경구성
Monorepop 프로젝트를 구성하기 위해 Turborepo 의존성 설치 및 환경 구성을 진행한다. corepack 설치 이제 Root 에 pnpm-workspace.yaml 을 생성합니다. 저의 경우 apps 폴더 하위에 ui-kit 을 사용하는 프로젝트들을 만들예정이기 때문에 아래와 같이 작성합니다.
Load Test ·
[Stress Test] Artillery / Playwright / AWS 와 함께하는 Stress Test (2)
이전에 진행했던 부하 테스트가 어느정도 마무리 되었다. 이제 그동안 했던 이슈사항과 결과정리를 해본다. 처음에는 CPU Rosource 의 부족으로 서버 3대로 진행하였다. 그러나, Artillery 와 Playwright 자체가 Chronium 브라우저가 올라가기 때문에 엄청나게 많은 CPU 를 소모 하게 되는것이 문제였다.
CI/CD ·
[Nginx] Reverse Proxy / Caching / 버전정보 숨기기
현재 업무를 진행하면서 Nginx 에 대한 설정으로 여러가지 성능과 이슈를 처리하고 있다. 이부분들을 기억하기 위해 간단하게 Task 에 대한 처리 과정을 남긴다. 리버스 프록시란 클라이언트와 웹 서버 간의 중개자 역할을 하는 서버로, 클라이언트로부터의 요청을 대신 받아 웹 서버에 저달하고, 웹 서버의 응답을 클라이언트에게 전달하는…
Load Test ·
[Stress Test] Artillery + Playwright 와 함께하는 Stress Test
최근에 프로젝트의 오픈이 다가오면서 부하테스트를 해야되는 시점이 오게 되었는데, 팀장님께서 혹시 오픈소스로 할 수 있는 방법이 없는지에 대한 문의를 주셨고, 가능한지에 대한 검토를 진행하였습니다. 찾아본결과 의외로 한번 시도해볼법한 Artillery 라는 오픈소스를 찾았고, 진행해 보기로 하였습니다..
React ·
[React Native] Android / IOS 시뮬레이터 개발 환경 구축
웹으로 UI 를 개발하고 기능을 개발해서 괜찮은 블로그를 만들었다고 생각하였지만, 점점 완성되갈수록 이제는 내가 원하는 앱을 개발해보고 싶은 생각이 들었다. 프론트 개발자의 영역을 Javascript 개발자로 한정짓는 시대는 지나버렸고, 이제는 프론트 영역의 대부분의 프로세스, 생태계를 알고 이 부분에서 본인의 강점을 조금 더…
개발 환경 ·
[ESLINT] 초기 프로젝트 셋팅에 필요한 개발환경 구성
최근에 프로젝트를 진행하기 위한 Starter Boiler Plate를 미리 구성해놔야겠다는 생각이들어서 초기 셋팅을 잡아보고 있는데요. 당연히 아는줄 알았던 부분도, 부족한 부분 그리고 잘못알았던 부분들도 있었고 생각보다 도움이 많이 된 것 같습니다.
Rendering ·
[Optimization] Lighthouse 분석을 통한 사이트 성능 최적화
이전 포스트에서 이미지를 최적화 하는 방안에 대한 내용을 학습하였습니다. 이번엔 Chrome 에서 제공하는 Lighthouse 의 분석을 토대로 차근차근 최적화를 진행해보도록 하겠습니다. Lighthouse 는 Google Chrome 에서 재공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다.
Rendering ·
[Optimization] NextJS 를 활용한 이미지 최적화
우리가 웹 사이트를 운영하면서 가장 중요한건 사용자가 체감하는 유저경험일 것입니다. 속도 그리고 번들사이즈 등 다양한 요소들이 최적화가 필요한 부분이고 이에 대해 필자가 운영하고 있는 사이트에 대해 최적화를 진행해 보았습니다.