공부-프레임워크, 개발도구20 Vue- 컴포넌트 컴포넌트: 화면을 구성할 수있는 블록 -> 화면의 구조화, 일괄적인 패턴으로 개발가능 앞서 data, 메소드 등 Vue 를 구성할 수 있는 형식을 미리 만들고 컴포넌트에 추가함으로 코드 재활용 높음 전역 컴포넌트: 어느 범위든 지정한 컴포넌트 태그를 적용하고 싶을 때 사용가능 지역 컴포넌트: 특정 범위 내의 컴포넌트 태그에만 적용하도록 할 때 사용가능하다. 컴포넌트 안에 template, data, method 등 정의 가능하다. 전역 컴포넌트 등록 예시코드 var cmp = { template: '지역 컴포넌트' }; Vue.component('component_name', cmp}); 전역 컴포넌트는 어느 영역이든 모두 적용된다. 지역 컴포넌트 등록 예시코드 var cmp = { template: '.. 2022. 10. 4. Vue 입문 Vue에 대한 기본문법을 이해할 때는 굳이 Vue 컴포넌트를 생성할 필요없이 html로 실습할 수 있다. new Vue({}); 를 뷰 인스턴스라고 한다. (Vue는 생성자) el속성을 사용해서 뷰 인스턴스와 관계된 부분을 명시한다. (#app를 이해하지 못한다면 CSS 문법 공부부터) data속성에 정의된 값들을 사용하고자 한다면 {{ 데이터이름 }}으로 사용할 수 있다. id=app : {{ message }} id=app2 : {{ message }} 위 코드블럭 실행 상태 (더보기 클릭) 더보기 HTML 삽입 미리보기할 수 없는 소스 2022. 10. 4. Dockerfile docker-compose.yml Dockerfile : 컨테이너의 설계도 RUN , WORKDIR, CMD 등 활용하여 컨테이너의 기본 설정을 해주는 역할을 한다. 만들고자 하는 프로젝트내에 위치한다 docker build 명령어를 사용하고 도커 파일을 명시하여 사용하게 된다. docker-compose.yml : 다중 컨테이너 애플리케이션을 배포하려는 방법을 정리한 파일 docker-compose up 으로 설정한 내용대로 컨테이너 실행 Dockerfile이 어디에 위치되어있는지, 포트번호는 몇번을 쓸 것인지, 볼륨위치 등 명시하는 파일 Dockerfile은 이미지를 만드는 설계도, docker-compose는 설계도들의 관리자라고 볼 수 있다. 2022. 8. 14. 도커의 원리와 컨테이너 기본 설정, 컨테이너 외부 노출 docker는 컨테이너를 생성하고 기존 주체인 host컴퓨터의 포트와 컨테이너가 가진 포트와 연결하는 역할을 한다. 이렇게 하여 host 80포트에서 들어온 신호를 컨테이너에게 전달하여 컨테이너를 운영할 수 있고, 이것을 "포트 포워딩" 이라고 한다. 컨테이너는 가상 IP주소를 할당 받기 때문에 외부에서 컨테이너 접근은 불가능하다.포트 포워딩을 통해 외부와의 연결통로를 뚫어야 한다. docker run -p 8080:80 httpd 해당 명령어는 호스트의 8080포트와 도커 컨테이너의 80포트를 연결한 컨테이너를 실행한다는 뜻이다. 포트연결 여러개를 하기 위해서 -p를 여러번 사용해서 설정할 수 있다. docker run -it -p 3306:3306 -p 192.168.0.005:8080:80 http.. 2022. 8. 10. 도커입문 간단한 명령어 및 초기설정 도커를 다운하는 것까지는 게임다운과 별 다를게 없다 버전과 운영체제에 맞게 다운하고나서 윈도우 기준으로 체크할 것 도커 WSL2가 다운되어 있어야한다. Hyper-V를 체크해야 한다. 나는 저 두가지 문제를 해결하고 나서야 도커 실행시 무한로딩에 걸리는 문제가 해결되었다. https://www.lesstif.com/software-architect/wsl-2-windows-subsystem-for-linux-2-89555812.html WSL 2(Windows Subsystem For Linux 2) 정식 버전 사용하기 만약 탐색기에서 \\wsl$ 로 접근시 WSL 목록이 보이지 않는다면 인스턴스가 기동되지 않아서입니다. www.lesstif.com 도커에 회원가입 후 도커 허브를 확인, 토큰 등 발급필.. 2022. 8. 10. javascript로 이미지 분석해보기 (canvas, WebRTC) 구현방식(제일 하단에 실제 동작하는 코드가 기입되어 있습니다.) 1. 첫번째 좌표를 (x1,y1)로, 두번째 좌표를 (x2,y2)로 하였을 때 너비(w), 높이(h)를 변수로 기입한다. 2. 동적으로 이미지를 받아오기 위해 WebRTC를 사용하여 특정 프로세스 상황을 비디오로 불러온다. 3. 불러오기위해 start버튼을 누르고, snapshot을 누르면 canvas두개를 좌표에 맞게 비디오 이미지를 잘라온다. 첫번째 좌표에 따라 붉은색 좌표를 기준으로 잡고 너비와 높이에 맞게 해당 프로세스 이미지를 자른다. 두번째 좌표도 같은 방식으로 같은 너비와 높이에 맞게 해당 프로세스 이미지를 자른다. 그리고 제일 위에 있는 이미지는 두 이미지를 비교해서 픽셀값이 다른 부분을 R,G,B값이 달라지게 하여 가독성을 .. 2022. 7. 18. 이전 1 2 3 4 다음
