웹 개발을 하다 보면 localStorage를 마주하게 된다.Vue 프로젝트에서도 새로고침 후에도 상태를 유지하거나, 사용자 설정을 저장하는 용도로 많이 사용된다.하지만 편하다고 아무 데나 쓰면 보안이나 사용자 경험 측면에서 큰 문제가 될 수 있다.이 글에서는 localStorage의 개념과 실제로 어떻게, 언제 써야 안전한지 정리해본다. localStorage란?브라우저가 제공하는 클라이언트 측 저장소key-value 형태로 데이터를 저장하며, 모든 데이터는 문자열로 저장됨동기 API이며, 새로고침하거나 브라우저를 꺼도 데이터는 유지됨localStorage.setItem('nickname', 'seonho')localStorage.getItem('nickname') // 'seonho' localS..

배열 관련 함수는 자바스크립트에서 자주 사용되는 기능입니다.특히 Vue 프로젝트에서는 배열을 조작하는 일이 많기 때문에, 배열에서 자주 쓰는 함수들을 잘 알고 있으면 많은 도움이 됩니다.이번에는 배열에서 사용되는 다양한 함수들을 정리하여, 자바스크립트를 활용하는 데 필요한 핵심 배열 함수들을 소개하겠습니다. 자바스크립트에서 배열을 다룰 때 유용한 함수들은 크게 배열을 순회하거나, 배열의 요소를 추가하거나 제거하는 함수들입니다.또한 배열을 필터링하거나 정렬하는 함수들도 자주 사용됩니다. 아래에서는 이런 배열 관련 함수들을 정리해보겠습니다. 1. 배열 순회 함수forEach()forEach()는 배열의 각 요소에 대해 콜백 함수를 실행합니다. 주로 배열을 순회할 때 사용됩니다. 리턴 값이 없기 때문에, 순회..

Composition API에서 상태 관리를 하다 보면 ref, reactive만큼 자주 쓰는 게 computed()다.이 함수는 말 그대로 계산된 값을 정의할 때 사용한다. 단순 계산 이상으로 의존하는 값이 변경될 때 자동으로 갱신되는 특성이 있어서, 상태 관리에 큰 도움이 된다.computed()는 어떤 역할을 할까?computed()는 의존하는 값이 바뀌었을 때만 자동으로 다시 계산되는 반응형 계산 속성이다.Vue 2에서는 computed: {}로 정의했지만, Vue 3 Composition API에서는 함수형으로 정의할 수 있다.import { ref, computed } from 'vue'const count = ref(1)const double = computed(() => count.valu..

Vue를 쓰다 보면 이라는 태그를 여기저기서 많이 보게 된다.HTML에서도 은 있지만, Vue에서의 용도는 조금 다르다.Vue에서는 "조건부 렌더링이나 반복 렌더링에서 여러 요소를 묶는 용도"로 사용한다.이 필요한 이유Vue 컴포넌트에서 v-if나 v-for는 기본적으로 하나의 태그에만 적용할 수 있다.하지만 때때로 조건에 따라 여러 개의 태그를 한꺼번에 렌더링하고 싶을 때가 있다.잘못된 예 (Vue가 오류냄)로그인됨환영합니다위 코드는 "로그인됨"은 조건부지만, "환영합니다"는 항상 나오는 구조라 의도한 UI가 아니다.올바른 예 - 으로 묶기 로그인됨 환영합니다은 실제 DOM에 렌더링되지 않고, 내부의 태그만 출력된다.조건문에 여러 태그를 그룹으로 적용할 때 필수적이다. 반복 렌더링(v-for)도 마..

Vue 2 또는 Vue 3 초기 버전에서는 컴포넌트 로직을 작성할 때 보통 이렇게 사용했다. {{ count }}이전 방식은 setup() 함수에서 변수를 정의하고, 다시 return으로 템플릿에 노출해줘야 했기 때문에 구조가 길어지는 단점이 있었다. 또한 export default 구문을 항상 사용해야 했다.Vue 3에서는 {{ count }}이제는 setup() 함수도, return도, export default도 작성할 필요가 없다. {{ msg }}별도의 setup() 함수 없이도 최상위에서 선언한 변수나 함수는 에서 바로 사용할 수 있다. 그리고 return도 생략해도 된다.props와 emits 사용하기기존 방식에서는 props와 emits를 명시적으로 옵션에 선언했지만,  또..

Vue는 대부분의 DOM 조작을 자동으로 처리해준다. 하지만 때때로 DOM 요소에 직접 접근해야 할 상황이 생기기도 한다.예를 들어 요소에 포커스를 주거나, 특정 버튼을 클릭하는 등의 일이 그 예다.이럴 때 Vue에서는 ref라는 특수 속성을 사용할 수 있다.기본 사용법 설명ref="inputRef": 템플릿에서 DOM 요소에 참조 이름을 붙임inputRef = ref(null): 해당 이름과 동일한 ref를 선언onMounted(): DOM이 렌더링된 후에 접근 가능inputRef.value는 실제 DOM 엘리먼트를 가리킴DOM 요소 값 조작하기onMounted(() => { inputRef.value.value = 'Hello, Vue!';});위처럼 .value.value를 사용하면 실제 에 ..