ETC7 npm과 yarn의 차이 Node.js 환경에서 패키지를 관리할 때 대표적으로 npm과 yarn을 사용한다. 매번 npm과 yarn 중 어느 것을 사용해야 할지 고민을 하게 된다. 이번에도 프로젝트를 위해 고민을 하다 npm과 yarn에 대해 공부해 보기로 했다. 둘의 차이점은 무엇인지 그리고 어떤 장점이 있는지 알아보겠다. npm과 yarn? npm과 yarn은 Node.js의 패키지 매니저이다. 개발자들이 JavaScript로 만든 패키지를 npm에 올리면 npm과 yarn과 같은 패키지 관리 매니저를 통해 설치할 수 있다. 또한, CLI(Command-Line Interface)을 통해 패키지를 설치하거나 삭제, 버전 관리 등을 할 수 있다. 패키지란? 패키지는 특정 기능이나 목적을 위한 코드 묶음을 말한다. 모듈화와 코드.. 2023. 7. 7. axios Axios란? axios는 JavaScript용 HTTP 클라이언트 라이브러리이다. Node.js와 웹 브라우저 환경에서 사용할 수 있으며, HTTP 요청과 응답을 쉽게 처리할 수 있다. 주요 특징은 아래와 같다. Promise 기반으로 비동기 통신을 쉽게 처리할 수 있다. JSON 데이터에 대한 자동 변환 기능을 제공한다. 요청/응답 인터셉터를 사용해 HTTP 요청 및 응답 전/후에 작업을 수행할 수 있다. Axios를 사용하게 된 계기 이번 프롤로그 근로에서 fetch를 axios로 바꾸는 일을 맡게 되었다. 통신하는 부분이 fetch와 axios로 혼합되어 있었고 통일하자는 의견이 나왔다. axios가 JSON 데이터를 자동으로 변환해 준다는 것을 알게 됐고 이를 사용해 보기로 했다. Axios와 .. 2023. 7. 5. webpack의 babel-loader와 ts-loader webpack으로 TypeSciprt를 다룰 때 2가지 방법이 있다. 바로 babel-loader + @babel/preset-typescript와 ts-loader를 사용하는 것이다. 우리는 두 가지 방법을 모두 사용할 수 있다. 하지만 두 방식의 차이점을 이해하고 상황에 맞는 선택을 해보자. 1. babel-loader + @babel/preset-typescript 세팅 먼저, 필요한 패키지를 설치한다. npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-typescript babel.config.json 파일을 루트 디렉터리에 만든 후 @babel/preset-env와 @babel/preset-typescr.. 2023. 7. 1. Babel 바벨이란? Babel은 주로 JavaScript 코드를 변환(transpile)하는 도구이다. Babel의 주요 기능은 최신 ECMAScript(ES6 이상) 표준을 사용해 작성된 JavaScript 코드를 이전 브라우저 버전과 호환되는 ECMAScript(ES5) 코드로 변환하는 것이다. 이를 통해 개발자들이 최신 JavaScript 기능을 사용하여 개발한 코드를 이전 브라우저에서도 문제없이 실행할 수 있다. Compiler? Transpiler babel의 공식 홈페이지를 보면 babel을 컴파일러(Compiler)라고 소개한다. 엄밀히 말하면 컴파일러가 아니다. 컴파일러는 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 것을 말한다. babel은 같은 언어를 다른 실행 환경에서.. 2023. 6. 29. 웹팩(Webpack) 웹팩이란? webpack은 JavaScript, CSS, Image 등의 웹 자원들을 묶어주는 모듈 번들러(Module Bundler)이다. webpack은 여러 개의 파일과 모듈을 하나 또는 여러 개의 최적화된 파일로 번들링 해주는 역할을 한다. 모듈 번들링이란? 모듈 번들링은 웹 애플리케이션을 구성하는 여러 개의 파일과 모듈을 하나 또는 여러 개의 최종 파일로 결합하는 과정을 말한다. 웹팩의 등장 이유 1. 모듈화의 필요성 규모가 크고 복잡한 웹 애플리케이션에서는 코드 구조와 가독성을 개선하기 위해 작은 모듈로 분리가 필요하다. 이를 통해 모듈 간의 의존성이 명확해지고 개발 및 유지 보수가 용이해진다. 2. 개발 생산성 향상 webpack의 기능은 개발자들이 페이지를 새로고침하지 않아도 변경 사항을 .. 2023. 6. 28. 오픈소스 참여 도전하기 오픈소스 컨트리뷰션 아카데미에 참가한 지 벌써 몇 주가 지났습니다. 그중 '모던 자바스크립트 튜토리얼'에 참가 중이랍니다. 오늘은 처음으로 오픈소스 페이지의 오타를 수정해보기로 하였습니다. 제가 발견한 오타는 Part 1에 2-7 형 변환 페이지에 있었습니다. 숫자형 값'를'이라고 오타가 난 것을 볼 수 있죠. '를'을 '을'로 바꿔보도록 합시다. 먼저, 모던 JS 튜토리얼 레파지토리에 들어갑니다. 오픈소스에 참여하기 위해서는 꼭 README.md와 CONTRIBUTING.md를 읽어보아야 합니다. 그다음은 이슈를 생성하도록 합시다. 정해진 규격에 따라 이슈 내용을 적어줍니다. 이제 fork를 뜨고 git clone을 통해 수정할 준비를 해줍니다. fork를 뜨면 이렇게 내 아이디로 된 레파지토리가 생성.. 2022. 7. 28. 이전 1 2 다음
