본문 바로가기

Javascript

(6)
[Javascript] Axios Interceptors 개념과 사용법 개요Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js에서 모두 사용할 수 있습니다. Axios는 요청(Request)과 응답(Response)을 가로챌 수 있는 인터셉터(Interceptors) 기능을 제공합니다. 인터셉터를 사용하면 요청이나 응답을 변경하거나, 요청 전후에 추가 작업을 수행할 수 있습니다. 1. Interceptors의 개념인터셉터는 Axios 요청이나 응답을 가로채고, 해당 요청 또는 응답을 처리하는 코드 조각을 추가할 수 있게 해줍니다. 이 기능은 인증 토큰을 자동으로 첨부하거나, 모든 응답을 로깅하는 등 여러 가지 용도로 사용할 수 있습니다. 2. Interceptors의 종류Request Interceptors: HTTP 요청을 서버로 보내기 전에..
[Javascript] async와 await의 개념과 사용법 개요JavaScript에서 비동기 작업을 다루는 방법 중 하나인 async와 await 키워드는 ES2017(ES8)에서 도입되었습니다. 이를 통해 비동기 코드를 더욱 직관적이고 읽기 쉽게 작성할 수 있습니다. async와 await은 Promise를 기반으로 동작하며, 코드의 흐름을 동기적인 방식으로 작성할 수 있게 해줍니다. 1. async 함수 async 키워드는 함수 앞에 사용되어 해당 함수를 비동기 함수로 만듭니다. 비동기 함수는 항상 Promise를 반환합니다. 명시적으로 Promise를 반환하지 않더라도 자동으로 Promise로 감싸집니다. 사용법async function myAsyncFunction() { return "Hello, async!";}myAsyncFunction().th..
[Javascript] 화살표 함수(Arrow Function) 이해하기 자바스크립트 화살표 함수 이해하기자바스크립트의 화살표 함수(Arrow Function)는 코드를 더 간결하게 작성할 수 있게 해주는 ES6의 새로운 기능입니다. 기존의 함수 선언 방식과 비교할 때, 문법이 더 간단해지며 this 키워드의 바인딩이 달라지는 등 몇 가지 중요한 차이점이 있습니다. 이번 글에서는 화살표 함수의 문법과 특징, 그리고 사용 예제에 대해 알아보겠습니다.화살표 함수 문법화살표 함수의 기본 문법은 다음과 같습니다.const functionName = (parameter1, parameter2) => { // 함수 내용 return result;};인자가 하나일 때는 괄호를 생략할 수 있고, 함수 본문이 단일 표현식일 때는 중괄호와 return 키워드를 생략할 수 있습니다.// 인자..
[Javascript] 스프레드 연산자와 레스트 파라미터 이해하기 자바스크립트의 스프레드 연산자와 레스트 파라미터 이해하기자바스크립트의 ... 문법은 스프레드 연산자(Spread Operator)와 레스트 파라미터(Rest Parameter)로 사용됩니다. 이는 배열, 객체, 함수의 파라미터 등을 다루는 강력한 도구입니다. ... 문법을 통해 코드의 가독성과 유연성을 크게 향상시킬 수 있습니다.스프레드 연산자 (Spread Operator)스프레드 연산자는 배열이나 객체를 펼치는 역할을 합니다. 배열이나 객체의 요소를 개별 요소로 분리하여 사용할 수 있습니다.배열에서의 사용배열을 복사하거나, 배열을 결합할 때 유용합니다.const arr1 = [1, 2, 3];const arr2 = [...arr1, 4, 5, 6];console.log(arr2); // [1, 2, ..
[Javascript] 클로저(Closure) 이해하기 자바스크립트 클로저(Closure) 이해하기자바스크립트 클로저는 자바스크립트에서 매우 중요한 개념으로, 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합을 의미합니다. 클로저는 함수가 자신의 스코프 외부에 있는 변수들에 접근할 수 있게 해줍니다. 이는 자바스크립트의 스코프와 실행 컨텍스트에 대한 깊은 이해를 필요로 합니다.클로저란 무엇인가?클로저는 함수가 선언될 때 그 함수가 선언된 환경을 기억하는 특성입니다. 이로 인해 함수는 자신이 선언된 환경의 변수에 접근할 수 있습니다. 클로저는 함수가 자신의 외부 함수의 변수에 접근할 수 있도록 합니다.클로저의 기본 예제다음은 간단한 클로저의 예제입니다.function outerFunction() { let outerVariab..
[Javascript] 웹팩(Webpack)이란? 웹팩(Webpack) 개요웹팩(Webpack)은 모듈 번들러(module bundler)입니다. 즉, 여러 파일과 모듈을 하나의 파일(bundle)로 묶어주는 역할을 합니다. 이로 인해 웹 애플리케이션의 로딩 속도를 개선하고, 코드 관리와 유지보수를 용이하게 합니다.주요 기능모듈 번들링: 웹팩은 여러 자바스크립트 파일을 하나의 번들로 묶어줍니다. 이를 통해 파일을 효율적으로 로드할 수 있습니다.코드 스플리팅(Code Splitting): 필요한 시점에 필요한 코드만 로드할 수 있도록 번들을 나누어 로딩 속도를 최적화합니다.로더(Loader): 웹팩은 자바스크립트 파일뿐만 아니라 CSS, 이미지, 폰트 등의 파일도 모듈로 취급하여 변환할 수 있습니다.플러그인(Plugin): 빌드 프로세스를 더욱 강력하게 ..