![[NODE] node npm](/assets/img/blog/node/logo.png){kind=logo}
npm 에 대해서 알아본다.
node package manager 의 약자로 npm 은 node project를 패키지해서 발행하면 그 패키지들이 다른사람이 사용할 수 있게 hub같은 역할을 하는 툴이라고 보시면 됩니다.
npm 은 다른 언어보다 가장 많은 모듈이 존재하며 커뮤니티가 활성화 되어있습니다.
공식사이트 : https://www.npmjs.com/
npm version 관리 체계에 대해서 알아보고 학습해본다.
node package 들은 버전의 의존관계가 매우 중요하며 버전에 따라서 어플리케이션들이 동작이 안 될 수 있습니다.
그렇기에 npm 의 버전 체계를 알 필요가 있으므로 npm의 버전 체계에 대해서 학습해 보겠습니다.
NODE.js의 express package를 설치하고 구동하는 방법에 대해서 학습해보자.
Node의 http 모듈을 사용하여 서버를 만들 수 있겠지만. 그 방법은 확장성이 떨어지고 새로운 기능을 구현하려면 많은 시간이 소요 됩니다.
Node 에서는 많은 오픈소스들이 존재 하며 그중 가장 다운로드수가 많고 안정적이라고 평가받는 express를 설치하고 구동하는 방법에 대해서 살펴 보겠습니다.
NODE.js의 express를 사용하여 html파일을 서빙 해보자.
Node의 express에서 정적자원을 서빙하는 방법에 대해서 학습해봅시다.
express 에서는 html, css 파일 같은 정적파일을 서빙하기위해 response 객체에 sendFile 이라는 메서드를 제공합니다.
예제로 사용밥법을 살펴 보겠습니다.
NODE.js의 express의 미들웨어에 대해서 알아보고 학습해본다.
Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출입니다.
Express에서 다음과 같은 유형의 미들웨어를 사용할 수 있게 구현 되어 있습니다.
![[it] Swagger란?](/assets/img/blog/it/it.png)
Swagger란 무엇인지 알아보자
요세 IT 는 협업과 빠른 기술 변화로 인하여 정보전달의 효율성이 강조되고 있습니다.
예전 방식의 개발방법론에서는 문서로 기술 스펙들을 ppt나 excel 에 작성하여 주고 받는 식으로 일을 해 왔었는데 이는 버전업이나. 관리하지 않으면 스펙이 바뀌었는데 문서가 최신화되지 않아 참고할 수 있는 방법이 없었습니다.
swagger는 백엔드 프로그램과 프론트 프로그램 사이에서 정확히 어떤 방식으로 데이터를 구조화하여 주고 받을지에 대한 API 명세를 관리할 수 있는 도구로 요즘 개발에서는 많은 사이트들이 기술을 도입하고 있습니다.
post 나 put , delete 같은 요청도 직접 테스트할 수 있기 때문에 postman , mockoon 같은 툴을 설치하지 않아도 해당 명세의 payload 만 안다면 테스트가 간편하기 때문에 rest 방식의 어플리케이션은 이 swagger를 도입하는 방법으로 생각하는게 좋을 것 같습니다.
![[Vue] Vue axios](/assets/img/blog/vue/vue-logo.png){kind=logo}
Vue에서 axios 설정
vue 에서 axios를 설치하고 설정하는 방법에 대해서 알아봅니다.
axios 가 무엇이고 왜 axios를 선택해야하는지 아래의 링크를 참조하세요
axios 관련 포스트 링크 : axios
![[axios] axios 개념 및 소개](/assets/img/post/module/01.png)
axios에 대해서 학습한다.
axios는 node.js 와 브라우저를 위한 http통신 라이브러리 입니다.
http 통신 라이브러리중에는 JQuery Ajax , fetch 등이 있습니다. 하지만 이 라이브러리 중 요세 가장 인기 있는 라이브러리는 바로 axios 입니다.
위의 그림처럼 npm 에서 axios는 엄청난 다운로드 숫자를 보유하고 있습니다.
Vue에서 webpack-bundle-analyzer를 설치하고 프로젝트 성능최적화 하기
webpack-bundle-analyzer 는 웹팩 번들 파일의 구성요소를 시각화해서 나타내는 리포팅으로써 번들파일이 커지면 그 원인을 찾기에 꼭 필요한 도구입니다. 이 글에서는 Vue 프로젝트에 이 플러그인을 추가하고 사용하는 방법에 대해 학습하겠습니다.
Vue에서 Router를 설치하고 그 사용법에 대해서 알아본다.
Vue Router는 Vue.js 공식 플러그인으로 제공되는 라우팅 라이브러리로 SPA 개발에 사용됩니다.
Vue에서 SPA(Single Page Application)을 구현 시, 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인이 Vue Router입니다.
원래 사용자의 URI Request가 들어오면 서버 즉 백에든에서 Controller가 그 Request에 해당하는 Response로써 정적 파일(html, css, javascript … )을 보내줍니다.
Vue Router는 프론트앤드에서 요청 URI에 따라 전체 새로운 돔을 변경하는 것이 아니라, 브라우져에서 변화가 있는 부분의 돔을 변경하는 방식입니다.
Vue Router는 기본적인 페이지 이동 기능 외에도 다음과 같은 고급 기능을 제공합니다.
