몽땅뚝딱 개발자

Vue의 Built-In Components ◽ component 이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다. 렌더링 할 실제 컴포넌트는 is prop에 의해 결정된다. ◽ is 속성 is 속성에는 문자열이나 컴포넌트 이름을 넣는다. ◽ 예제 ◽ keep-alive를 사용하는 동적 컴포넌트 is 속성을 사용하는 경우 다시 돌아왔을 때 계속해서 재렌더링 되어 기존의 클릭값이나 기존 데이터가 유지되지 않는다. 그래서 처음 생성된 컴포넌트 인스턴스가 캐시되기를 원하는 경우에 엘리먼트로 감싼다. 출처 https://v3.ko.vuejs.org/api/built-in-components.html#component 개인적으로 공부한 내용을 정리하는..

항상 보이던 $nextTick()... 대충 promise 같은 개념이라고만 생각하고 있었다. 미루고 미루다가 이제서야 정리해봄... ^^ ◽ 개요 Vue.js에서 mounted()는 DOM의 모든 변경사항을 반영하고나서 실행되는 훅이다. Javascript는 비동기로 처기되기때문에 DOM의 모든 변경사항이 반영 되기 전에 DOM에 접근하려고하면 undefined나 null 에러가 발생한다. 따라서 Vue.js에서는 데이터 갱신, UI 업데이트 등DOM의 모든 변경사항이 완전히 반영된 후에 로직을 실행할 수 있도록 nextTick()을 제공한다. ◽ $nextTick() Vue.nextTick( [callback, context] ) ◽ $nextTick() 사용해보기 // 실행할 함수를 $nextTic..

◽ 설치하기 npm i deepmerge ◽ API - merge(x, y, [options]) import deepmerge from 'deepmerge' methods: { test() { const a = { name: 'davinch', } const b = { age: 132, birth: 230908, } const output = deepmerge(a, b) console.log(output) // { age: 132, birth: 230908, name: "davinch" } }; } - merge.all(arrayOfObjects, [options]) import deepmerge from 'deepmerge' methods: { test() { const foobar = { foo: {..

◽ Object.assign() // target: 목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체 // sources: 출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들 Object.assign(target, ...sources) ◽ Object.assign() 사용하기 예제 1. 목표 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우, 그 속성 값은 출처 객체의 속성 값으로 덮어쓴다. const target = { a: 1, b: 2, c: 2 }; const source = { b: 4, c: {'name': 2, 'idx': 4} }; const returnedTarget = Object.assign(target, source); console.log(ta..

◽ SVG(Scalable Vector Graphics)란? 확장가능한 벡터 그래픽을 SVG라고 한다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어이다. ◽ SVG의 주요 속성 - 뷰박스(viewbox) 좌표와 가로, 세로의 비율을 결정하는 svg의 특성이다. viewBox="0 0 0 0"으로 사용할 수 있으며, 각 자리는 순서대로 x, y, width, heigth를 의미한다. 영화관에 비추는 영상이라고 생각하면 된다. - 뷰포트(viewport) svg의 가시영역으로 해당 요소의 너비와 높이를 의미한다. width="100px", height="100px"으로 사용할 수 있다. 영화관에서 스크린보다 큰 영상을 비추면 화면에 보이지 않게 되는 것 처럼 영화관의 스크린 영역이라..

◽ 반응형(RWD, Responsive Web Design) 반응형은 디바이스 기종에 상관없이 화면의 레이아웃을 구성하는 것이다. 미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드를 사용한다. ◽ 적응형(AWD, Adaptive Web Design) 적응형은 접근한 디바이스에 딱 맞는 크기로 만드는 것이다. 디바이스 기종 별로 딱 맞는 최적화된 마크업으로 구성하여 디바이스에 맞는 최적의 성능을 가져올 수 있다. 출처 및 참고 TIL. 반응형 웹 vs 적응형 웹 근본적으로 웹사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법이다.그러나, 적응형 웹과 반응형 웹은 사이트 설계부터 velog.io 개인적으로 공부한 내용을 정..

에러 java.lang.NullPointerException null java.lang.NullPointerException at gitflow.ui.AbstractBranchStartDialog.(AbstractBranchStartDialog.java:45) .... 원인 환경세팅을하며 Git Flow Integration 플러그인을 사용하기위한 설정과정에서 생긴 에러이다. 플러그인 자체는 설치(installed)가 되었지만 인텔리제이 하단에 gitflow가 띄워지지않았다. 그래서 ⌥ + ⇧ + N으로 task를 가져오려고 하면 해당 에러가 발생한다. Git Flow Integration를 사용하지않으면 open task 창이 잘 열리기때문에 플러그인 자체가 설치가 되지않은 것으로 판단됐다. 내가 생각..

◽ 문자열 검사 // "F"가 포함되어있는지 검사 Arrays.asList(targetArr).contains("F"); ◽ 문자열 포함 개수 검사 메서드 (숫자도 동일) public static int countChar(String str, char ch) { return str.length() - str.replace(String.valueOf(ch), "").length(); } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

배열은 이렇게 출력해야 한다. String[] strArr = {"a", "b", "c"}; // 주소값이 나온다. System.out.println(strArr); // 이렇게 찍어야 값이 출력된다. System.out.println(Arrays.toString(strArr)); 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.