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

자바스크립트 - 객체와 배열 성능 차이

자바스크립트에서 데이터를 저장할 수 있는 방법 중 객체 또는 배열을 선언하여 여러 데이터를 저장할 수 있습니다. 객체 (Object) var obj = { name: 'superman', age: 23, job: Front-end }; 객체는 순서가 중요하지 않고 빠르게 데이터를 가져와야 할 경우에 주로 사용합니다. key & value 방식으로 데이터를 저장합니다. 데이터 접근하여 값을 가져오는 속도가 빠릅니다. 데이터 추가 / 삭제 빠릅니다. 배열 (Array) var arr = ['superman', 'batman', 'pororo']; 배열은 순서가 중요한 경우에 주로 사용합니다. 배열에 값을 접근 할 때 빠릅니다. 배열에 값을 추가 / 삭제할 때, 마지막 index에 추가 삭제하는 경우 빠릅니다..

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

자바스크립트 - 함수 속도 측정할 수 있는 방법 console.time(), performance.now()

프론트엔드 개발에서 성능 향상은 중요한 요소 중에 하나 입니다. 성능 향상을 위해 자바스크립트 함수 속도를 측정 할 수 있는 방법에 대해서 알려드리겠습니다. console.time() console.time(); doSomething(); console.timeEnd(); // default: 8007.467041015625 ms console 의 static 메서드인 time을 이용해서 속도를 측정할 수 있습니다. time 메서드 호출 이후, timeEnd 메서드를 호출하기까지의 시간을 계산해서 콘솔에 표시 해줍니다. 간단히 속도를 콘솔에서 확인할 수 있는 장점이 있지만, 콘솔에서만 확인할 수 있고, 데이터로 처리 하거나, 다른 방법으로 확인할 수 없는 단점이 있습니다. performance.now()..

• format_list_bulleted Develop/JavaScript
• · 2024. 3. 31.
• textsms

Vue Slot 사용법

Slot 이란? Vue에는 Slot이라는 기능이 있습니다. 부모컴포넌트에서 자식 컴포넌트로 temlplate을 전달할 수 있는 기능입니다. Props를 이용해서 데이터를 전달할 수 있지만, template은 전달할 수 없고, Props 만을 이용해서 각각의 template를 전달하려면 코드가 복잡하고 알아보기 어렵게 됩니다. Slot를 이용하면 공통적인 template를 직관적으로 사용할 수 있습니다. Slot 사용법 Content BaseCard 내부에 작성한 Content 가 slot 태그 내부에 들어가게 됩니다. named Slot 사용법 두개의 template를 사용하고 싶을 때가 있습니다. 아래와 같은 방법으로 사용할 수 있습니다. Header Content header 가 들어갈 곳에는 slo..

• format_list_bulleted Develop/Vue
• · 2024. 3. 30.
• textsms

3•6•9년차 직장 생활 슬럼프 해결 방법

세상일 중에 직장생활은 가장 쉽기도 하지만, 직장 생활 도중에 많은 고비들이 있기도 합니다. 직장생활을 하다보면 슬럼프가 찾아올 때가 있습니다. 현재 하고 있는 일에 의미를 찾지 못하거나 무기력증에 빠지기도 합니다. 특히나 3년차, 6년차, 9년차에 슬럼프가 많이 찾아오고, 심지어 3개월 6개월 9개월에도 찾아 온다고 합니다. 3년차 슬럼프 직장 생활 3년차가 되었을 때, 대부분 사수분들과 선배들은 개발자들의 빠른 이직으로 대부분 퇴사를 하였습니다. 3년차가 되었을 때는 업무도 손에 익고, 제가 맡고 있는 부분에 대해서는 회사 내에서는 가장 이해도가 높다는 자신감도 있었습니다. 자신감이 였다면 좋겠지만 곧 과도한 자신감은 오만이였던 것 같습니다. 다른 선배가 와서 일을 이렇게 하라고 지시를 하거나, 알려..

• format_list_bulleted 일상/이야기
• · 2024. 3. 30.
• textsms