실전 압축 코딩

과거에 배포했던 npm package를 번들링 한뒤 배포해 보기로 했다. https://ljy1011.tistory.com/182 React 컴포넌트 Npm에 배포하기 (with TS)react 로 만든 컴포넌트를 npm 사이트에 배포해 보자! (typescript 적용) https://www.npmjs.com/package/react-divided-progress-bar react-divided-progress-bar A progress-bar which has divided section based on React.js. Latest version: 0.1.7, lljy1011.tistory.comhttps://ljy1011.tistory.com/203 [NPM에 배포한 React Package 개선..

React.js로 컴포넌트를 만들어 배포한적이 있었다https://ljy1011.tistory.com/182 React 컴포넌트 Npm에 배포하기 (with TS)react 로 만든 컴포넌트를 npm 사이트에 배포해 보자! (typescript 적용) https://www.npmjs.com/package/react-divided-progress-bar react-divided-progress-bar A progress-bar which has divided section based on React.js. Latest version: 0.1.7, lljy1011.tistory.com 당시 야심차게 만들었던 progress bar 컴포넌트 였다. 프로젝트 진행중 progress bar가 divide 된 ui..

몇달전 애정있게 진행한 프로젝트를 지속적으로 개선하다가, 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에서 어떻게 모델을 다룰지 감이 잡힐거 같았다. 유튜브 보면서 열심히 공부중...

오늘 한 일: 안드로이드 LocationManager 라이브러리 사용 내 위치 찾기 + Viewmodel 적용 https://angangmoddi.tistory.com/223 안드로이드 GPS로 현재 내 위치좌표 구하는법(Kotlin) 이번 글에서는 안드로이드에서 현재 내 위치좌표를 알아보는 방법을 알아보자. 먼저, 내 좌표를 구하기 위해서는 ACCESS_COARSE_LOCATION, ACCESS_FINE_LOCATION권한이필요하다. Manifest파일에 위와 같이 추가 angangmoddi.tistory.com https://velog.io/@jeep_chief_14/Android%EC%97%90%EC%84%9C-getLastKnownLocation%EC%9D%B4-null%EC%9D%84-%EB%B..

오늘 한 일 - 지금까지 작업한 것들을 전부 정리하고 포스팅했다. 현재 위치에서의 거리를 기반으로 산을 검색하는 기능도 추가할까 고민중이다. 만약에 만든다면 현재 구상하는 방안) X미터 + X미터 - 나 + X미터 - X미터 이런식으로 사각형 범위내 산들의 목록을 서버로 부터 가져온다.(Where문) 그후 안드로이드 Location 라이브러리를 사용, 현재위치와 각 마커들의 위치를 비교한다. X미터 X+a미터 -> radius초과 + X미터 - 나 + X미터 - X미터 마커와 현 위치와의 거리가 radius를 초과한다면 해당 마커를 띄우지 않는다. 이로서 radius안에 마커들만 표시할 수 있다. radius는 현 위치에서의 거리이므로 위에 기능을 간단히 구현할 수 있다.