allblack의 개발 새발 allblack의 개발 새발

methods type:{ [key: string]: Function } Ex> import { Vue } from "vue-class-component"; export default class Home extends Vue { methodsCount() { console.log("methods"); return this.countMethods; }, } import { Vue, Options } from "vue-class-component"; @Options({ methods: { methodsCount() { console.log("methods"); return this.countMethods; }, }, }) export default class Home extends Vue {} compute..

type: Array | Object options type : 기본생성자 타입 모두 가능하고 커스텀한 생성자 타입도 가능합니다! types: String, Number, Boolean, Array, Object, Date, Function, Symbol... default: prop의 기본값을 설정합니다. types: any required: prop의 필수 여부를 정의합니다. types: Boolean validator:사용자 정의 유효성 검사 함수입니다. types:Function 설명 부모 컴포넌트의 데이터를 얻기 위한(exposed to accept) 리스트/해쉬 속성입니다. 배열 기반의 단순한 문법과 형 검사, 사용자 정의 유효성 검사와 기본값 같은 고급 구성을 허용하는 객체 기반의 문법이 있..

-data- type: function 설명 컴포넌트 인스턴스에 데이터 객체를 반환하는 함수입니다. Ex> // 인스턴스를 생성합니다. const data = { a: 1 } // 객체를 컴포넌트 인스턴스에 추가합니다. const vm = Vue.createApp({ data() { return data } }).mount('#app') console.log(vm.a) // => 1 import { Options, Vue } from "vue-class-component"; @Options({ data() { return { test2: "etst2", }; }, }) export default class Home extends Vue {} import { Vue } from "vue-class-comp..

컴포넌트끼리 값을 공유하는 방법 props storage 상태 관리 라이브러리 props 이용해서 최상위 component에서 최하위 component로 정보를 props를 이용해서 보내는 것은 너무나도 비효율적입니다. 그러나 storage, 상태 관리 라이브러리를 이용하기에는 애매한 경우가 있습니다. vue는 이러한 상황을 해결하기 위해 provide/inject개념을 만들게 되었습니다. Provide / Inject란? provide는 값을 제공하는 역할 Inject는 제공받은 값을 component에 추가하는 역할 사용방법 parents child {{ test }} *provide 값을 반드시 변수값으로 할 필요는 없습니다. 이렇게만 보면 엄청나게 편리한 기능이라고 느껴집니다. 귀찮게 props ..

사전적정의 attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다. property는 html DOM 안에서 attribute 를 가리키는(혹은 대신하는) 표현입니다. ex> class 라는 특성이 attribute이고 className(클래스명)은 property입니다! ..? 뭔 차이인가? 한줄요약 attribute는 정적인 값 property는 동적인 값 attributes는 html document/file안에 존재하는 값(파일) property는 html dom tree안에 존재하는 값이기 때문입니다!(로컬) 이해하기 쉽게 예시를 들어보죠! 이상태에서 각각의 값 attributes: "test" property : "test" 지금은 이렇게 같은 ..

디자인 패턴? 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. -위키백과- 한마디로 "효율적인 코드 작성 설계방식" *소프트웨어 설계의 공통적 문제에 대한 표준적 해법입니다! ⇒ 바로 코드로 변환할수있는 형태x 이런거 공부해서 어디다 써요? 물론 소규모 프로젝트할때나, 처음 공부를 할때는 필요없다고 생각될것입니다. 그러나 우리가 사용하는 react,vue과 같은 라이브러리,프레임 워크들이 어떠한 디자인 패턴을 이용해서 만들어졌는지를 파악하고 대규모로 작업을 할때 훨씬더 효율적인 코드를 작성하도록 도와줍니다! 대표적인 디자인 패턴 MVC(Model-View-Controller) Model : 응용프로그램의 동작 및 데이터를 관리합니다. View : UI를 화면..

what is the component? 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 (단위)모듈을 뜻한다. functional components 함수 컴퍼넌트의 정의 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다. -react 공식 사이트- 특징 UI에 집중되어있는 방식 함수형은 상태를 저장할 수 없다. 기본적으로 함수는 한번 실행되고 나면 메..

변수및 함수의 이름 짓는 방식 카멜케이스: backgroundColor 파스칼케이스: BackgroundColor 스내이크케이스: background_color