Vue Query 이용해서 서버 상태 관리 하기

Vue Query 란?Vue 에서 비동기 데이터를 fetch, update를 하고 데이터를 캐싱 처리 할 수 있는 훅을 가진 라이브러리입니다.React Query 를 기반으로 만들어졌습니다. React Query - 비동기 상태 관리 라이브러리 알아보기React Query란? React Query는 비동기 상태 관리 라이브러리입니다. React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다. React Query 장점 1. 적은 보일러 플레이트 코드 2. 캐싱 3.powerku.tistory.com장점 Vue에서는 주로 Vuex를 이용하여 전역 상태 관리를 클라이언트에서 하였습니다.하지만, 서버에서 받은 데이터의 상태를 관리할 수 있는 방법이 없었습니다. 서버에서 받은 데이터 변..

• format_list_bulleted Develop/Vue
• · 2024. 5. 18.
• textsms

Nuxt Universal Rendering, Hydration 이란?

Nuxt에는 여러 가지 렌더링 모드가 있습니다.Universal Rendering , Client-side Rendering, Hybrid Rendering Universal Rendering일반적으로 Nuxt에서 기본적으로 렌더링 되는 방법입니다. url이 요청이 되면 서버에서 Vue.js 코드를 실행하여 화면에 보일 HTML 문서를 구성합니다.클라이언트에서는 사용되어지는 이벤트, 페이지 전환 등 동적으로 움직여야 할 자바스크립트 코드를 로드합니다. 이러한 과정을 정적인 페이지를 동적인 페이지로 전환하는 것을 Hydration (수화)라고 합니다. 장점서버에서 코드를 실행하여 HTML 문서를 구성하여 내려주니, 빠르게 접근이 가능하고 검색 엔진 최적화에 좋습니다. Hydration 과정Hydration..

• format_list_bulleted Develop/Nuxt
• · 2024. 5. 11.
• textsms

NuxtLink 사용법, 반드시 사용해야하는 이유

란?NuxtLink 는 Nuxt 프레임워크에서 Vue의 와 태그를 대체해서 사용할 수 있는 컴포넌트 입니다.지능적으로 내부링크인지, 외부링크인지 파악합니다.Nuxt2 에서는 내부링크만 사용 가능하였지만, Nuxt3 부터 외부링크도 사용이 가능하게 되었습니다. 반드시 사용해야 하는 이유내부링크의 경우에는prefetching 기능으로 미리 해당 페이지에 대한 정보를 가지고 와서화면이 이동하게 되면 빠르게 다음 페이지로 넘어갈 수 있도록 합니다.이러한 기능으로 사용자 경험을 최적화 합니다. 현재 화면에 표시되지 않고, 숨어있으면 다음 페이지의 정보를 로드하지 않고, 스크롤로 내려서 화면에 보이는 순간데이터를 가지고 오는 아주 똑똑한 녀석입니다. 반대로 외부링크의 경우에는 a tag rel 속성을 지정합니다..

• format_list_bulleted Develop/Nuxt
• · 2024. 5. 9.
• textsms

Nuxt - 컴포넌트 계층 app.vue, pages, components, layouts

Nuxt에서는 여러 컴포넌트 계층을 사용합니다.이러한 컴포넌트 계층을 사용하면 사이트의 UI 개발을 좀 더 쉽고 빠르게 구현할 수 있습니다. app.vue기본적으로 진입점(entry point)입니다.사이트의 모든 경로에 대한 컨텐츠를 렌더링 합니다. 기본 사용법 Hello World! Page 디렉터리 사용할 때  Components재사용 가능한 UI 컴포넌트들을 저장합니다. (ex, button, header...)따로 명시적으로 import 없이 자동으로 가져올 수 있는 특징이 있습니다.| components/--| AppHeader.vue--| AppFooter.vue Pages페이지 컴포넌트들을 표시합니다.페이지 폴더 내에 있는 파일들을 각각 다른 경로를 나타냅니다.app.v..

• format_list_bulleted Develop/Nuxt
• · 2024. 5. 5.
• textsms

카카오 애드핏 첫 수익 인증 입금일 출금 방법

카카오 애드핏 첫 수익을 받았습니다. 카카오 애드핏은 상대적으로 구글 애드센스 보다 승인 받기가 쉬워서 많은 분들이 처음에 사용합니다.하지만, 카카오 애드핏의 경우에 클릭 당 단가가 구글 애드센스보다는 낮아서 큰 수익을 얻기는 힘듭니다. 카카오 애드핏 출금 방법카카오 애드핏은 5만원 이상 부터 출금이 가능합니다수익금이 5만원이 넘어가게 되면 지급 요청을 할 수 있습니다 매월 21일~28일 지급을 신청할 수 있고,다음달 20일에 입금이 됩니다. 카카오 애드핏 수익 인증최근 일이 바빠서 별 생각 없이 있다가, 22일 11시에 입금이 되었습니다.카카오 애드핏 첫 정산인 만큼 아주 기쁘네요 하지만 카카오 애드핏의 경우 세금을 떼고 줍니다.약 1300원 정도 원천 징수 유형으로 과세를 하고 정산금을 입금해주네요

• format_list_bulleted 일상/블로그
• · 2024. 4. 30.
• textsms

Nuxt 프로젝트 설정하기

1. Node 설치하기 Nuxt.js 프레임워크를 설치하기 위해서는 node 18 버전 이상 설치가 필요합니다. https://nodejs.org/en Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 개발 툴 설치하기 Nuxt.js 를 사용하기 위해서는 개발 툴이 필요한데, Nuxt에서는 VS Code 를 추천하고 있습니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefin..

• format_list_bulleted Develop/Nuxt
• · 2024. 4. 23.
• textsms

Nuxt 특징 기능 소개

Nuxt.js 는 현업에서도 아주 많이 사용하고 있는 프레임워크 중 하나입니다. Nuxt 란?Vue를 이용한 풀스택 프레임워크 입니다.풀스택 웹사트이를 개발 하기 위해서는 단순히 UI 뿐만 아니라,Data Fetch, SSR, Route 등 많은 것을 신경써야하지만Nuxt.js 를 사용하면 이 모든 것을 직관적으로 빠르게 개발을 할 수 있습니다. Nuxt 기능라우팅파일 기반 라우팅으로, Vue를 이용하면 Vue-router를 이용하여 매번 동일한 코드를 반복하여 작성해야 하지만,Nuxt에서는 파일만으로 라우팅 기능을 구현할 수 있습니다.코드 분할Nuxt.js 초기 애플리케이션 로딩 시에 자동으로 필요한 코드만 가져오도록 하여 초기 로딩속도 개선 향상에 도움을 줍니다.SSR기본적으로 서버가 내장되어있어서,..

• format_list_bulleted Develop/Nuxt
• · 2024. 4. 22.
• textsms

라이브러리와 프레임워크란? library, framework

개발 중에 "OO 라이브러리가 있어서 사용했습니다". "이번 개발에서는 OO 프레임워크를 사용했습니다." 등 라이브러리와 프레임워크는 자주 사용하는 용어 입니다. 네이버 사전 정의 라이브러리 library 컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것. 언제든지 자유롭게 이용할 수 있도록 구성되어 있다. 프레임워크 framework 어떤 일에 대한 판단이나 결정 따위를 위한 틀. ⇒규범 표기는 미확정이다. 라이브러리와 프레임워크 라이브러리와 프레임 워크의 공통점 재사용한 가능한 코드의 모음입니다. 라이브러리 라이브러리는 개발자가 언제든지 필요에 따라서 설치하고 자유롭게 사용할 수 있습니다. ex) react, vue, 날짜 라이브러리, 차트 라이브러리 등 프레임워크 프레임워크에서 기본..

• format_list_bulleted Develop/etc
• · 2024. 4. 22.
• textsms

자바스크립트 - map 함수에서 비동기 함수 사용하기 async, Promise.all

map 함수에서 비동기 사용하기 async function asynFunction(id) { const res = await fetch('https://dummyjson.com/products/${id}'); const data = await res.json(); console.log(data); return data } const array = [1, 2, 3, 4, 5]; const userList = array.map(async (id) => await asyncFunction()); console.log(userList); 위와 같이 map 함수에서 비동기 함수를 호출하게 되면 아래와 같이 데이터의 결과 값들이 아니라 Promise 객체가 반환 됩니다. await 의 경우에는 promise 객체는..

• format_list_bulleted Develop/JavaScript
• · 2024. 4. 19.
• textsms

자바스크립트 - 재귀 함수란? 사용하는 이유, 주의 사항

재귀 함수(recurtion) 란? 자기 자신을 호출하는 함수를 재귀 함수라고 합니다. factorial 함수 예시 facotrial 함수는 특정 숫자를 넣으면 그 값이 0이 되기 전까지 계속 곱셈을 하는 함수 입니다. 반복문 function factorial(num){ let total = 1; for(let i = num; i > 1; i--){ total *= i } return total; } 재귀 함수 function factorial(num){ if(num === 1) return 1; return num * factorial(num-1); } 재귀 함수를 사용하는 이유 자바스크립트에서 JSON.parse, JSON.stringfy 함수, 또는 getElementById 함수 등은 재귀 함수로..

• format_list_bulleted Develop/자료구조 & 알고리즘
• · 2024. 4. 10.
• textsms