Vue2에서 Meta Title를 테스트 해보자. Vue 2.6.12와 jest 26.6.3, vue-meta 2.4.0 버전을 기준으로 해당 글은 작성되었습니다. 🧐 Vue-meta란? Vue 전용 HTML MetaData 관리하는 툴로써, 페이지에 Meta 데이터를 쉽게 추가할 수 있습니다. // Component.vue { metaInfo: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ] } } 위에 코드에서 해당 MetaData를 지정하면 아래와 같이 HTML 태그로 랜더가 되는 방식이라고 생각하시면 됩니다. Title이란? { metaInfo: { title: ..
Frontend
JavaScript Code Styling Best Practices — Maximum Function Length, Callbacks, Parameters JavaScript는 매우 관대한 언어입니다. 실행은 되지만, 오류가 있는 코드를 작성하기에 너무 쉽습니다. 이 글에서는 함수의 길이를 줄이고, 깊은 콜백 중첩을 제거하고 함수에 포함해야 하는 매개변수의 수에 대해서 살펴보도록 하겠습니다. Maximum Function Length (최대 함수 길이) 함수는 최대한 짧아야 좋습니다. 20 ~ 30줄이 함수의 최대 길이라고 생각합니다. 한가지만 수행해야 하며, 그 이상 함수가 수행할 필요는 없습니다. 길이를 줄이면 읽기가 더 쉬워지고, 길어지면 읽기가 어려워집니다. 긴 함수의 내용은 따르기가 어렵습니다..
Fragments? 란? React 16.2부 터 Fragements를 지원해 DOM에 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있습니다. render() { return ( ); } Fragments란? 일반적으로 자식 목록을 반환하는 용도로 사용합니다. 이전에는 아래와 같이 div 또는 span 을 사용해 자식 요소를 래핑하였습니다. render() { return ( // Extraneous div element :( Some text. A heading More text. Another heading Even more text. ); } 위와 같은 방식에서 16.0 버전에서는 요소 배열을 반환하는 방식을 지원하기도 하였습니다. render() { return [ "Some text.", A..
Learn Javascript Reduce method with 10 examples reduce 메서드는 배열의 모든 항목에 함수를 적용하고 시작점에서 반복적으로 결과를 누족한 다음 단일 값 또는 객체를 반환합니다. 시작 값을 지정할수 있으며, 지정하지 않으면 배열의 첫번째 값을 사용합니다. 합과 곱셈 ∑의 D∏ // 합 [3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i); // 초기값 없이 사용 [3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i, 5 ); [3, 5, 4, 3, 6, 2, 3, 4].reduce(function(a, i){return (a + i)}, 0 ); // 곱셈 [3, 5, 4, 3, 6, 2, 3, 4]..
Vue에서 TypeScript로 Timer의 Leading Zeros를 구현해보자. Vue에서 Javascript로 타이머를 구현해야 할 일이 생기면서 Leading Zeros까지 구현해야 했습니다. 실제 타이머의 포맷은 00:00:00 과 같이 나와야 하는 상황이였습니다. 이와 관련해서 어떻게 구현했는지 간략하게 공유해보려고 합니다. 주의사항 해당 코드는 Vue2 + Composition API를 쓴다는 전제하에 작성되었습니다. 관련 코드를 제외한 나머지에 대한 코드는 작성하지 않습니다. Timer 구현 import { computed } from '@vue/composition-api'; const useTimer = () => { const timer = ref(0); const hour = com..
번형 스타일 제공자를 사용해 변형 스타일를 공유 많은 프로젝트 특히 대규모 프로젝트에는 컴포넌트들의 모양과 느낌에 대한 가이드 역할을 하는 디자인 시스템이 있습니다. 아래 예와 같이 Figma에서 다른 버튼 번형에 대한 디자인들을 볼 수 있습니다. 웹사이트의 주요 액션에 대한 버튼은 primary, secondary와 같이 다양한 번형을 가질수 있습니다. 또한 danger와 같이 사용자의 액션에 대해 위험을 나타내는 번형도 있습니다. 이러한 번형을 구현하는 방법은 여러가지가 있습니다. CSS 변수나 모듈을 사용해 깔끔하고 효과적으로 이를 관리할 수 있는 방법을 공유해보도록 하겠습니다. 디자인 시스템 기반으로 번형이 있는 Button, Tag 컴포넌트를 생성하는 방법 CSS 변수나 모듈을 활용해 구성 요소..
7 Powerful JavaScript Shorthands That You Should Know(알아야 할 7개의 강력한 JavaScript의 단축 표기법) 코딩 속도를 올리기 위해 사용할 수 있는 유용한 JavaScript의 단축 표기법입니다. 자바스크립트는 요즘 매우 강력한 프로그래밍 언어입니다. 자바스크립트로 우리는 할 수 있는 것들이 많이 있습니다. 그 외에도 자바스크립트에는 많은 유용한 도구, 프레임워크, 라이브러리를 발견할 수 있는 거대한 생태계가 있습니다. 자바스크립트는 개발자의 삶을 쉽게 만들어 주는 많은 강력한 기능과 도구들이 있습니다. 문법에는 자바스크립트 코드 빠르게 작성하거나 라인수를 줄이여서 사용할 수 있는 많은 단축 표기법들이 포함되어 있습니다. 특히 최신 ECMAScript 사..
TypeScript를 이용해 Jest 테스트를 진행해보자. 서론 간단한 node 빈 프로젝트가 있다고 합시다. (package.json만 있는 프로젝트) Jest는 TypeScript를 지원하는 단위 테스트 도구이기 떄문에 사용하기 좋습니다. 필요한 모듈 설치 npm i jest @types/jest ts-jest typescript -D jest 단위 테스트 프레임워크 @types/jest jest types ts-jest jest의 ts 모듈 typescript 타입 스크립트 모듈 Jest 설정 jest.config.js를 만들어 아래와 같이 설정한다. module.exports = { "testMatch": [ "**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec..
만약 Google의 PageSpeed Insights나 Google Lighthouse를 사용해봤다면, 아래와 같은 웹페이지의 성능 평가를 봤을 것이다. 어떻게 하면 웹사이트의 속도가 향상될 수 있는지에 대한 진단의 통계들을 받았을 것이다. 쉽게 수정되는 것, 사용하지 않는 파일, 느리거나 많은 공간을 차지하는 요청들을 볼 수 있어 몇몇 진단들을 꽤 유용할 수 있습니다. 메인 쓰레드 작업, 자바 스크립트 실행 시간와 같은 것을 보여주는 진단들은 문제점을 보여주지만, 실제 문제를 해결하기 위해 도움이 되지는 않습니다. 이 글은 Vue Application이 가능한 빠르게 동작할 수 있도록 몇가지 단계를 소개합니다. 단계들을 통해 무엇을 고쳐야 할지 추측하는 것이 아니라 정확히 알 수 있을 겁니다. 1. 필..
DOM(Document Object Model) VS BOM(Browser OBject Model) 📝 DOM(Document Object Model) 문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface입니다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 문서 구조 및 스타일, 내용 등을 변경할 수 있게 도와줍니다. 간단하게 말하자면 프로그래밍 언어(예를 들어 JavaScript)가 구조에 접근할 수 있는 방법을 제공해 문서 구조나 스타일, 내용을 변경할 수 있게 도와주는 모델입니다. JavaScript는 어떤 작업을 할 수 있게 해주..
