본문 바로가기

IT

[vue.js] vue component 통신 컴포넌트끼리 통신가능?앵귤러, 백본같은 초기 자바스크립트 프레임워크의 경우, 한 화면을 한개의 뷰로 간주vue.js는 컴포넌트로 화면을 구성하므로, 같은 웹 페이지라도 데이터 공유 가능.(컴포넌트마다 자체적으로 고유한 유효범위(scope)이 있기때문에) 자바스크립트 객체 방식으로 보면, cmp2Data는 my-component1의 data를 참조하고 있지만, 값을 출력할 수 없음.이유는, 값을 직접 참조할 수 없기 때문. 이렇게 다른 컴포넌트 값을 참조할 수 없기 때문에, 데이터 전달 방식에 따라 일관된 구조로 애플리케이션 작성이 가능. 상위, 하위 컴포넌트 관계가장 기본적인 데이터 전달 방법: 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 상위에서 하위는 props라는 특별한 속성을 전달.하위.. 더보기
[vue.js] 컴포넌트(component) 뷰 컴포넌트조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미ex. 네비게이션바, 테이블, 리스트, 인풋박스 등컴포넌트 관계는 tree와 유사전역 컴포넌트 등록Vue 생성자에서 .component()를 호출하여 수행cf. 태그이름의 명명 규칙은 '모두 소문자', '케밥 기법(단어와 단어 사이를 "-"로 잇는 명명)'을 사용 컴포넌트 등록 지역 컴포넌트 등록인스턴스에 components 속성 추가, 등록할 컴포넌트 이름과 내용을 정의.new Vue({ el: '#app', components: { 'my-local-component': cmp // 컴포넌트 이름 : 컴포넌트 내용 } });지역 컴포넌트 등록하기 컴포넌트 등록 지역과 전역 컴포넌트의 차이전역은 인스턴스에 관계없이 출력이 가능하나,.. 더보기
[vue.js] 인스턴스(instance) 캡틴판교님의 Do it Vue.js를 보고 정리한 자료입니다.출처: github.com/joshua1988/doit-vuejs뷰 인스턴스 정의뷰로 화면개발하기 위해 필수적으로 생성해야 하는 기본 단위 new Vue() {{ message }} 뷰 인스턴스 옵션(#선택자는 css 선택자 규칙과 같음) el: '#app' -> 더보기
etc/init.d/network 에러 linux.r2schools.com/bash-etc-init-d-network-no-such-file-or-directory/ bash: /etc/init.d/network: No such file or directory CentOS 8 - linux.k2schools.com bash: /etc/init.d/network: No such file or directory www.linux.r2schools.com 다음과 같은 네트워크 에러시 네트워크를 재시작해야 한다. 에러: bash: /etc/init.d/network: No such file or directory CentOS 8 해결: systemctl restart NetworkManager.service 더보기
npm이란 무엇일까? 자바의 Maven처럼 npm은 통한 패키지(모듈) 관리 npm은 Node Packaged Manager의 약자입니다. 무슨 의미인지 한 번 추측을 해볼까요? 먼저 Node는 Node.js를 의미하는 것 같습니다. Packaged라는 것은 package로 만들어진 것들을 의미하는 것 같습니다. package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고 Manager는 잘 아시는 것처럼 관리자를 의미합니다. 이걸 합쳐보면 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 것이 됩니다. 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로.. 더보기
yaml 파일이란 Xml과 Json 파일 포맷은 많이 들어보셨는지요?아마 많이 쓰고 계실 걸로 생각 됩니다. 그럼 이런 포맷들은 왜 사용할까요?그걸 먼저 설명드리면, 우리가 타 시스템 간에 데이터를 주고 받을 때 데이터 포맷에 대한 약속이 필요합니다. 혼자 시스템을 개발하거나 내부 시스템 끼리는 "1-김태민-강사,2-아무개-학생" 이라는 문자열을 만들어서 "-(하이픈)"을 파싱해서 순서대로 "1"은 일련번호, "김태민"은 이름, "강사"는 구분이라는 규칙과, ",(콤마)"는 리스트를 나타내는 구분자라는 규칙을 세울 수 있을 겁니다.그럼 데이터를 내부 시스템에 전송할때 포맷에 대한 형태는 말로써 혹은 내부 문서로써 정의해 놓으면 되기 때문에 데이터 크기는 엄청 작아 질 수 있겠네요.근데 문제는 타 시스템들과의 연동을 할때입.. 더보기
하이퍼레저 패브릭(Hyperledger Fabric)이란 blog.naver.com/mage7th/221493540794[ 하이퍼레저 ] 개념 및 구조 설명 / 13개 프로젝트 소개블록체인 기술은 비트코인, 이더리움을 거쳐 하이퍼레져와 같은 엔터프라이즈 블록체인의 도입과 확장의 시...blog.naver.com 하이퍼레저란블록체인을 활용한 다양한 업무 시스템을 구축하고 운영하기 위한 소프트웨어 플랫폼. 1. 컨소시엄형 참가 방식을 기반으로 블록체인 네트워크 형성2. 가볍고 빠른 합의 방식3. 스마트 컨트렉트(체인코드)로 다양한 업무 처리 구현4. 트랜잭션 직후 StateDB에 실행 직후의 상태 보존5. 채널을 사용한 블록체인 네트워크의 논리적 분할 하이퍼레저 패브릭 구성요소 Hyperledger Fabric Client SDK클라이언트용 SDK, 패브릭의 기능.. 더보기
[javascript] 배열속 원하는 값 찾기(indexOf, includes) 자바스크립트에서 배열속 원하는 값을 찾고싶을때, indexOf 와 includes 를 이용하여 쉽게 찾을 수 있습니다. indexOf 는 찾은 값의 첫번째 원소의 위치를 반환해주며, 없을경우 -1을 리턴합니다. includes 는 true / false 로 있다, 없다를 직관적으로 리턴해줍니다. indexOfvar a = [1,2,3,4,5,1,2,3] a.indexOf(3) //2 a.indexOf(6) //-1 3이라는 원소는 배열의 2,7 번째 두곳에 위치해 있지만 첫번째 위치를 리턴합니다. 6은 배열에 존재하지 않기때문에 -1을 리턴하는것을 알 수 있습니다. includesvar a = [1,2,3,4,5,1,2,3] a.includes(3) //true a.includes(6) //falsein.. 더보기

티스토리툴바