[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - npm과 pnpm, yarn / axios와 fetch

 

벌써 프로젝트를 시작한지 2주가 되었습니다.. 

1주차는 git 컨벤션과 폴더 구조, 역할 분배등의 협업을 위한 것들을 정했는데요,,,

그 중에 "패키지 매니저인 npm과 pnpm, yarn 중에 뭐를 쓸지"와 "fetch가 있는데 axios를 써야할까요?"라는 회의 내용을 기반으로 각각 무엇이 다른지, 어떤걸 쓰는게 좋은지를 한 번 정리해보고자 합니다.

 

---

🗂패키지 매니저란?

import나 require등을 이용해서 외부 의존성을 참조할 때, 올바르게 참조할 수 있도록 보장해주는 프로그램

예를 들어, 다음과 같이 import 문을 쓴다고 가정해보자

import React from 'react';

이때 여기서 react의 버전이 뭔지를 정확하게 알수가 없다..! 

그래서 이걸 package.json 파일에 명시를 해줘서 특정 버전의 react를 참조할 수 있도록 해주는데, 그걸 도와주는 게 패키지 매니저!

 

이런 패키지 매니저는 언어별로 있는데, 예를 들어 python에서는 pip, conda / java에서는 maven, gradle이 있다.

그 중 javascript에서는 주로 npm, yarn, pnpm이 쓰인다.

 

 

npm

• node.js와 함께 제공되는 기본 패키지 매니저로,
  사용자가 많고 가장 오래 사용되었음
• package.json파일로 의존성을 관리함
• 대규모 프로젝트에서는 속도와 성능이 저하됨(node_modules의 크기가 매우 커짐)

 

yarn

• facebook에서 npm의 문제를 대안하기 위해 만듦
• npm보다 빠른 설치 속도
• yarn.lock으로 의존성을 관리
• 호환성 문제가 발생할 수 있음

 

pnpm

• 가장 최근에 나온 패키지 매니저로 (performant)npm, 즉 퍼포먼스가 향상된 npm
• node_modules의 용량을 최적화해서 사용(hard link방식 = alias를 걸어서 단순히, npm은 node_modules를 복사해서 사용하지만 alias를 이용해서 바로 접근해서 의존성이 디스크에 하나만 설치됨)
• 하지만 node_modules는 그대로 유지하기 때문에 require나 import시 파일 읽기가 여러번 발생해서 느려질 수도 있음

이번 프로젝트에서는 node_modules의 용량을 줄일 수 있고, 설치 속도가 빠른 pnpm을 선택해서 하기로 결정했다..!

 

---

두번째로 나온 이슈로는 axios를 깔아야할까? javascript에서 제공하는 fetch가 비슷한 역할을 하지 않나요? 였다

그럼 둘은 어떤 차이가 있고, axios를 많이 사용하는데 그 이유는 뭔지 알아보자

 

📬 fetch

fetch 는 요청을 보내고, 응답을 받아오는 javascript의 내장함수로 기본적으로 async/await와 함께 사용한다

async function getData() {
  try {
    const response = await fetch('주소');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

 

간단하게 사용할 수 있지만, .json으로 응답 데이터를 수동으로 변환하는 것과 인터셉터를 직접 구현해야한다는 단점이 있다.

또한 네트워크 에러일 때에만 reject를 반환하기 때문에 400, 500 대 에러는 잡을 수가 없다.

이러한 단점들을 보완하기 위해 axios를 사용한다.

 

📮 axios

axios는 node.js와 브라우저를 위한 promise기반 http클라이언트 라이브러리로,
fetch의 단점이었던 json을 자동으로 변환해주고, 인터셉터도 설정을 할 수 있다.

pnpm add axios

pnpm에서는 다음과 같은 명령어로 설치할 수 있다.

 

import axios from 'axios';

axios.get('주소')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

 

이번 프로젝트에서도 아무래도 더 간단한 코드를 작성할 수 있고, 에러의 처리도 훨신 편한 axios를 사용하기로 결정했다.

---

 

참고한 글들

https://toss.tech/article/lightning-talks-package-manager

패키지 매니저의 과거, 토스의 선택, 그리고 미래

https://devocean.sk.com/blog/techBoardDetail.do?ID=166592&boardType=techBlog

패키지 매니저 선택을 위한 여정: NPM에서 Yarn으로 그리고 다시 pNPM

https://f-lab.kr/insight/understanding-package-managers

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 과정(B-log) 리뷰로 작성 되었습니다.