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 ..

디자인 패턴? 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. -위키백과- 한마디로 "효율적인 코드 작성 설계방식" *소프트웨어 설계의 공통적 문제에 대한 표준적 해법입니다! ⇒ 바로 코드로 변환할수있는 형태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

mobx란? MobX는 전역 상태 라이브러리중 하나입니다! 특징 React에 종속적인 라이브러리가 아님(vue, anglur등에서도 사용가능) redux와 다르게 store에 제한이 없음 observable을 기본적으로 사용하고 있음 Mobx는 절대적으로 필요한 경우에만 state 변경 (어떤 뜻인지를 모르겠음) Typescript를 기반으로 만들어짐 개념 observable: 추적 가능한 state 정의 action: state를 변경하는 메소드 computed: state와 캐시로부터 새로운 결과를 반환 observable Observable State를 만듬 state의 변화는 reaction과 computations를 일으킴 관찰할 수 있는 변화가 일어나면 탐지함 시간에 따라 변할 수 있는 값들을..

리액트는 UI 기능만 제공하는 라이브러리라서 개발자가 직접 설정해야 하는 것들이 많이 있습니다. 그런데 이렇게 개발자 마음대로 설정할 수 있는 점 때문에 처음 시작하는데 많은 어려움이 있습니다. 그래서 react에서 CRA를 만들었습니다. CRA란? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 툴입니다. CRA의 장점 초보자가 react에 접근하기 쉽다. webpack, babel등 세부 설정을 자동으로 해줍니다. ES6+문법, CSS 후처리같은 개발환경 자동으로 설정해줍니다. cra 단점 webpack,babel설정을 변경하기 어렵다. 작은 프로젝트를 진행할때에는 너무 파일이 무겁다 (물론 react-app-rewired나 eject를 이용해서 webpack설정을 수정할 수 있습니다.)..

SPA와 MPA를 알아보기전에 정적 사이트와 동적 사이트의 차이를 알아보자! static website(정적 웹) vs Dynamic website(동적 웹) 정적 웹 서버에 저장된 html파일이 그대로 브라우저에 보이는 것을 말한다. 개츠비가 가장 대표적인 정적 페이지라고 할 수 있다. HTML안에 모든 데이터가 들어 있는 사이트 동적 웹 정적인 웹사이트의 반대말로 동적인 웹사이트를 말한다. 서버에 저장된 html파일이 그대로 브라우저에 그려지는 것이 아닌 동적으로 html파일이 만들어 지는 것! SPA vs MPA? SPA(Single Page Application) 한 개(Single)의 Page로 구성된 Application이다. SPA는 CSR(Client Side Rendering) 방식으로 ..