분류 전체보기59 [GCP] gcloud failed to load (gcloud.interactive): Problem loading gcloud.interactive: cannot import name 'Mapping' from 'collections' GCP의 명령어들이 작동하지 않고 아래와 같은 에러를 나타낸다. gcloud failed to load (gcloud.interactive): Problem loading gcloud.interactive: cannot import name 'Mapping' from 'collections' (/Library/Frameworks/Python.framework/Versions/3.10/lib/python3.10/collections/__init__.py). This usually indicates corruption in your gcloud installation or problems with your Python interpreter. 에러 메시지의 내용을 참조하여 python interpreter가 .. 2021. 12. 24. [GCP] cloud build retrying in n seconds Docker image를 cloud build하는 도중 아래와 같은 재시도 무한루프가 재현 "cloud build retrying in seconds" Cloud Storage는 실패한 요청에 대해 재시도 전략을 사용한다. 해결 1. build parameter가 올바른지 확인 -> 재시도 로그 및 에러 메시지에 오류가 있을 것이다. 내 경우에는 PROJECT_ID을 파라미터로 넘겨야 하는데, PROJECT_NAME을 파라미터로 넘겼다. 참고 https://cloud.google.com/storage/docs/retry-strategy 2021. 12. 24. CI/CD 개념과 프로세스 CI/CD는 빌드 테스팅 및 배포의 자동화를 뜻하며, 프로젝트 생산성을 향상하기 위해 고안되었습니다. CI/CD 는 Continuous Integration / Continuous 'Deploy' or 'Delivery' 의 약자로 지속적인 통합을 이루고, 지속적인 배포 혹은 배달을 통해 생산성의 향상을 도모하기 위한 자동화 개념입니다. 간단하게 여러 개발자가 협업을 할 때 내가 작성한 코드가 다른 개발자의 모듈과 충돌이 나지 않는지, 혹은 실행 환경 호환성에 있어서 문제가 없는지 등을 CI 서버 에서 테스팅합니다. 이 과정에서 개발자들은 각 모듈을 짧은 주기로 서버에 커밋하여 테스팅 해야 하고, CI 서버는 Script, unit test, Integration test 등을 거쳐 개발자가 커밋한 코드.. 2021. 11. 15. [Error log] Typeorm Entity metadata for <Entity>#<Field> was not found 모듈간 종속성 관계를 확인해주세요 환경: Nestjs, Typeorm (mysql) Nestjs는 Module단위로 의존성 관리를 하며, annotation으로 얻은 metadata를 통해 nestjs는 app structure를 정규화한다. 그러하여 Typeorm의 model class(entity)에서 외부의 dependency class가 필요한 경우 'Module'을 통하여 해당 model class에 제공해야 한다. (ex - OneToMany, ManyToOne) 이러한 전제를 생각하여 의존성 주입이 제대로 되었는지 확인한다. Result -> Module의 의존성 관리를 확인한다. (TypeOrmModule.forFeature) 2021. 11. 13. [Error log] npm install global package permission error npm package를 global scope로 설치하게 될 때 permission에러가 날 수 있다. -> 패키지를 설치할 때 permission 관련 문제가 발생했음으로 npm global package directory의 권한을 확인하여 권한을 업데이트 하거나 소유자를 바꾼다. Get npm global package directory path `npm config get prefix` Update owner (with child directory) `sudo chown -R $(whoami) $(npm config get prefix) /{lib/node_modules, bin, share}` 2021. 11. 13. 브라우저 동영상 자동재생에 대해서 feat. MEI 브라우저별 정책이 다르겠지만 우선 Chrome 브라우저에서는 동영상 자동재생을 허용하지 않는다. 자세히는 사용자가 이 페이지와 인터렉션 하지 않았을 경우에 자동재생을 허용하지 않는다. 이러한 정책은 UX와 굉장히 밀접하다. 이런저런 웹사이트 방문중 갑자기 소리와 함깨한 미디어가 재생되면 웹서핑을 하는데에 있어 그만큼 기분이 나쁜 경험이 없을 것이다. 그리고 이미 이 정책이 세워지기 전까지의 많은 사용자들이 부정적인 경험을 함으로 인해 아래와 같은 짤들도 있다. 만약 이런 정책이 없다면 무분별하게 재생되는 미디어와 함깨 장기적으로는 웹 서핑을 하는 행동을 멀리할 것이라고 생각한다. (이러한 면에서 정책을 세우게 됐을지 아니면 그저 선의의 정책인지도 궁금하긴 하다.) 하지만 프로덕트 입장에서는 미디어의 자동.. 2021. 11. 1. [JS] event.stopPropagation을 웬만해서 사용하지 않아야 하는 이유 웹 사이트를 체험하는 유저의 동향을 파악하거나 기타 데이터를 쌓기 위해 웹 서비스의 애널리틱스는 거의 반필수적으로 사용한다. 이러한 웹 애널리틱스 툴에선 event bubbling을 통해 event를 탐지하고 데이터를 수집하는 경우가 있는데, stopPropagation을 사용할 경우 event bubbling이 일어나지 않아 해당 툴이 클릭을 캡쳐하지 못할 수 있다. 그러하여 stopPropagation은 완전히 통제된 상황이 아닌이상 사용하지 않아야 한다. stopPropagation을 대체할 수 있는 방법은 내 경우에는 다음과 같이 구현한다. const box1Ref = document.getElementById('box-1') const box2Ref = document.getElementById.. 2021. 10. 8. React 의미론적 컴포넌트화, 최적화에 대해서 위와 같은 구조에서는 컴포넌트를 분리하기가 애매하다. Search 컴포넌트는 `word`, `showCancel` state를 가지고 있다. 검색어를 keyInput 마다 갱신한다. 초기화 버튼을 눌러 검색어를 초기화한다. List 컴포넌트는 Search 컴포넌트의 `onSearch` props를 통하여 필터링 된 리스트와 필터링에 쓰여진 word를 state에 저장한다. 그러하여 검색의 기능은 Search 컴포넌트에서, 필터링은 List 컴포넌트에서 이뤄진다. 이렇게 구성한 이유는 Search input이 변함에 따른 랜더링 최적화 및 의미론적인 이유가 있다. 하지만 여기서 필터링 된 리스트의 결과를 보여줄 때 “에 대한 검색결과 입니다.” 와 같은 간단한 search result description.. 2021. 10. 8. flutter doctor --android-licenses 오류 해결 Android studio의 SDK Tools에서 Android SDK Command-line Tools 혹은 Android SDK Tools 의 install 여부를 확인하세요 flutter 초기 세팅 과정의 약관 동의를 하기위해 실행하는 아래의 명령어가 오류나는 경우가 있다. Android studio의 SDK Tools 옵션으로 접근해 필요한 패키지를 설치하여 해결할 수 있다. 2021. 9. 26. Android studio AVD를 AMD 프로세서, Windows home에서 사용 Windows 하이퍼바이저 플랫폼을 활성화하고, BIOS에서 SVM mode를 활성화 하세요 환경 - AMD Processor - Windows 10 home edition 위의 환경에서 Android studio의 AVD를 사용하기 위해서는 - Windows 하이퍼바이저 플랫폼 기능을 활성화하고 - BIOS에서 SVM mode를 활성화해야 합니다. 참조 https://www.reddit.com/r/androiddev/comments/b03v5c/android_studio_on_amd_windows_10_home/ 2021. 9. 26. CRA 프로젝트 absolute import path 설정 | .env tsconfig jsconfig 절대경로. absolute import path를 설정하기 위해 아래와 같은 작업이 필요하다. jsconfig.json or tsconfig.json { "compilerOptions": { // ... "baseUrl": "src", // Add this // ... }, "include": [ "src" // Add this ] } 2021. 9. 4. Infinity scroll, Lazy loading 🥱 | Intersection observer Infinity scroll과 Lazy loading은 요소를 동적으로 로딩하여 DOM 랜더링 및 network 통신을 최적화할 수 있어 웹 사이트를 최적화하는데에 중요한 기능입니다. 아직은 실험요소지만 많은 브라우저에서 지원하는 Intersection observer를 사용한 기능 구현을 설명합니다. 리스트 UI에서 아래로 스크롤하여 요소가 동적으로 추가됨과, 랜더링 된 요소들이 보일 때 이미지를 로딩하는 UI를 구성했습니다. IntersectionObserver의 인스턴스는 아래와 같이 생성합니다. const observer = new IntersectionObserver(callBack, options) 해당 생성자에는 call back 함수와 어떻게 동작할 것인지 지정할 options 객체를 넘길.. 2021. 8. 17. 이전 1 2 3 4 5 다음
