본문 바로가기

JS37

axios VS ky 장단점과 에러 처리특징과 차이 웹 개발에서 HTTP 요청 처리는 필수적인 부분입니다. 오늘날 많은 개발자들이 이를 위해 외부 라이브러리를 사용하고 있으며, 그 중에서도 axios와 ky가 특히 인기를 끌고 있습니다. 이 두 라이브러리는 각각 고유한 특징과 장단점을 가지고 있어, 프로젝트의 요구사항에 따라 선택할 수 있습니다. 이 글에서는 axios와 ky의 사용 방법, 코드 예시, 그리고 각 라이브러리의 장단점을 자세히 살펴보겠습니다. 이를 통해 여러분의 프로젝트에 가장 적합한 HTTP 클라이언트 라이브러리를 선택하는 데 도움이 되길 바랍니다.axios VS ky1. axios 사용 예시import axios from 'axios';// GET 요청axios.get('https://api.example.com/data') .then.. 2025. 1. 19.
실무에서 자주 사용하는 lodash-es 함수 패턴2 프론트엔드 개발에서 lodash-es는 강력한 유틸리티 라이브러리로 널리 사용되고 있습니다. 이 라이브러리는 복잡한 데이터 처리, 성능 최적화, 그리고 일반적인 프로그래밍 작업을 간소화하는 다양한 함수를 제공합니다.  ES 모듈 시스템을 지원하는 lodash-es는 트리 쉐이킹을 통해 필요한 함수만을 번들에 포함시킬 수 있어, 최종 애플리케이션의 크기를 최적화하는 데 도움을 줍니다. 이는 웹 성능 향상에 크게 기여합니다. 이제 실무에서 특히 유용하게 사용되는 lodash-es 함수 5가지와 그 활용 패턴을 살펴보겠습니다._.cloneDeep - 깊은 복사import { cloneDeep } from 'lodash-es';const originalObject = { a: 1, b: { c: 2 }, .. 2025. 1. 19.
실무에서 자주 사용하는 lodash-es 함수 패턴1 실무에서 자주 사용하는 lodash-es 함수 패턴 1프론트엔드 개발에서 lodash-es는 매우 유용한 유틸리티 라이브러리입니다. 이 라이브러리는 다양한 JavaScript 작업을 간소화하고 최적화하는 데 도움을 주는 함수들을 제공합니다. 특히 실무에서는 데이터 처리, 성능 최적화, 비동기 작업 관리 등 다양한 상황에서 lodash-es의 함수들이 빈번하게 사용됩니다. lodash-es는 ES 모듈 시스템을 지원하여 트리 쉐이킹이 가능하므로, 필요한 함수만 가져와 사용할 수 있어 번들 크기를 최적화할 수 있습니다. 이는 웹 애플리케이션의 성능 향상에 기여합니다. 또한, lodash-es의 함수들은 크로스 브라우저 호환성이 뛰어나 다양한 환경에서 일관된 동작을 보장합니다. 프론트엔드 개발자들은 lodas.. 2025. 1. 19.
TypeScript 제네릭: 유연하고 재사용 가능한 코드 작성하기 TypeScript 제네릭유연하고 재사용 가능한 코드 작성하기TypeScript의 강력한 기능 중 하나인 제네릭(Generic)에 대해 알아보겠습니다. 제네릭을 사용하면 다양한 타입에 대해 동작하는 유연하고 재사용 가능한 코드를 작성할 수 있습니다.제네릭이란?제네릭은 타입을 마치 함수의 매개변수처럼 사용할 수 있게 해주는 기능입니다. 이를 통해 여러 타입에 대해 동작하는 함수, 클래스, 인터페이스 등을 만들 수 있습니다. 제네릭을 사용하면 코드의 중복을 줄이고 타입 안정성을 유지할 수 있습니다.제네릭 함수 예시다음은 제네릭 함수의 간단한 예시입니다:function identity(arg: T): T { return arg;}let output1 = identity("Hello, TypeScript!").. 2025. 1. 19.
유용한 lodash 숫자 관련 코드 예시 20가지 JavaScript에서 숫자를 다루는 작업은 많은 경우에 발생하며, Lodash 라이브러리는 이러한 숫자 연산을 보다 쉽게 처리할 수 있도록 도와줍니다. Lodash는 간결하면서도 효율적인 코드를 작성할 수 있도록 다양한 숫자 관련 함수를 제공합니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. Lodash 숫자 함수로 개발 생산성 향상 숫자 데이터를 다루는 개발 작업은 대부분의 프로젝트에서 빈번하게 발생합니다. 이러한 숫자 관련 작업을 보다 간편하게 처리하고 생산성을 향상시키기 위해 Lodash 라이브러리를 활용하는 것은 매우 유용합니다. Lodash는 다양한 숫자 관련 함수를 제공하여 코드의 가독성을 높이고, 반복적인 작업을 간소화하여 개발 생산성을 향상시킵니다. 1. 코드의 가독성.. 2024. 1. 1.
자주 쓰이는 lodash-es 객체 문법 15가지 여기에는 lodash-es에서 자주 사용되는 객체 관련 함수의 예시 20개가 포함되어 있습니다. 이 함수들은 객체 조작, 변환 및 필터링에 유용합니다. 1. 객체에서 특정 키의 값 가져오기: import _ from 'lodash-es'; const user = { id: 1, name: 'John', age: 25 }; const userName = _.get(user, 'name'); console.log(userName); // 'John' 2. 객체에서 여러 키의 값을 가져오기: import _ from 'lodash-es'; const user = { id: 1, name: 'John', age: 25 }; const userSubset = _.pick(user, ['name', 'age']);.. 2024. 1. 1.
자주쓰이는 lodash-es 배열 문법 17가지 여기에는 lodash-es에서 자주 사용되는 배열 관련 함수의 예시 20개가 포함되어 있습니다. 이 함수들은 배열 조작, 변환 및 필터링에 유용합니다. 1. 배열에서 중복 제거: import _ from 'lodash-es'; const uniqueNumbers = _.uniq([1, 2, 2, 3, 4, 4, 5]); console.log(uniqueNumbers); // [1, 2, 3, 4, 5] 2. 배열을 문자열로 변환: import _ from 'lodash-es'; const arrayToString = _.join(['apple', 'orange', 'banana'], ', '); console.log(arrayToString); // 'apple, orange, banana' 3. 배열에.. 2024. 1. 1.
lodash와 lodash-es 차이점과 번들사이즈, 자주쓰이는 문법 Lodash란? Lodash는 자바스크립트의 유틸리티 라이브러리 중 하나로, 다양한 기능을 제공하여 코드를 간결하고 효율적으로 작성할 수 있도록 도와줍니다. 주로 배열, 객체, 함수와 관련된 다양한 작업을 수행하는데 사용됩니다. Lodash는 2012년에 John-David Dalton에 의해 처음 만들어졌으며, 그 이후 계속해서 업데이트 및 확장되어 왔습니다. lodash 와 lodash-es 차이 Lodash: 기본적인 Lodash 라이브러리는 브라우저 환경이나 Node.js와 같은 환경에서 사용하기 위한 스탠다드 빌드입니다. Lodash-es: Lodash-es는 ECMAScript 모듈(ESM) 형식으로 제공되는 버전으로, 모듈 시스템을 활용하여 필요한 함수만 선택적으로 사용할 수 있게 해줍니다... 2024. 1. 1.
node sass 에러 해결방법 Node Sass does not yet support sass 에러 Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (83) /node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js? Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (83) /node_modules/css-loader/dist/cjs.js??ref--6-oneO.. 2022. 3. 26.
javascript return false, breack 차이 Return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다. 함수 내부의 값을 함수 외부로 출력시키거나 함수를 강제로 종료시키는 기능을 한다. 함수 안에서 return 명령문을 만날경우 함수의 실행은 그 지점에서 중단된다. 값을 제공한 경우 함수를 호출한 곳으로 돌아가서 그 값을 반환하여 계속 실행을 한다. break 현재 반복문, switch 문, 또는 label 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘긴다.. 여러번 반복되는 for, switch, while 등의 루프의 경우에 해당 루프에서 아예 빠져나가게 된다. 이때 return과 구분되는 차이는 어디까지 빠져나가는가 중단되는가에 대한 차이이다. return breack 차이점 return의 경우 해당 메서드 .. 2021. 1. 7.
자바스크립트 연산자와 옵셔널 체이닝, optional chaining ** 지수 연산자 예전에 Math.Pow 를 사용해야 했던것을 **로 사용 가능하다. ?. 옵셔널 체이닝 연산자 좌항의 피연산자가 null 이나 undefined 일 경우에 undefined를 반환한다. 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 객체를 가리키기를 기대하는 변수가 널이나 언디파인드인지 확인하여 프로퍼티를 참조할 때 유용한 연산자이다. ?. 사용 이전에는 논리 연산자인 &&를 사용해 확인했었다. ?? null 병합 연산자 연산자 '??' 는 좌항의 피연산자가 null 이나 undefined인 경우에 우항의 피연산자를 반환하고 그렇지 않을 경우에 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용한 연산자이다. 예전에는 논리 연산자인 || 를 사용해 좌항의 피연산자가 false.. 2021. 1. 7.
Template Literals, 템플릿 리터럴이란? 리터럴 literal 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해서 값을 생성하는 표기법 템플릿 리터럴 template literals 백 스페이스 템플릿 내에서 템플릿 내의 자리 표시자 ${} 에 내부 백틱(`)을 사용하여 가독성을 높일 수 있다. $와 중괄호로 표현식을 넣어 사용가능하고 표현식과 사이의 텍스트가 함께 함수로 전달되는 방식이다. 템플릿 문자열 ``은 일반 문자열에 익숙한 작은 따옴표 또는 큰 따옴표 대신 역 따옴표 ( )를 사용한다. 여러 줄 문자열을 단순화하여 코드 량을 줄일 수 있는 장점이 있다. 태그가 지정된 템플릿이라고 불리기도 한다. 줄바꿈이 필요할 경우 \ 백슬래시 문자를 이용해서 이스케이프 처리를 할 수 있다. 2021. 1. 7.
자바스크립트 주요 용어와 기본 개념, 호이스팅이란? 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 메모리 공간을 식별하기 위해서 붙인 이름 선언 시 var, let, const 키워드를 사용한다. (var는 es6 이전 키워드) var variable, 변할수 있는 값 var 단점 함수 레벨 스코프를 지원한다. 블록 레벨 스코프를 지원하지 않는다. -> 의도치 않게 전역 변수가 선언 되어 사이드 이펙트가 발생하게 된다. 상수 const constant, 한번 정해지면 변하지 않는, 단한번만 할당할 수 있는 변수 값을 재할당 할수 없어서 변수에 저장된 값을 변경할 수 없는 값 할당 변수에 값을 대입 저장 하는 일 참조 변수에 저장된 값을 읽어들이는 일 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값이 아닌 메모리 주소를 기억하고 있다.. 2021. 1. 7.
javascript ES version up to 2020, ES11 ECMAScript version ES1 ~ ES11 에크마스크립트 버전별 특징 자바스크립트 표준, 초판은 1997년에 출시되었다. ECMAScript는 언어의 공식 이름으로 ES1, ES2, ES3, ES5 및 ES6으로 축약되었다. version Year Feature ES1 ECMAScript 1 (1997) First edition ES2 ECMAScript 2 (1998) Editorial changes ES3 ECMAScript 3 (1999) regular expressions try/catch ES4 ECMAScript 4 Never released ES5 ECMAScript 5 (2009) "strict mode" JSON support String.trim() Array.isArray(.. 2021. 1. 7.
비동기 처리 AJAX , XMLHttpRequest AJAX (Asynchronous Javascript And XML) 페이지 새로고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 axios, fetch, async/await, promise, XMLHttpRequest, superagent, request fetch Request, Resonse와 같은 HTTP의 파이프라인 구성 요소 조작가능 var myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { return response.blob(); }) .then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.. 2020. 12. 19.
Detect Dark Mode 다크모드 감지하기 Detect Dark Mode 다크모드 감지 JS Detect dark mode in safari prefers-color-scheme 으로 다크모드를 감지한다. safari Dark mode error Since safari doesn't eat addEventListener, branch to try catch safari에서 addEventListener 안먹으므로 try catch 로 분기 const [isDark, setIsDark] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); useEffect(() => { const detectMode = () => { if (window... 2020. 12. 19.
IE10 dataset nor working IE Explore dataset not working IE10에서는 돔요소에 dataset 속성이 없어서 일반적인 방식으로 접근하면 에러가 발생한다. 해결방법 IE10 에서는 getAttribute 메서드를 사용하기 //데이터 셋을 IE10에서도 사용하기 위한 함수 function getDataset(element, name) { if (element.dataset) { return element.dataset[name] || ''; } if else (element.getAttribute) { return element.getAttribute(`data-${name}`) }} '';; } } 2020. 12. 19.
useSWR 리액트 훅 데이터 라이브러리 useSWR 사용하기 useSWR 은 한번 fetch 한 원격상태의 데이터를 내부적으로 캐시하고 다른 컴포넌트에서 동일한 상태를 사용하고자 할 경우 이전에 캐시했던 상태를 그대로를 리턴한다. const { data } = useSWR( "https://jsonplaceholder.typicode.com/posts", url => fetch(url) .then(_ => _.json()) .then(sleep), { suspense: true } ); ‌ useSWR 특징 Lightweight Backend agnostic Realtime JAMstack oriented Suspense TypeScript ready REST compatible Remote + Local useSWR 장점 서로 다른 컴포넌트.. 2020. 12. 19.
자바스크립트 모듈관리 글로벌 네임스페이스 변수 충돌이 일어나기 쉬운 경우 여러 라이브러리를 한 프로그램에서 로드시 서로 충돌 하는 상황이 생길 수 있다. 네임 스페이스를 통해 최상위 스코프의 확인자가 아니라 속성 형태로 기능이 노출된다. 모듈관리 특정 스코프로부터 의존성 관리자를 이용한 다양한 명시적인 방법으로 확인자를 가져와 사용한다. 우발적인 스코프 충돌 예방을 위해 비공개 스코프에 확인자를 저장한다. var a = 3; (function foo(){ var a = 4; console.log(a); //4 })(); console.log(a); //3 이 함수는 함수 표현식으로 취급된다. 함수 자신의 내부 스코프에 묶여있다. 함수이름 foo를 자기 내부에 숨기면 함수를 둘러싼 스코프를 불필요하게 오염시키지 않는다. 선언문.. 2020. 10. 10.
스코프 Scope 스코프 특정 장소에 변수를 저장하고 나중에 변수를 찾는 데는 잘 정의된 규칙이 필요하다는 규칙 어디서 어떻게 변수를 찾는가를 결정하는 규칙의 집합 중첩 스코프 스코프도 다른 스코프 안에 중첩 될수 있다. 대상 변수를 현재 스코프에서 찾지 못하면 엔진은 다음 바깥의 스코프로 넘어가는 식으로 변수를 찾거나 글로벌 스코프라 부르는 가장 바깥 스코프에 도달할 때까지 반복한다. function foo(a) { console.log(a + b); } let b = 2; foo(2); //4 b에 대한 참조는 함수 foo 안에서 처리할수 없다. 함수를 포함하는 스코프에서 처리한다. (글로벌 스코프) 렉시컬 스코프 프로그래머가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는가에 기초해서 코드를 처리할 때 확정된다... 2020. 10. 10.
ES6 주요 문법 활용하기 export & import //file: fibonacci.js //since these variables are not exported //they are private to the module. Code //in other modules can't reference them let fib1 = 0; let fib2 = 1; /** * next() returns the next number in the Fibonacci sequence. * @returns {number} */ export function next() { let current = fib1; fib1 = fib2; fib2 = current + fib1; return current; } /** * reset() resets the Fi.. 2020. 10. 1.
javascript 연산자 Javascript Operator 자바스크립트 연산자 주요 기본식과 좌변식 의미 기본식 자바스크립트 일반식 및 기본 키워드 this 실행 문맥의 특별한 속성 function 함수 정의 class 클래스 정의 function 생성기 generator 함수 식 정의 yield 생성기 함수 일시정지 및 재개 yield* 다른 생성기 함수 또는 순회가능 객체로 위임 async function 비동기 함수 표현식 정의 await 비동기 함수를 일시 중지했다가 다시 시작하고 promise의 resolution/rejection을 ​​기다림 [] 배열 초기자 및 리터럴 구문 {} 객체 초기자 및 리터럴 구문 /ab+c/i 정규식 리터럴 구문 ( ) 그룹 연산자. 좌변식 좌변값은 할당 대상을 의미 Property a.. 2020. 9. 29.
Promise 프로미스 사용하기 Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체, 콜백을 첨부하는 방식의 객체이다. 프로미스 장점 콜백은 자바스크립트 Event Loop이 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않는다. 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 콜백의 경우에도 위와 같다. then() 을 여러번 사용하여 여러개의 콜백을 추가 할 수 있으며 각각의 콜백은 주어진 순서대로 하나 하나 실행되게 된다. chaining Promise.then() then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다. 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. const promise1 = new Pr.. 2020. 9. 23.
비동기 Asynchronous 이해하기 Asynchronous 비동기 보통 코드는 한번에 한가지 사건만 발생하면서 순차적으로 진행된다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보면, 전체 프로그램이 모두 멈춘 것처럼 보이게 된다. 기다리는 동안 다른 작업을 수행할 수 있는것, 이것이 비동기 프로그래밍의 기본이다. Blocking code 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있다. 이러한 현상을 blocking 이라고 부른다. Threads 쓰레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다. 각 스.. 2020. 9. 23.
JS Module 모듈 import, export export 모듈 내보내기 Named Export 모듈 밖으로 내보내려는 항목 앞에 export 를 붙인다. 각 항목(function, const 등)은 export 할 때 이름으로 참조되었으며, import 할 때에 이 이름을 참조하여 사용한다. export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; ctx.fillRect(x, y, length, length); return { length: length, x: x, y: y, color: color }; } 여러 항목 내보내기 export { name, draw, reportArea, repo.. 2020. 9. 23.
Refactoring javascript 2 Clean coding in JavaScript 2 리팩토링 자바스크립트, 클린 코드 작성하기 2 Refactoring js example code destructuring, spread operator, async-await, template literals, optional chaining example code 디스트럭처링, 스프레드 오퍼레이터, 어싱크 어웨이트, 템플릿리터럴, 옵셔널 체이닝 활용하기 Optional Chaining 옵셔널 체이닝 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 und.. 2020. 9. 23.
Refactoring javascript 1 Clean coding in JavaScript 리팩토링 자바스크립트, 클린 코드 작성하기 Using the map function before const myList = list => { const newList = [] for (let i = 0; list.length; i++) { newList[i] = list[i] * 2 } return newList } after const myList = list => list.map(x => x * 2) Avoid callback hell with async/await before const sendToEmail = () => { getIssue().then(issue => { getOwner(issue.ownerId).then(owner => { send.. 2020. 9. 23.
Detect Dark mode in CSS & Javascript Dark Mode How do I detect dark mode using JavaScript & CSS 다크모드 시스템은 모든 화면, 컴포넌트, 메뉴 및 컨트롤에 대해 더 어두운 색상 팔레트를 사용하고 더 선명한 배경을 사용하여 전경 콘텐츠를 돋보이게 만든다. 몇몇 서비스에서는 다크모드를 지원하는 UI를 사용자에게 제공하고 있다. 장점 눈의 피로를 줄이고, 밝기를 현재 조명 조건에 맞게 조정 어두운 환경에서 화면을 쉽게 사용할 수 있도록 지원 배터리 전원을 절약함으로써 시각적 인체 공학을 개선하는 데 도움 접근성 및 대비 다크모드는 흰색 텍스트를 표시 할 수있을만큼 어두워야 한다. 텍스트와 배경 사이에 최소 15.8 : 1의 대비 수준을 사용한다. 이렇게하면 본문 텍스트가 WCAG의 AA 표준 인 4... 2020. 9. 23.
Javascript 삼각함수 sin, cos, tan 삼각 함수(sin(), cos(), tan(), asin(), acos(), atan(), atan2())는 매개변수와 반환값 모두 호도법(라디안)을 사용한다. 라디안 라디안은 각의 크기를 재는 SI 단위이다. 호도라고도 하며, 기호는 rad이다. 단위원의 중심각의 라디안 값은 그 각이 대하는 호의 길이와 같다. 1라디안은 약 57.3도이다. 라디안 값을 각도 값으로 반환 라디안 값 / (Math.PI / 180) = 각도 값 리다인 값 반환 (Math.PI / 180) * 각도 값 = 라디안 값 sin 곡선 그리기 var ctx = document.getElementById('canvas').getContext('2d'); var width = 1280; var stepX = 10; var x = 14.. 2020. 9. 22.
javascript find How to properly use Javascript Find 자바스크립트 find 로 배열에서 요소 찾기 Find find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. js Find example const array1 = [5, 12, 8, 130, 44] const found = array1.find(element => element > 10) console.log(found) // expected output: 12 속성 중 하나를 사용하여 배열에서 객체 찾기 const inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: .. 2020. 9. 21.

티스토리툴바