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

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

자바스크립트 - 다중 포인터 패턴 (Multiple Pointer)

다중 포인터 패턴이란? 다중 포인터 패턴은 위치에 해당하는 값 각 조건에 따라서 끝이나, 중간으로 이동하는 패턴입니다. 예시 1 오름 차순으로 정렬된 배열에서 합계가 0인 첫 번째 쌍 구하시오 풀이 1 function sumZero(arr){ for(let i = 0; i < arr.length; i++){ for(let j = i+1; j < arr.length; j++){ if(arr[i] + arr[j] === 0){ return [arr[i], arr[j]]; } } } } sumZero([-4,-3,-2,-1,0,1,2,5]) 이중 for문을 사용하여 해결할 수 있지만, 이렇게 사용하면 시간 복잡성이 O(n2)가 된다. 풀이 2 function sumZero(arr) { var left = 0;..

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

자바스크립트 - 빈도수 세기 패턴 anagram

문제 빈도수 세기- validAnagram 두 개의 문자열이 주어졌을 때, 두 번째 문자열이 첫 번째 문자열의 애너그램인지 확인하는 함수를 작성합니다. 애너그램은 다른 글자의 글자를 재배열하여 형성된 단어, 구 또는 이름입니다. (예시: cinema -> iceman) 그냥 풀이 1 function validAnagram(str1, str2){ if (str1.length !== str2.length) { return false; } str1 = str1.split('').sort((function compare(a, b) { if (a > b) return -1; if (a < b) return 1; return 0; })) str2 = str2.split('').sort((function compar..

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