m2ndy 개발 블로그

성능 개선 중 S3와 CDN에 배포를 진행하며 캐시를 설정했다. CDN과 S3의 데이터에 새롭게 변할 데이터가 거의 없을 것이라 판단하여 모두 캐싱 기간을 1년으로 설정해 두었다. 여기서 궁금한 점이 생겼는데, S3에도 캐시 기간 설정을 할 수 있고 CDN에서도 캐시 설정을 할 수 있다. 그렇다면 각 캐싱이 어디에 적용되는지 헷갈렸다😵‍💫 정리하자면, 1. S3의 max-age : 브라우저가 캐시를 저장하는 시간이때, CDN의 최소 TTL < max-age < 최대 TTL인 경우 : CDN의 캐싱 시간은 max-agemax-age < 최소 TTL인 경우 : CDN의 캐싱 시간은 최소 TTL최대 TTL < max-age인 경우 : CDN의 캐싱 시간은 최대 TTL2. S3의 s-maxage : CDN이 캐..

개선 전후 성능 측정 결과   요청 크기 줄이기 1. 소스 코드 줄이기  Home 페이지에서 불러오는 스크립트 번들 크기가 951KB였다. 웹 페이지의 권장 번들 사이즈는 250KB 미만으로, 번들 사이즈의 용량 개선이 필요했다.  1-1. minify & uglify // webpack.config.js optimization: { minimize: true, }  Webpack v5부터는 production mode로 배포 시 기본적으로 압축과 난독화가 진행된다. TerserWebpackPlugin이 내장되어 있기 때문에, 자동으로 최적화가 이루어진다. minify & uglify 이전minify & uglify 이후압축률951KB216KB약 77%   그렇다면 development로 배포하..

4차 스프린트에서는 프로젝트의 목표였던 "개발 환경 개선"에 집중할 수 있었습니다. 저희 팀의 프론트엔드 인원이 다른 팀에 비해 한 명이 적다 보니 개발 환경의 효율화와 생산성 향상이 꼭 필요했습니다. 그래서 프로젝트를 하면서 제가 어떤 부분에 기여할 수 있을지 고민하다, 개발 환경을 개선시켜 생산성을 높여보자는 목표를 정했습니다.  1. 자동 배포 (CD) 개발 환경을 개선하기 위한 방법 중 첫 번째로는 자동 배포(CD)에 도전했습니다. 프론트엔드의 CI는 이미 구축되어 있었지만, CD는 구축되지 않은 상태였습니다. 그래서 배포 환경에서 테스트를 하려면 pem 키를 가진 크루에게 부탁해서, 우분투에 접속한 후 수동으로 배포를 해야 했습니다. 환경 변수가 추가되거나 변경 사항이 생길 때에도 우분투 CLI..

드디어 레벨 3가 끝났다!정말 우여곡절이 많았던 레벨 3.. 프로젝트도 협업도 너무 힘들었다😭 그래도 4차 스프린트는 3차 스프린트 때보다 마음이 한결 편안해진 상태로 진행할 수 있었다.잘 하자는 욕심을 버리고, 학습할 수 있는 환경을 만들기로 했다. 우테코에 들어온 것은 잘하기 위한 것이 아니라 '배우기 위해서'였으니까! (물론 현업에 가면 많이 배우면서도 잘해야겠지..!)  샌드박스 만들기학습할 수 있는 환경을 만들기 위해서 가장 먼저 '서비스의 핵심'을 위주로 기능 명세를 작성했다. 우리 서비스의 기능은 크게 다섯 가지로 나눠지는데, 미션, 풀이, 댓글, 대시보드, 디스커션 이렇게 나눠져 있다. 그중, 핵심이 되는 서비스 플로우를 경험하기 위해서는 미션, 풀이, 댓글, 대시보드까지 필요하다고 생각..

Devel-Up 프로젝트에서 프론트 팀원들과 힘을 합쳐 프론트엔드 S3 배포를 하기로 했다.개인적으로 공부한 뒤, 이번주 내로 배포하여 이미 구축된 CI/CD까지 연결하는 것이 목표! 잠시 프로젝트 소개를 하자면.. 개발자 취준생 상호 성장을 위한 플랫폼을 개발하고 있다.취준생들이 느끼는 불안감을 문제 상황으로 인식했고, 이 불안감을 해소할 수 있는 방법이 무엇이 있을까 고민하다 첫 번째 방법으로 코드 리뷰 서비스를 제공하기로 했다.2주 스프린트 단위로 나누어 아주 작은 기능부터 만들면서 8주 간 규모를 키워가려고 한다!  왜 S3를 사용하여 배포하지?프론트에서 Amazon S3를 통해 배포한 이유는, React 같이 SPA 프로젝트의 경우 서버가 필요 없고, 정적 웹 사이트 호스팅이 가능하여 간단하게 ..