반응형
자바스크립트에서 객체를 사용하다고 보면 key 값을 변수로 사용하고 싶을 때가 있습니다.ES2015 문법 부터는 쉽게 객체의 key 값을 변수로 선언하여 사용할 수 있습니다. 객체 초기화 하기일반적으로는 아래와 같이 초기화 할 수 있습니다.var user = { name: 'superman', age: '23', job: 'developer'} 객체 초기화 (약식 문법)객체에 프로퍼티명을 약식으로 만들면 객체 property 값을 본인이 원하는 값으로 선언할 수 있습니다.const name = 'superman';const age = 23;const job = 'developler';var user = { name, age, job } Computed Property 사용해서 객체 속성 변수..
객체, 배열 구조 분해 사용법객체, 배열 구조 분해 할당을 사용하면 객체, 배열 내에 있는 값들을 쉽게 사용할 수 있습니다.const [a, b] = [1, 2]// a: 1, b: 2const { name, age } = { name: 'superman', age: 25 }// name: 'superman', age: 25 구조 분해 Rest Parameters 기능 사용하여 객체 Property 삭제 하기Rest Parameters란? 아래와 같이 뒤에 있는 남은 매개 변수를 한번에 받을 수 있는 방법입니다.function foo(...a) { console.log(a)}foo(1, 2, 3, 4) // [1, 2, 3, 4] 객체 구조 분해 Rest Parameters를 사용하면 객체의 키를..
프론트엔드 개발을 하면 많은 오류를 만날 수 있습니다. 서버에서 오류가 날 때,Vue 렌더링 할 때,클라이언트에서 오류 등개발 중 또는 Product 시점에서도 오류가 나타날 수 있습니다. 오류가 나타날 것을 예상해 적절하게 처리를 해준다면, 사용자도 개발자도 더 편리하게 사이트를 사용할 수 있습니다. Nuxt에서 오류처리 하는 방법에 대해서 알아보도록 하겠습니다. 오류 처리하는 방법치명적 오류 ▶ 전체 페이지가 오류 페이지로 전환비치명적 오류 ▶ 오류가 발생 createError()사용법 const { data } = await useFetch(`/api/products`)if (!data.value) { throw createError({ statusCode: 404, statusMessage: '..
한강이나 서울숲에서 연을 날리시는 분들을 종종 볼 수 있습니다.하늘 저 높이 나는 연을 보면 신기하기도 하고,그래서 이번에 직접 연을 날려보기 위해서 연을 구매하였습니다. 연을 들고 집 근처 운동장으로 가서 연을 날리려고 했습니다만,한강에서 날리시던 분들은 아주 쉽게 연을 멀리 날리는 것처럼 보였지만연 날리기는 것은 결코 쉽지 않았습니다. 50~100번을 날리면10번 정도는 어느 정도 뜨다가 떨어지고,1~2번 정도 100m 이상 날아가는 정도 였습니다. 연 날리기에 중요한 것연 날리기 3일 차이지만,연을 날릴 때 중요한 것은 바람, 장비(연, 얼레), 기술(얼레질)입니다. 일단 장비가 좋아야 합니다.연이 잘 나는 연이어야 하고 실을 빠르게 풀고 빠르게 감을 수 있는 좋은 얼레가 있어야 합니다. 바람에 따..
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를 이용하여 전역 상태 관리를 클라이언트에서 하였습니다.하지만, 서버에서 받은 데이터의 상태를 관리할 수 있는 방법이 없었습니다. 서버에서 받은 데이터 변..
Nuxt에는 여러 가지 렌더링 모드가 있습니다.Universal Rendering , Client-side Rendering, Hybrid Rendering Universal Rendering일반적으로 Nuxt에서 기본적으로 렌더링 되는 방법입니다. url이 요청이 되면 서버에서 Vue.js 코드를 실행하여 화면에 보일 HTML 문서를 구성합니다.클라이언트에서는 사용되어지는 이벤트, 페이지 전환 등 동적으로 움직여야 할 자바스크립트 코드를 로드합니다. 이러한 과정을 정적인 페이지를 동적인 페이지로 전환하는 것을 Hydration (수화)라고 합니다. 장점서버에서 코드를 실행하여 HTML 문서를 구성하여 내려주니, 빠르게 접근이 가능하고 검색 엔진 최적화에 좋습니다. Hydration 과정Hydration..
란?NuxtLink 는 Nuxt 프레임워크에서 Vue의 와 태그를 대체해서 사용할 수 있는 컴포넌트 입니다.지능적으로 내부링크인지, 외부링크인지 파악합니다.Nuxt2 에서는 내부링크만 사용 가능하였지만, Nuxt3 부터 외부링크도 사용이 가능하게 되었습니다. 반드시 사용해야 하는 이유내부링크의 경우에는prefetching 기능으로 미리 해당 페이지에 대한 정보를 가지고 와서화면이 이동하게 되면 빠르게 다음 페이지로 넘어갈 수 있도록 합니다.이러한 기능으로 사용자 경험을 최적화 합니다. 현재 화면에 표시되지 않고, 숨어있으면 다음 페이지의 정보를 로드하지 않고, 스크롤로 내려서 화면에 보이는 순간데이터를 가지고 오는 아주 똑똑한 녀석입니다. 반대로 외부링크의 경우에는 a tag rel 속성을 지정합니다..
Nuxt에서는 여러 컴포넌트 계층을 사용합니다.이러한 컴포넌트 계층을 사용하면 사이트의 UI 개발을 좀 더 쉽고 빠르게 구현할 수 있습니다. app.vue기본적으로 진입점(entry point)입니다.사이트의 모든 경로에 대한 컨텐츠를 렌더링 합니다. 기본 사용법 Hello World! Page 디렉터리 사용할 때 Components재사용 가능한 UI 컴포넌트들을 저장합니다. (ex, button, header...)따로 명시적으로 import 없이 자동으로 가져올 수 있는 특징이 있습니다.| components/--| AppHeader.vue--| AppFooter.vue Pages페이지 컴포넌트들을 표시합니다.페이지 폴더 내에 있는 파일들을 각각 다른 경로를 나타냅니다.app.v..
카카오 애드핏 첫 수익을 받았습니다. 카카오 애드핏은 상대적으로 구글 애드센스 보다 승인 받기가 쉬워서 많은 분들이 처음에 사용합니다.하지만, 카카오 애드핏의 경우에 클릭 당 단가가 구글 애드센스보다는 낮아서 큰 수익을 얻기는 힘듭니다. 카카오 애드핏 출금 방법카카오 애드핏은 5만원 이상 부터 출금이 가능합니다수익금이 5만원이 넘어가게 되면 지급 요청을 할 수 있습니다 매월 21일~28일 지급을 신청할 수 있고,다음달 20일에 입금이 됩니다. 카카오 애드핏 수익 인증최근 일이 바빠서 별 생각 없이 있다가, 22일 11시에 입금이 되었습니다.카카오 애드핏 첫 정산인 만큼 아주 기쁘네요 하지만 카카오 애드핏의 경우 세금을 떼고 줍니다.약 1300원 정도 원천 징수 유형으로 과세를 하고 정산금을 입금해주네요
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..