atmoic design을 도입하면서, 공용으로 사용하고 있는 component들을 새롭게 디자인하고 있습니다. 여기에서는 vue3 + composition setup Api + typescript 로 toggle 컴포넌트를 간단히 만들어 보겠습니다. 완성된 모습은 아래와 같습니다. vue3에서 구현했으며, 구현 코드는 아래와 같습니다. 부모 컴포넌트에서 사용은 아래처럼 했습니다. {{ toggleValue }}
전체 글
생산성을 높이기 위해 vue snippet을 만들어봅시다. 먼저, 아래처럼 vscode에서 command + shift + P 를 눌러 snippet을 검색해서 사용자 코드 조각 구성을 선택해 줍니다. vue snippet을 생성할 것이니 vue를 검색해 선택해줍니다. 그럼 vue.json 파일이 생성되고 여기에서 원하는 대로 설정해주면 됩니다. 저는 typescript와 scss를 사용할 예정이어서 아래처럼 설정해주었습니다. { "vue-init-ts": { "scope": "vue", "prefix": "vts", "body": [ "", "\t", "\t", "", "", "" "" ], "description": "Vue3 Composition API" }, "vue-init-setup-ts": ..
주어진 정수 num에 대해 결과가 한 자릿수만 남을 때까지 반복해서 모든 자릿수를 더하고 그 값을 반환하는 문제이다. 아래처럼 간단히 재귀로 풀었다. var addDigits = function(num) { const numArray = num.toString().split("").map(str => Number(str)); if(numArray.length === 1){ return numArray[0] }else{ return addDigits(numArray.reduce((acc, cur) => acc + cur)) } }; 다른 사람들 풀이를 보니 아래처럼 기발하게 푸는 방법도 있었다. var addDigits = function(num) { return 1 + (num - 1) % 9; };
anagram인지 판단하는 문제이다. anagram은 각 String의 구성요소들의 순서만 바꾸어서 생성한 다른 String을 의미한다. var isAnagram = function(s, t) { if(s.length !== t.length) return false; const mapper = {}; for(const letter of s.split("")){ if(!mapper[letter]){ mapper[letter] = 1; }else{ mapper[letter] += 1; } } for(let i = 0; i < t.length; i++){ const letter = t[i]; if(mapper[letter] < 0 || mapper[letter] === undefined){ return fal..
leetCode의 Valid Palindrome 문제를 해결하고 정리한다. 1. 먼저 정규표현식으로 알파베틱 글자이외를 전부 없애준다. 2. 소문자로 변경 3. 글자의 처음과 마지막을 two pointer로 비교하며 리턴한다. var isPalindrome = function(s) { let str = s.replace(/[^a-zA-Z0-9]/g, ''); str = str.toLowerCase(); let start = 0; let end = str.length-1; for(let i = start; start < end ; i++){ if(str[start] === str[end]){ start ++; end --; }else{ return false } } return true; };
프로젝트 시작전에 항상 적용시키는 CSS reset코드이다. Andybell의 것을 약간 변형시켰다. * { margin: 0; padding: 0; font: inherit; color: inherit; } *, :after, :before { box-sizing: border-box; flex-shrink: 0; } :root { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.5; overflow-wrap: break-word; -moz-tab-size: 4; tab-size: 4; overflow-x: hidden;..