반응형
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..
Nuxt.js 는 현업에서도 아주 많이 사용하고 있는 프레임워크 중 하나입니다. Nuxt.js 란? Vue를 이용한 풀스택 프레임워크 입니다. 풀스택 웹사트이를 개발 하기 위해서는 단순히 UI 뿐만 아니라, Data Fetch, SSR, Route 등 많은 것을 신경써야하지만 Nuxt.js 를 사용하면 이 모든 것을 직관적으로 빠르게 개발을 할 수 있습니다. Nuxt.js 기능 라우팅 파일 기반 라우팅으로, Vue를 이용하면 Vue-router를 이용하여 매번 동일한 코드를 반복하여 작성해야 하지만, Nuxt에서는 파일만으로 라우팅 기능을 구현할 수 있습니다. 코드 분할 Nuxt.js 초기 애플리케이션 로딩 시에 자동으로 필요한 코드만 가져오도록 하여 초기 로딩속도 개선 향상에 도움을 줍니다. SSR 기..
개발 중에 "OO 라이브러리가 있어서 사용했습니다". "이번 개발에서는 OO 프레임워크를 사용했습니다." 등 라이브러리와 프레임워크는 자주 사용하는 용어 입니다. 네이버 사전 정의 라이브러리 library 컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것. 언제든지 자유롭게 이용할 수 있도록 구성되어 있다. 프레임워크 framework 어떤 일에 대한 판단이나 결정 따위를 위한 틀. ⇒규범 표기는 미확정이다. 라이브러리와 프레임워크 라이브러리와 프레임 워크의 공통점 재사용한 가능한 코드의 모음입니다. 라이브러리 라이브러리는 개발자가 언제든지 필요에 따라서 설치하고 자유롭게 사용할 수 있습니다. ex) react, vue, 날짜 라이브러리, 차트 라이브러리 등 프레임워크 프레임워크에서 기본..
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 객체는..
재귀 함수(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 함수 등은 재귀 함수로..
다중 포인터 패턴이란? 다중 포인터 패턴은 위치에 해당하는 값 각 조건에 따라서 끝이나, 중간으로 이동하는 패턴입니다. 예시 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;..
문제 빈도수 세기- 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..
자바스크립트에서 데이터를 저장할 수 있는 방법 중 객체 또는 배열을 선언하여 여러 데이터를 저장할 수 있습니다. 객체 (Object) var obj = { name: 'superman', age: 23, job: Front-end }; 객체는 순서가 중요하지 않고 빠르게 데이터를 가져와야 할 경우에 주로 사용합니다. key & value 방식으로 데이터를 저장합니다. 데이터 접근하여 값을 가져오는 속도가 빠릅니다. 데이터 추가 / 삭제 빠릅니다. 배열 (Array) var arr = ['superman', 'batman', 'pororo']; 배열은 순서가 중요한 경우에 주로 사용합니다. 배열에 값을 접근 할 때 빠릅니다. 배열에 값을 추가 / 삭제할 때, 마지막 index에 추가 삭제하는 경우 빠릅니다..
프론트엔드 개발에서 성능 향상은 중요한 요소 중에 하나 입니다. 성능 향상을 위해 자바스크립트 함수 속도를 측정 할 수 있는 방법에 대해서 알려드리겠습니다. console.time() console.time(); doSomething(); console.timeEnd(); // default: 8007.467041015625 ms console 의 static 메서드인 time을 이용해서 속도를 측정할 수 있습니다. time 메서드 호출 이후, timeEnd 메서드를 호출하기까지의 시간을 계산해서 콘솔에 표시 해줍니다. 간단히 속도를 콘솔에서 확인할 수 있는 장점이 있지만, 콘솔에서만 확인할 수 있고, 데이터로 처리 하거나, 다른 방법으로 확인할 수 없는 단점이 있습니다. performance.now()..
Slot 이란? Vue에는 Slot이라는 기능이 있습니다. 부모컴포넌트에서 자식 컴포넌트로 temlplate을 전달할 수 있는 기능입니다. Props를 이용해서 데이터를 전달할 수 있지만, template은 전달할 수 없고, Props 만을 이용해서 각각의 template를 전달하려면 코드가 복잡하고 알아보기 어렵게 됩니다. Slot를 이용하면 공통적인 template를 직관적으로 사용할 수 있습니다. Slot 사용법 Content BaseCard 내부에 작성한 Content 가 slot 태그 내부에 들어가게 됩니다. named Slot 사용법 두개의 template를 사용하고 싶을 때가 있습니다. 아래와 같은 방법으로 사용할 수 있습니다. Header Content header 가 들어갈 곳에는 slo..