Object.fromEntries()

문자열에 있는 내용들을 변수의 키로 지정하는 방법이 존재합니다.바로 Object.fromEntries( )입니다. 이는 주어진 배열에서 키-값 쌍을 기반으로 새로운 객체를 생성하는 JavaScript 메서드에요.이 메서드는 ES2019(ES10)에서 도입되었습니다. 바로 사용해봅시다!처음에 key로 사용할 문자열 변수를 생성해 줍시다.const abc = 'a, b, c'; 그 다음 이 문자열을 배열로 만들어 줘야겠죠.abc 변수를 쉼표로 분리하여, 배열로 변환해 줍시다.const keys = abc.split(', ').map(key => key.trim());이렇게 하면, {a, b, c}인 배열이 생성이 됩니다. 이제 이 배열을 사용하여, param이라는 객체를 생성해 줍시다.이 때, Object...

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 11. 14.
• textsms

computed와 methods의 차이

Vue.js에서 자주 쓰이는 computed와 methods를 들어본 적이 있을겁니다.가끔 이 둘 중에서 무엇을 사용해야 할 지 헷갈리는 경우가 있더군요.그래서 정확하게 알고 사용하기 위해 이 둘의 차이가 무엇인 지 알아봅시다. 1. computed (계산 속성)computed는 특정 값이 다른 데이터에 의존해 계산될 때, 사용됩니다.종속된 데이터가 변경될 때에만 계산이 되는 거에요.Vue는 computed 속성을 캐시하기 때문에, 관련된 데이터가 변경되지 않는 한 계산된 값을 재사용해요. 이를 통해 Vue 컴포넌트의 상태에 따라 동적으로 변하는 값을 쉽게 관리하여 성능을 최적화할 수 있어요. 예를 들어봅시다.export default { data() { return { firstName..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 8.
• textsms

router-link와 router-view

Vue.js에도 라우터 기능이 존재합니다. 라우터 기능을 담당하는 컴포넌트는 바로 router-link와 router-view입니다.이 둘은 Vue.js에서 라우터를 사용하여, SPA(Single Page Application)를 구현할 때 사용해요.※ SPA(Single Page Application) : 한 페이지 내에서 URL과 데이터만 변경하며, 화면을 동적으로 갱신하는 웹 애플리케이션 하지만, 이 컴포넌트들을 사용하려면, Vue Router를 설치해야 합니다.(저는 npm을 사용했어요.)npm install vue-router 바로 자세히 알아봅시다. 1. router-linkrouter-link는 Vue Router와 함께 동작하여, 페이지간의 탐색을 쉽게 만들어 줘요.이는 태그 같이 사용자가..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 7.
• textsms

v-if와 v-show의 차이

Vue.js를 사용하면, 디렉티브를 사용한 경험이 있으실 거에요.요소를 조건에 따라 표시하거나 숨기는 디렉티브인 v-if와 v-show는 둘 다 비슷한 기능이라고 생각될 수 있겠지만, 렌더링 방식에서 차이가 있습니다. 그 차이점에 대해 알아봅시다. 1. v-ifv-if는 조건이 true일 때만 해당 요소를 DOM에 추가하고, false일 때는 DOM에서 제거해요.사용자 인증 상태에 따라 요소를 렌더링하는 등 자주 변경되지 않는 조건에 적합합니다.조건이 자주 변경될 경우, 성능이 떨어질 수 있어요. 요소가 추가되거나 제거될 때마다 렌더링 과정이 필요하기 때문입니다. 예를 들어 봅시다. 메시지 전환 보이는 메시지 숨겨진 메시지 isVisible: {{ isVisible }} 위 코..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 5.
• textsms

Grafana 설치 및 실행

Grafana를 설치해보고 실행해 봅시다! 1. 계정 생성우선 먼저, Grafana 공식 홈페이지에 들어가 무료 계정 생성 버튼을 클릭하여 계정을 생성해 봅시다.(Grafana 공식 홈페이지) 그러면 무료 계정을 만들거나 원하시는 방법으로 로그인을 해주세요. 그러면 url과 지역을 설정하게 되는 데, 현재 본인이 거주하고 있는 지역이 없다면, 가장 가까운 지역을 선택해 주세요.입력이 끝나면, Finish Setup 버튼을 클릭해 줍시다. 2. Grafana 설치그럼 이제 Grafana를 설치해 봅시다. (Grafana 설치 페이지)원하는 운영체제를 선택한 뒤, 하단의 Standalone Windows Binaries 밑에 Download the zip file 버튼을 클릭해 주세요. (저는 Window를..

• format_list_bulleted Back-End Study/Grafana
• · 2024. 11. 4.
• textsms

소프트웨어 버전 규칙

소프트웨어나 라이브러리, 프로젝트를 개발하다 보면, 버전을 어떻게 입력하고 업데이트를 해야 하나 고민한 경험이 있을 거에요.저 또한, 그런 고민을 하고 있기에 버전에 관한 규칙을 알 수 있는 소프트웨어 버전 규칙에 대해 알아봅시다! 1. 소프트웨어 버전 규칙소프트웨어 버전 규칙은 SemVer를 따릅니다. 이 때, SemVer는 Semantic Versioning의 줄임말로, SW의 호환성 및 변경 사항을 쉽게 파악할 수 있게 해주는 체계에요. 2. 버전 표기버전 표기는 보통 주버전(Major), 부버전(Minor), 수정버전(Patch)의 세 사지 숫자로 구성되며, 특정 조건에 따라 숫자가 증가해요.(ex: 1.5.9) 2-1. 주버전 (Major Version)주버전은 이전 버전과 호환되지 않는 큰 변..

• format_list_bulleted Computer Science
• · 2024. 11. 1.
• textsms