일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- A-Frame
- PHP
- web
- package-lock.json
- version mismatch
- javscript
- VR
- promise
- vue
- JS
- npx
- vuetify
- EM6
- bootstrap
- aframe
- 상태관리
- CI/CD
- Component
- 3d
- Three.js
- vue-template-compiler
- auth0
- array
- vuex
- WebXR
- AR
- JavaScript
- WebVR
- PDO
- Node
- Today
- Total
목록분류 전체보기 (161)
대가는 결과를 만든다
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/UtCCz/btqAhViyT6h/VkoYRceQylWoTpuxS7LKmk/img.png)
초기 AWS 서비스 사용 진입시 대부분은 서비스 자체에만 집중해서 개발을 시작하게 된다 (특히 소규모의 팀인 경우 더욱 그렇다). 하지만 여러 구성원들이, 여러 AWS 서비스들을 사용하게 되고, 유기적으로 연결된 구조로 사용하게 되면서 보안적으로 갖춰야할 관리 시스템과 권장 사항들이 있다는 것을 정리하고자 한다. IAM이란? (Identity and Access Management) AWS 리소스 액세스를 관리/제어하기 위한 서비스로 인증 또는 권한부여 대상을 관리한다. 초기 AWS 계정 생성 시 해당 계정의 모든 AWS 서비스 및 리소스에 완전한 액세스 권한이 있는 하나의 ID, 즉 AWS 계정 루트 사용자로 시작한다. 일상적인 작업, 관리 작업조차도 이 루트 사용자를 사용하지 않는 것을 권장하고 있고..
INTRO 프론트엔드 개발 및 예제들 테스트를 하는 중 CRA(create-react-app)이나 vue-cli를 사용하면서 종종 npx를 사용하는 예시들을 보게됬다. npm 이후 yarn, 또다른 npx라는 패키지 매니저가 나온 것인가 싶었으나 댓츠 노노! npx에 대해 개념정리 해보겠다. npx란? npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 추가된 툴이다. (새로운 패키지 매니저 개념이 아니다! ) 패키지를 설치하지 않고, npm 패키지를 1회성으로 즉석 실행해볼 수 있는 도구이다. 배경 npm으로 모듈을 설치 시 두가지 방안이 있다. 1) 전역으로 설치하여 의존성 라이브러리들이 PC에 남게 하는 것 2) 현재 프로젝트에만 개발 의존성 모듈로 설치하는 것 최근 npm으로 설치..
web을 다뤄봤고, 최근 모던 웹 개발을 해보면 CSS 뿐 아니라 Sass, scss를 다뤄보고 들어봤을 것이다. 이에 대한 배경과 개념에 대해 정리를 하겠다. CSS란? (Cascading Style Sheets) 문서의 스타일을 구현하는 스타일 시트 언어이다. 배경 W3C에서 1996년 도입한 것으로, 이전에는 HTML언어 하나로 문서와 디자인을 모두 구현했었다. 예상되듯이 수정 및 유지보수를 해야하는 경우 스타일, 문서 중 하나를 수정 하더라도 모두 수정해야하는 단점이 있었고, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기가 CSS의 탄생 배경이다. css에 대한 건 이미 다 잘알테니 이 정도로 하고 패스! 그럼 Sass는 뭐여? (Synt..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqMBox/btqz9sItKfl/fzCjvXbUQP45vC8paKLYrK/img.png)
INTRO EC2에서 운영하고 있는 서버에 https를 적용하기 위해서는 두 가지 방법이 있다. 1) EC2 내부에 SSL인증서를 설치하고 서비스하는 방법 (일반적인 기존 방식) 2) AWS에서 제공하는 인증서 관리 서비스인 ACM(AWS Certificate Manager)을 ACM 통합서비스와 연동하여 적용하는 방법 (참고 : ACM이란? https://docs.aws.amazon.com/ko_kr/acm/latest/userguide/acm-overview.html) 1) 의 방법은 기존 개발방식에서 적용했던 일반적인 방식이다. 유료 인증서나, Let's Encrypt같은 무료 인증서를 적용해서 운영가능하다. 인증서의 경우 까다로운 것이 인증서 유효기간마다 갱신해주야 한다는 것이다. (Let's E..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bZka0I/btqz6G1cfPq/XwDp8ek8UXG180aSVH1IH0/img.png)
bitbucket pipeline 이용 기본적인 내용은 이전 글을 참고 https://yunzema.tistory.com/257 bitbucket pipeline을 이용한 배포 1. Bitbucket pipeline Feature - Bitbucket의 CI/CD 통합 서비스 - config 파일(bitbucket-pipelines.yml)을 기반으로 빌드, 테스트, 배포를 자동화 할 수 있다. (js, docker, python등 다양한 언어를 지원함) -.. yunzema.tistory.com bitbucket pipeline을 이용하여 특정 브랜치, 태그, 북마크로 push되면 원하는 플랫폼으로 배포까지 연결할 수 있다. 그러기 위해서는 bitbucket-pipeline.yml 이라는 스크립트를 작..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oBlBA/btqz5yQbM8j/tdrkp5Ff3Eru16xKbdR7F0/img.png)
1. Bitbucket pipeline Feature - Bitbucket의 CI/CD 통합 서비스 - config 파일(bitbucket-pipelines.yml)을 기반으로 빌드, 테스트, 배포를 자동화 할 수 있다. (js, docker, python등 다양한 언어를 지원함) - Cloud에 Docker Container를 생성하여 진행하는 방식이며, Linux에서 build, test할 수 있는 상황이어야 한다. - repository에 push할 때마다 pipeline trigger된다 ( 특정 tag, branch, bookmark를 trigger로 설정 가능 ) - 앞서 말했듯이 docker container에서 배포가 진행되므로, 배포시 특정 커맨드 실행도 script에서 정의 가능 하겠다..
s3 콘솔이나, 파일경로를 보면 s3에 directory로 구성되는거 같지만 s3에는 directory개념이 없다. 모든 것이 하나의 파일 객체의 개념이다. 따라서 directory를 삭제 하듯이 해당 경로 하위 파일 객체들과 함께 모두 지우기 위해서는 경로 하위에 존재하는 파일객체 목록을 조회한 후 deleteObject가 아닌 deleteObjects로 일괄 제거해야 한다. https://stackoverflow.com/questions/20207063/how-can-i-delete-folder-on-s3-with-node-js How can I delete folder on s3 with node.js? Yes, I know. There is no folder concept on s3 storage..
video의 thumbnail을 만들기 위해서 video element를 이용해 canvas에 그리는 작업을 하는데 이 과정에서 draw가 정상적으로 되지 않고 검은 화면이 캡쳐가 된다. 현재 같은 이슈 사항을 확인하는 개발자들이 있으며, 69 버전에선 정상적으로 동작함을 확인했다. https://support.google.com/chrome/thread/12663566?hl=en [Chrome 76 bug] canvas cannot drawImage of video's first frame - Google Chrome Help Recommended Answer Edit: Originally I rely on the onCanPlay event to know that it is a good time fo..