개발자 여행기

Django과 Vue를 연동하면서 Axios를 사용하게 되었다.
Axios를 사용하기에 앞서 왜 Axios를 사용하는지에 대해서 몇 가지 조사를 해보았다.

■ Axios가 만들어지게 된 이유

Axios가 처음 개발될 때, 이미 자바스크립트의 HTTP 클라이언트 라이브러리는 존재했지만, 기존 라이브러리들은 몇 가지 단점을 가지고 있었다.

이러한 단점들을 극복하고자 Matt Zabriskie는 2014년에 Axios를 개발하게 되었다. Axios가 개발되기 전 몇 가지 단점을 알아보도록 하자.

1. 기존의 HTTP 클라이언트 라이브러리들은 비동기적인 작업을 처리하기 위해 콜백 패턴을 사용했다.

    하지만 콜백 패턴은 중첩된 콜백으로 인해 코드의 가독성과 유지보수성을 저하시켰다.

2. 대부분의 라이브러리들은 XHR(XMLHttpRequest) 객체를 사용하여 HTTP 요청을 처리했다.

    XHR은 기능적으로 제한적이며 복잡한 설정이나 요청의 중단과 재시작과 같은 기능을 구현하기 어려웠습니다.

3. 기존 라이브러리들은 모듈성이 부족한 경우가 있었다. 따라서 다른 라이브러리나 프레임워크와 함께 사용하기 어려운 경우가 발생했다.

4. 몇몇 라이브러리는 브라우저와 서버 간에 호환성이 떨어지는 경우가 있었다. 이는 같은 코드를 브라우저와 서버에서 재사용하기 어렵게 만들었다.

5. Promise는 비동기 코드를 다루는데 매우 유용한 기능이지만, 기존 라이브러리들은 Promise를 지원하는데 어려움이 있거나, 미비한 경우가 있었다.

■ Axios의 장점

1. Promise 기반으로 동작한다. 이를 통해 비동기 작업을 보다 간결하고 직관적으로 다룰 수 있으며, 중첩된 콜백을 피할 수 있다.

2. 브라우저 환경과 Node.js 환경에서 모두 사용할 수 있다. 브라우저와 서버 간에 동일한 코드를 공유하고 재사용할 수 있어 개발과 유지보수가 편리하다.

3. 요청과 응답을 인터셉터를 통해 가로채고 처리할 수 있는 기능을 제공한다. 이를 통해 공통적인 요청/응답 처리를 중앙에서 관리하고 코드의 재사용성을 높일 수 있다.

4. 요청과 응답 데이터를 간편하게 변환할 수 있다. JSON, XML, FormData 등 다양한 데이터 형식을 처리할 수 있어서 개발자들이 데이터를 효율적으로 다룰 수 있다.

5. 서버로부터 받은 HTTP 상태 코드를 쉽게 처리하여 성공 또는 에러를 구분할 수 있다. 이를 통해 응답 상태를 쉽게 파악하고 처리할 수 있다.

6. 잘 구성된 문서와 활발한 개발자 커뮤니티를 가지고 있다. 이러한 문서화와 커뮤니티 지원으로 인해 사용자들이 쉽게 학습하고 문제를 해결할 수 있다.

7. API는 간결하고 직관적이어서 사용하기 쉽다. 빠르게 설정을 구성하고 HTTP 요청을 보내고 응답을 받는데 필요한 기능들이 간편하게 제공된다.

■ Axios의 단점

1. 다른 경량화된 HTTP 클라이언트 라이브러리들보다 더 큰 번들 크기를 가질 수 있다. 이는 프로젝트의 번들 크기가 중요한 경우에 영향을 미칠 수 있다.

2. 대부분의 최신 브라우저에서 잘 동작하지만, 구형 브라우저와의 호환성이 제한적일 수 있다. 따라서 구형 브라우저 지원이 필요한 경우에는 추가적인 처리가 필요할 수 있다.

3. 브라우저 환경에서 기본적으로 XHR(XMLHttpRequest) 객체를 사용하여 HTTP 요청을 처리한다.

    XHR은 기능적으로 제한적이고 좀 더 복잡한 설정이나 요청의 중단과 재시작과 같은 기능을 구현하기 어려울 수 있다.

4. Fetch API를 사용하지 않고 별도의 XHR 기반 구현체를 사용한다. Fetch API는 모던 브라우저에서 기본적으로 지원되는 표준 API이므로,

    특정 브라우저와 호환성을 고려한다면 Fetch API를 직접 사용하는 것이 더 나은 선택일 수 있다.

5. 기본적으로 다양한 기능들을 제공하지만, 모든 프로젝트에서 필요하지는 않을 수 있다. 때로는 불필요한 기능들이 번들 크기를 증가시키고 코드의 복잡성을 높일 수 있다.

■ 그 밖의 HTTP 클라이언트 라이브러리 순위

1. Axios

2. Fetch API

3. SuperAgent

4. Request

5. Got

Vue3을 공부하면서 npm이라는 것을 사용하다가 우연히 yarn이라는 것을 알게 되었다.
그렇다면 yarn은 무엇이며, npm이 있는데 왜 yarn이 생겼는지에 대해 궁금증도 생겼다.
그래서 이번 포스팅에서는 yarn에 대해서 알아보고자 한다.

■ yarn이란?

1. Facebook에서 2016년에 개발한 자바스크립트 패키니 매니저중 하나이다. npm(Node Package Manager)과 비슷한 역할을 수행하지만,

    더 빠른 성능과 일관성 있는 의존성 버전 관리를 제공하여 개발자들에게 인기가 있다.

    ※ 의존성 버전 관리 맨 하단 설명 참고

2. 프로젝트에 필요한 외부 라이브러리나 모듈, 패키지들을 관리한다. 프로젝트의 package.json 파일에 기록된 의존성 정보를 바탕으로 패키지들을 설치하고 관리한다.

3. yarn add 명령을 사용하여 새로운 패키지를 프로젝트에 추가할 수 있다. 이때 의존성 관련 정보가 package.json 파일에 자동으로 추가된다.

4. yarn upgrade 명령을 사용하여 모든 패키지 또는 특정 패키지를 최신 버전으로 업데이트할 수 있다.

5. yarn remove 명령을 사용하여 불필요한 패키지를 프로젝트에서 제거할 수 있다. 이때 package.json 파일에서도 해당 패키지에 대한 의존성 정보가 자동으로 삭제된다.

6. yarn.lock 파일을 사용하여 프로젝트에 설치된 패키지의 정확한 버전을 기록한다.

    이로 인해 모든 개발자가 동일한 의존성 버전을 사용하며, 의존성 충돌과 호환성 문제를 사전에 방지한다.

7. npm과 호환되기 때문에 기존 npm 프로젝트를 yarn으로 이전하거나 npm으로 작성된 패키지를 yarn을 사용하여 설치하는 것도 가능하다.

    개발자들은 프로젝트 요구 사항과 개인적인 선호에 따라 npm과 yarn 중에서 선택하여 의존성을 효과적으로 관리할 수 있다.

■ yarn은 왜 만들어졌을까?

1. npm은 큰 규모의 프로젝트에서 패키지 설치가 느려지는 성능 문제가 있었다. 특히 의존성 트리를 해석하고 다운로드하는 과정에서 시간이 오래 걸리는 경우가 있었다.

    yarn은 병렬 다운로드와 캐싱 기능을 도입하여 더 빠른 패키지 설치를 가능케 했다.

2. npm은 npm-shrinkwrap.json 파일을 사용하여 의존성 버전을 고정시키지만, 이 파일의 생성과 관리가 번거로웠다.

    yarn은 yarn.lock 파일을 사용하여 의존성을 고정시키는 방식을 도입하여 모든 개발 환경에서 일관성 있는 패키지 버전을 유지할 수 있도록 하였다.

3. yarn은 npm과 마찬가지로 보안을 중요시하며, 패키지 설치 과정에서 악성 코드나 취약점이 있는 패키지를 탐지하여 사용자를 보호한다.

4. 의존성을 설치할 때 버전 간 충돌을 자동으로 해결해 주는 기능을 제공한다.

    이를 통해 패키지 버전 간에 발생할 수 있는 일부 문제를 자동으로 처리해 주어 사용자의 부담을 줄여준다.

5. npm에는 없는 몇 가지 추가 기능을 제공한다. 예를 들어, yarn why 명령을 사용하여 특정 패키지가 설치된 이유를 확인할 수 있다.

■ yarn의 단점

1. 의존성을 해석하는 방식에서 문제가 발생할 수 있다.

    의존성 트리를 해석하는 알고리즘이 복잡하고, npm과는 약간 다른 방식을 사용하기 때문에 종종 예상치 못한 의존성 충돌이 발생할 수 있다.

2. npm보다 더 많은 메모리를 사용하는 경향이 있다. 큰 규모의 프로젝트에서 의존성 트리를 구성하는 데 필요한 메모리 양이 증가할 수 있다.

3. npm에 비해 더 느린 시작 시간을 가지고 있습니다. 처음으로 yarn을 사용하는 프로젝트의 경우, 패키지 캐싱 등의 초기 작업으로 인해 초기 설치 시간이 더 오래 걸릴 수 있다.

4. npm이 더 오래된 패키지 매니저이며, 자바스크립트 생태계에서 널리 사용되고 있다.때로는 yarn이 npm 생태계의 일부 패키지와 호환성 문제를 겪을 수 있다.

5. JavaScript 생태계에서는 npm과 yarn을 모두 사용하는 경우가 많다.

    프로젝트 팀 간에 패키지 매니저를 통일하기 어려울 수 있으며, 여러 패키지 매니저를 동시에 사용하면 일관성이 떨어질 수 있다.

■ yarn의 몇 가지 명령어

(참고) 의존성 버전 관리

프로젝트에 사용되는 외부 라이브러리, 프레임워크 또는 패키지와 같은 소프트웨어 구성 요소들 간의 관계를 관리하는 방법을 말한다.

대부분의 소프트웨어 프로젝트는 외부에서 개발된 라이브러리나 도구들을 활용한다. 이러한 외부 구성 요소들은 주로 다른 개발자들에 의해 관리되며 자주 업데이트된다.

하지만 이러한 업데이트가 항상 호환되지 않을 수 있기 때문에, 프로젝트는 특정 버전의 외부 구성 요소와 함께 잘 동작함을 보장해야 한다.

이때 의존성 버전 관리를 통해 관리된다.

1. 프로젝트가 특정 버전의 외부 구성 요소와 함께 안정적으로 동작하도록 보장한다.

2. 프로젝트의 개발 및 배포 단계에서 사용되는 외부 구성 요소들의 버전이 일관되게 유지되어, 동일한 환경에서 항상 동일한 결과를 얻을 수 있도록 한다.

3. 보안 취약점이나 버그가 발견될 경우, 해당 버전의 외부 구성 요소를 신속하게 업데이트하여 보완할 수 있다.

4. 여러 개발자들이 함께 작업하는 경우, 모든 개발자들이 동일한 버전의 외부 구성 요소를 사용하여 문제를 최소화할 수 있다.

■ Node.js (18.16.1 LTS) 설치 방법

1. node.js 다운로드 사이트 : https://nodejs.org/ko

2. 18.16.1 LTS(안정적, 신뢰도 높음) 버튼을 클릭하여 다운로드한다.

3. 다운로드한 파일 node-v18.16.1-x64.msi를 클릭하여 설치한다.

4. 아래 이미지와 같이 순서대로 진행한다.

  - Node.js runtime : Node.js

  - corepack manager : 패키지 관리자로 yarn, pnpm과 같은 package manager를 프로젝트별로 지정하여 사용할 수 있게 함.

  - npm package manager : Node Package Manager 패키지 관리자

  - Online documentation shortcuts : 온라인 문서 바로가기

  - Add to PATH : PATH 환경변수 등록

5. 위의 이미지대로 설치를 하였으면, 설치가 잘 되었는지 명령 프롬프트를 열어 확인해 본다. 설치한 버전이 나오면 설치가 완료된 것이다.