라이브러리와 프레임워크란? 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

자바스크립트 - 원시형(primitive) 이란?

primitive이란? 자바스크립트의 원시형 타입이 있습니다. 객체도, 메서드도 속성을 가지지 않은 데이터 입니다 primitive 종류 총 7개가 있습니다. String Number Boolean null undefined 그리고 ES6 문법에서 Symbol ES 2020 문법 BigInt 가 추가 되었습니다. Symbol BigInt 예시 var str = 'superman'; console.log(str.length); // 8 str 변수에 superman 값을 담고 length 속성을 부르게 되면 8이 콘솔에 찍히게 됩니다. 문자열 데이터가 어떻게 length라는 속성을 가지게 되는건가요? length를 호출할 때, String 객체 래퍼를 만들고, 그 객체 length 속성 값을 가지고 오게 ..

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

자바스크립트 - async await 비동기 처리하기

비동기 asynchronous 란? 특정 작업이 완료할 때까지 대기하지 않고, 다른 작업을 먼저 진행하고 특정 작업이 완료가 되면 이벤트에 응답할 수 있는 방법입니다. fetch('https://dummyjson.com/users') .then(res => res.json()) .then(console.log); // to do something fetch 작업을 진행하고, 아래에는 다른 작업들이 진행되게 됩니다. 그리고 then 을 이용하여 api 호출이 완료가 되면 완료 이후 로직이 타게 됩니다. async / await 여러 비동기 함수를 콜백함수를 이용해서 처리하면, 콜백 지옥에 빠질 수 도 있습니다. 그렇게 되면 코드가 복잡하게 되어서 로직을 이해하기 어려울 수 있습니다. async / awai..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 24.
• textsms