본문 바로가기

분류 전체보기57

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.
[JS] Optional chaining, Nullish coalescing operator 🛒 Optional chaining, Nullish coalescing operator를 사용하여 코드를 단순하고 명확하게 구성할 수 있습니다. 코드를 구성함에 있어 많은 변수를 참조하게 됩니다. 변수를 참조함에 있어 사용되어지는사용되는 구조 분해 할당 등의 표현식 정도는 대중적으로 편리하게 사용되는 표현식이라고 할 수 있습니다. 하지만 구조 분해 할당을 사용하여 변수를 참조하다 보면.. 구조 분해 대상이 Null, undefined 등의 객체가 아닌 데이터일 경우 아래와 같이 코드를 작성하게 됩니다. // Case. 1 const { name } = people ? people : {} // Case 2 let name = null if (people) { name = people.name } // ..... 2021. 8. 4.
[JS] Live collection, Static collection 📑 Live collection은 DOM의 실시간 변경사항에 따라 언제든지 바뀔 수 있고, Static collection은 DOM의 실시간 변경사항에 따라 바뀌지 않습니다. DOM API(querySelectorAll, getElementsByClassName, getElementsByTagName)를 통해 Element list를 가져올 수 있습니다. 'querySelectorAll' method는 'NodeList' 형태로 element list가 반환되고 'Static collection'입니다. 'getElementsByClassName', 'getElementsByTagName' method는 'HTMLCollection' 형태로 element list가 반환되며 'Live collection'입.. 2021. 8. 3.

티스토리툴바