vue

카카오 개발자 애플리케이션 등록 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 난 지난번에 해 놓은 게 있어서 사이트 도메인 주소만 바꿔줬다.    [ API ] 카카오 오픈 API 사용하기 / Postman 통한 요청 확인카카오 API 사용하기step 1. 카카오 developers 사이트 이동 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공zodev.tistory.com   중요한 건 앱 키이 중에서도 Javascript 키를 사용..

Nuxt Layout 공식 문서 참고 layouts/ · Nuxt Directory StructureNuxt provides a layouts framework to extract common UI patterns into reusable layouts.nuxt.com  레이아웃을 쓰지 않을 페이지에는 definePageMeta를 사용해서 layout을 false 처리 해주면 해당 페이지에는 레이아웃이 제외된다.definePageMeta({ layout: false,});   근데 만약 이게 적용이 안 된다면 NuxtLayout에 적용되어 있는 레이아웃 파일 이름을 확인해보자. 만약 이처럼 layout에 특정 이름을 적용해줬다면 위의 defindePageMeta 코드가 작동하지 않을 것이다. 그렇기 ..

Vue 스타일 가이드  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org  프로젝트 버전업을 하면서 Vue의 스타일 가이드를 참고하여 코딩 컨벤션을 정했다.가장 중점적으로 생각한 것은 코딩 문법과 파일 이름 설정이다. (변수명은 엔진과도 맞춰야 했기 때문에 비교적 유동적으로 고려했다.)  1. prettier 설정 통해 코드 컨벤션 강화 { "semi": true, // 문장 끝에 세미콜론 사용 "tabWidth": 2, // 탭 너비는 2칸 "bracketSpacing": true, // 중괄호 안에 양쪽 공백 생성 "trailingComma": "all..

interface Props { myObj?: { name: string, icon: string };} const props = withDefaults(defineProps(), { myObj: { name: '', icon: '' },}); optional props를 작성하면 초기값을 설정해주는 것이 권장된다.그러나 이때 객체 타입의 props의 초기값을 저렇게 단순하게 설정하게 되면 eslint 에러가 나게 된다. Type of the default value for 'myObj' prop must be a function. 기본값 객체는 공유된다.즉, { name: ‘’, icon: ‘’ } 를 여러 컴포넌트 인스턴스에서 동일하게 참조하기 때문에, 한 곳에서 해당 객체가 바뀌면 모든 곳에서 변..

기본 적용설치npm install pinia @pinia/nuxt  configexport default defineNuxtConfig({ modules: [ "@pinia/nuxt", ],})  storestores 디텍토리 생성 후 하위 store 파일 생성(nuxt는 stores 폴더 내에 정의된 모든 store을 auto imports 한다.)export default defineStore("userStore", () => { const user = ref({ name: "Yong", id: 1, number: "123", }); return { user };});  사용 변경 ➡ {{ user.name }}  그러나 이 경우 새로고침 시..

ESLint코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구JS코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 (에러 표시)다양한 방식으로 구현할 수 있는 코드 방식을 일관성있게 구현할 수 있도록 잡아준다.처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다. ESLint Module - Nuxt ESLintAll-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check along side the dev..

computed()반응형 데이터를 포함하는 복잡한 논리를 표현할 때 사용하는 계산된 속성 계산된 ref를 반환하기 때문에 computed 값 또한 .value를 통해 접근한다. (템플릿 표현식에서는 .value 없이 참조 가능) computed는 해당 computed 값이 의존 중인 반응형 데이터 ref, reactive 등의 변경을 자동으로 추적한다. computed는 의존된 반응형을 기반으로 캐시된다.const scores = ref([100, 80, 88, 50, 70, 90, 96])const average = computed(() => { const sum = scores.value.reduce((sum, item) => (sum += item), 0) return sum / scores.v..

어떤 것을 사용해야 할 지 고민하다가 정리했다. 공식 문서에서 분명하게 잘 설명해줬기 때문에 이를 좀 더 확실히 기억하고자 테스트해봤다. v-ifv-if 문의 경우 조건의 성립(True / False) 여부에 따라 요소의 렌더링 여부가 결정된다. v-showv-show의 경우 조건 결과와 관계없이 태그를 렌더링하지만, False의 경우 display: none 처리를 통해 보이지 않게 한다. 결론적으로,→ 보였다/ 안 보였다 빈도가 많으면 v-show→ 조건이 여러 개면 v-if (v-else-if, v-else 등 사용 가능)

reactive()reactive()는 객체 자체를 반응형으로 만든다. reactive()의 반환 값은 원본 객체를 재정의한 프록시(proxy)이다.const raw = {}const proxy = reactive(raw)// 반응형으로 재정의 된 것은 원본과 같지 않습니다.console.log(proxy === raw) // false 원본 객체는 반응형이 아니고, 프록시만 반응형이기 때문에 객체를 Vue의 반응형 시스템으로 작업할 때는 상태를 재정의한 프록시만 사용하는 것이 가장 좋다. 프록시에 대한 일관된 접근이 보장된다.// 객체를 reactive() 한 반환 값과 프록시는 동일합니다.console.log(reactive(raw) === proxy) // true// 프록시를 reactive()한..

watch Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org하나 이상의 반응형 데이터 소스를 감시하고, 소스가 변경되면 콜백 함수를 호출한다.watch()는 기본적으로 게으르기(lazy) 때문에, 감시된 소스가 변경되었을 때만 콜백이 호출된다. 첫 번째 인자 → 감시될 소스값을 반환하는 getter 함수ref반응형 객체또는 위에 나열한 것들의 배열※ 반응형 객체의 속성(number, string 등)은 감시할 수 없다. 두 번째 인자 → 콜백콜백의 인자변경된 값이전 값사이드 이펙트 클린업 콜백을 등록하기 위한 함수 세 번째 인자(optional) → 옵션 객체immediate: 감시자가 생성되는 즉시 콜백 호출deep: 소스가 객체인 경우, 깊은..