본문 바로가기

study

(27)
will-change UI나 UX가 괜찮아보이는 페이지를 보고 따라 만들어보는 중에 transform을 사용해서 hover로 변경될 때 애니메이션을 적용했다.근데 애니메이션이 약간 버벅인다고 해야되나 부드럽지 못하게 보였다. 퀄리티가 정말 떨어져보이고 별로 안 예뻐서 찾아보던 중에will-change라는 css속성을 찾았다. will-change: transform; 이 한 줄 추가되니깐 애니메이션이 부드러워지는 걸 봤다.브라우저에게 엘리먼트가 어떤 변경을 할 것인지 미리 알려주는 속성이라고 한다.참고글을 보니깐 transform으로 처리되는 부분과 엘리먼트를 따로 관리하고 다시 합쳐서 출력하는 중에 지연이 생겨서 처음에 버벅이는 현상처럼 보였던 것 같다.transform은 GPU가속이 자동으로 활성화 되지 않아서 렌더링이 ..
innerHTML 사용 시 css 깨질 때 string으로 넘어온 html태그들이나 통째로 html 태그들을 받아서 화면에 출력해야 할 때 innerHTML 을 사용하여 그대로 출력하는 방법이 있다.그런데 innerHTML로 출력할 html에 컴포넌트에 적용된 css들에 영향을 받아 innerHTML에 출력할 부분의 css가 깨지는 경우가 있었다. 이 때 string html을 DomSanitizer.bypassSecurityTrustHtml 이라는 함수를 사용해서 SafeHTML 형태의 데이터로 변환후에 뷰에 출력했을 때 string형 html에 적용된 css 그대로 출력되었다. DomSanitizer를 의존성 주입을 받고 1this.DomSanitizer.bypassSecurityTrustHtml(stringHTML)cs 이렇게 사용한다.by..
NgZone으로 실행되지 않거나 멈춤현상이 일어나는 현상 해결 angular에서 Router로 다른 경로의 페이지로 이동할 때 이동하고 나서 컴포넌트가 생성이되다가 멈추는 현상이 발생하는 경우가 발생했다.특히 찾다보니 외부 라이브러리를 가져다 쓰는 경우에 앵귤러에서 제대로 감지하지 못하는 경우가 발생하기 때문인 것 같아 보인다. 이런 현상은 꼭 Router로 인한 것 만은 아니고 여러 경우가 있는 것 같다. 당시 현상은 컴포넌트가 생성이 되다가 멈춰서 ui가 그려지다 말아서 그런지 깨져서 보이고 또한 컴포넌트를 조금씩 클릭하거나 변화를 주려고 하면 다시 생성을 멈춘게 작동을 해서 다시 컴포넌트가 생성이 되긴했다. 이 때 NgZone을 의존성 주입받아서 Router.navigate 함수를 NgZone.run 함수로 감싸 실행해서 해결 했다. NgZone은 앵귤러 안에..
angular node sass error angular-cli를 업데이트 하고 나서 angular ng serve 시에 Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x ... 이런 오류가 발생하면서 잘되던 빌드가 안되는 경우가 있다. npm rebuild node-sass --force 이런 오류가 발생할 때 위의 명령어를 실행 해 주고나서 다시 ng serve를 실행하면 다시 잘 작동한다. 근데 저 명령어를 실행하고나서 꽤 시간이 걸렸다. https://github.com/sass/node-sass/issues/1993
IaaS, PaaS, SaaS IaaS, Paas, SaaS 란? 간단히 설명하면 클라우드 서비스 컴퓨팅의 종류를 말합니다. IaaS (Infrastructure as a Service) 서버를 운영하기 위해서는 서버 자원, IP, Network, Storage, 전력 등등 인프라를 구축하기 위해 여러가지가 필요합니다. Iaas는 이러한 것들을 가상의 환경에서 쉽고 편하게 이용할 수 있게 서비스 형태로 제공합니다.컴퓨터로 비유하자면 하드웨어만 제공해주는 서비스.운영체제부터 상위의 모든 플랫폼이나 어플리케이션을 사용자가 직접 올릴 수 있습니다.고객은 여전히 직접 OS와 어플리케이션을 직접 관리해야 합니다.앱을 개발하여 제공하기에 앞서 먼저 인프라를 설정할 필요가 없으므로 IaaS를 사용할 경우 사용자에게 앱을 더 빠르게 제공할 수 있습..
함수 전달인자와 매개변수 함수의 전달인자와 매개변수에 대해 알아보겠습니다. 자바스크립트에서는 함수 정의 시 함수 매개변수의 자료형과 함수 호출 시의 전달하는 인자 값의 자료형을 검사하지 않습니다.심지어 전달인자의 개수도 검사하지 않습니다. 생략 가능한 매개변수 함수 호출 시 본래 정의된 것보다 적은 수의 전달인자가 전달되면 나머지 매개변수는 undefined로 설정됩니다. 1234567function getPropertyNames(o, /*optional*/ a) { if ( a=== undefined ) a = []; //a에 대한 전달인자가 없을 때 새로 배열로 초기화 for(var property in o) a.push(property); return a;}var a = getPropertyNames(o); // 이 경우 ..
Cent OS 7에 MySql 설치하기 aws에 Cent OS 7 인스턴스를 launch하고 MySql를 설치 했습니다.설치를 참고한 사이트입니다. https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-centos-7 $ yum install wget 이 명령어를 입력하기 전에 root로 이동해야합니다.sudo cd root 명령어를 입력해도 root로 이동하지 않았는데 sudo su라는 명령어를 입력 후엔 root로 이동할 수 있었습니다. $ wget https://dev.mysql.com/get/mysql57-community-release-el7-9.noarch.rpm $ md5sum mysql57-community-release-el7-9.noarch.rpm ..
AWS에 Cent OS7 셋팅하기 MySql를 Centos7 OS에 설치하기전 AWS에 Centos7 OS를 셋팅하기 위해서 구글링해서 정리가 잘된 블로그들을 참고해서 셋팅을 마쳤습니다! Launch Instance를 클릭! 좌측 부분에 AWS Marketplace를 선택하고 검색바에 Centos로 검색한 후 CentosOS 7 (x86_64) - with Updates HVM 을 select! 프리티어로 이용하기 위해서 type이 ts.micro인 것을 선택하고 Next:Configure Instance Details를 클릭! Instance가 Termination상태가 되면 해당 instance에 대한 모든 정보가 초기화되고 복구할 수 없게 된다고 한다. Micro Instance의 경우 로컬 저장소가 없어 따로 지정해 줘야해서 EB..