새내기 개발자의 배우며 코딩하는 블로그

Vue 3의 공식 상태 관리 라이브러리로 채택된 Pinia는 기존의 Vuex를 대체하거나 함께 사용할 수 있는 경량의 모던한 상태 관리 도구입니다. Vuex보다 더 직관적이고, TypeScript와의 궁합이 좋으며, 학습 곡선도 완만하다는 장점 덕분에 많은 Vue 개발자들이 Pinia로 빠르게 전환하고 있습니다.1. Pinia의 탄생 배경Vue 2 시절의 대표 상태 관리 도구는 Vuex였습니다. 하지만 Vuex는 Boilerplate가 많고 TypeScript 지원이 미흡해 유지보수가 어려웠습니다. 이를 해결하고자 Vue 팀은 Composition API와 더 잘 어울리는 상태 관리 도구를 고민했고, 그 결과가 바로 Pinia입니다.💡 Pinia는 pineapple(파인애플)의 줄임말처럼 들리지만, 실..

안녕하세요. 새내기 개발자입니다. 공부하면서 정리하는 글로 틀린 부분은 언제나 댓글로 환영입니다!1. 호이스팅(Hoisting)이란?호이스팅(Hoisting)이란 JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 저장되는 현상을 의미합니다. 즉, 선언된 변수와 함수가 코드의 상단으로 끌어올려지는 것처럼 동작합니다.하지만, 실제로 코드가 이동하는 것은 아니며, JavaScript 엔진이 실행 전에 변수와 함수의 선언을 먼저 처리하는 과정에서 발생하는 현상입니다.2. 변수 호이스팅var 키워드의 호이스팅var 키워드를 사용하여 변수를 선언하면 변수 선언만 호이스팅되고, 할당된 값은 호이스팅되지 않습니다.console.log(name); // undefinedvar name = "John";..

안녕하세요. 늅입니다. Vue.js로 글로벌한 웹 애플리케이션을 개발할 때 필수적으로 고려해야 하는 것이 다국어 지원(i18n, Internationalization) 입니다.Vue에서는 vue-i18n 라이브러리를 활용하여 다국어 기능을 쉽게 구현할 수 있습니다. 이번 글에서는 Vue 3에서 vue-i18n을 활용하여 다국어 지원을 구현하는 방법을 단계별로 설명하겠습니다.1. vue-i18n 설치 및 설정Vue 프로젝트에서 vue-i18n을 사용하려면 먼저 패키지를 설치해야 합니다.npm install vue-i18n설치 후, 국제화 관련 설정을 진행해야 합니다.1.1 i18n.js 파일 생성src 폴더 내에 i18n.js 파일을 생성하여 다국어 설정을 관리합니다.import { createI18n }..

안녕하세요. 뉴비 블로거입니다. 오늘의 글은 storybook 입니다. 프론트엔드 개발에서 UI 컴포넌트의 재사용성과 테스트 가능성을 극대화하는 방법 중 하나는 Storybook을 사용하는 것입니다. Storybook은 독립적인 환경에서 UI 컴포넌트를 개발, 문서화 및 테스트할 수 있도록 돕는 도구입니다.이 글에서는 Storybook의 개념, 주요 기능, 설치 및 사용 방법, 그리고 활용 팁에 대해 다뤄보겠습니다.📌 Storybook이란?Storybook은 UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있도록 지원하는 개발 도구입니다. React, Vue, Angular 등 다양한 프레임워크를 지원하며, 컴포넌트를 개발하면서 실시간으로 확인하고, 변경 사항을 즉시 반영할 수 있습니다.🎯 Story..

안녕하세요. 새내기 개발자입니다. 공부하면서 정리하는 글로 틀린 부분은 언제나 댓글로 환영입니다! 자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어이며, 타입스크립트(TypeScript)는 자바스크립트를 기반으로 한 정적 타입을 지원하는 언어입니다. 이번 글에서는 자바스크립트와 타입스크립트의 차이점, 장단점, 그리고 어떤 상황에서 적절하게 사용해야 하는지 살펴보겠습니다.🔹 1. 자바스크립트(JavaScript)란?**JavaScript(이하 JS)**는 웹 브라우저에서 실행되는 대표적인 동적 프로그래밍 언어입니다.클라이언트(프론트엔드)와 서버(백엔드) 모두에서 사용되며, 인터프리터 방식으로 동작합니다.✅ 주요 특징동적 타입(Dynamically Typed)인터프리터 언..