실전 압축 코딩

몇달전 애정있게 진행한 프로젝트를 지속적으로 개선하다가, lighthouse를 통해 보다 객관적인 성능 향상을 시도해 보기로 했다. 실수로 버전으로 테스트를 해 스코어가 지나치게 낮게 나왔다. 버전은 60점 정도가 나왔다. 일단은 빨간불이 들어온 부분부터 점차 개선하기로 했다. 1. Serve image in next-gen formats 이미지 파일의 확장자를 변경하도록 하자 . jpg -> . webp 파일로 변환 2. animated 요소를 element로 변경하기 .git 파일을 .webm 확장자로 변경 후 video element로 재생하도록 하였다. 전) 후) autoplay loop 속성은 해당 파일이 반복적으로 재생하도록 한다. 3. 웹폰트 로드 중에 텍스트가 계속 표시 되도록 하기 htt..

cloudRun을 통해 backend는 이상 없이 배포 되었고. cloudType의 문제였던 요청 제한 시간을 변경 하였다! https://cloud.google.com/run/docs/configuring/request-timeout?hl=ko 요청 제한 시간 설정(서비스) | Cloud Run 문서 | Google Cloud 의견 보내기 요청 제한 시간 설정(서비스) 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Cloud Run 서비스의 경우 요청 제한 시간 설정은 Cloud Run에 배포된 서 cloud.google.com 간단하게 콘솔 - 새 버전 수정 및 배포에서 변경 가능하다. ... 그런데 cloudRun의 문제를 확인하였는데, 다름 아닌 이제는 클라이언트의..

클라우드런으로 backend 서버와 frontend 배포를 완료하고 web에 접속을 하였지만... 예상치 못한 오류를 확인하였다! 뜬금없이 cors 에러가 발생하였다. cors에러다 처음에는 열심히 node.js 서버쪽 설정을 건드려 보았다... https://expressjs.com/en/resources/middleware/cors.html Express cors middleware cors CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options. Follow me (@troygoode) on Twitter! Installation This..

이번 프로젝트는 배포에 있어서 특이사항이 하나 있었다. 바로 배포를 두 곳으로 나누어서 해야 했던 것이다. 처음에는 cloudType 한곳에서 에서 front와 backend를 전부 배포 하려고 했다. https://cloudtype.io/ 모두의 플랫폼팀, 클라우드타입 클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다. cloudtype.io 이번에 새롭게 알게된 플랫폼인데, 클라우드 타입의 특징은 다음과 같다. [지원하는 주요 기능] - 언어/프레임웍 별 예제 코드 제공 - 다양한 언어/프레임웍/DB/오픈소스 지원 - GitHub 과의 매끄러운 통합 - 웹에서 바로 접근 가능한 로그뷰어와 터미널 - 이전 배포로의 빠른 복원 - 다중 배포환경(..

드디어 블렌더로 3d 기초 모델과 에니메이션을 만들었다! 그리고 three.js에서 클릭시 페이지 넘기기 상호작용도 구현하였다. 텍스쳐를 입히는 작업은 이미 한 번 해봐서 문제 될게 없을거 같다. 물론 아직 모델을 좀 더 손봐야 하지만, 기초적인 틀은 만드는데 성공했다. 블렌더 모델 제작과 에니메이션 생성에 너무 많은 시간을 쏟은거 같다. 책을 제외한 웬만한 메쉬나 기타 등등은 남들이 만들걸 최대한 가져와서 사용할 생각이다. Todo 1. node.js 에서 생성한 pdf 파일 가져오기 및 각 페이지 별 이미지화 & 이미지화한 파일 페이지 별로 입히기 2. three.js 광원 효과에 대해 공부 3. 책 모델 좀 더 손보기 (뒤로 가는 모션 적용 등) 4. 현재 그래픽 ui를 좀 더 캐주얼 하고 가볍게 ..

엉겹결에 블렌더를 만지게 되었다.. 되도록이면 원래 있던 모델을 사용하려고 했는데, 에니메이션이나 텍스쳐를 적용시키는게 어려웠다.. 내가 에니메이션도 만져 보고 텍스쳐도 만져봐야 three.js에서 어떻게 모델을 다룰지 감이 잡힐거 같았다. 유튜브 보면서 열심히 공부중...