5. 프론트엔드 개발환경의 이해: 웹팩 개발 서버

vue.js와 node.js를 공부하면서 다시 정리할 예정

 

7강 내용 정리

https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174

프론트엔드 개발환경 이해 | T아카데미 온라인강의

 

웹팩 개발 서버

---

웹팩 개발 서버는 웹팩과 별개다. 따로 설치를 해야 한다.

매번 브라우저 새로 띄워서 새로고침할필요 없이, 그냥 저장만 누르면 알아서 브라우저를 갱신해준다!!

 

설치:

$ npm i -D webpack-dev-server

package.json:

{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

 

서버 시작:

$ npm start

 

웹팩서버를 시작한상태로 그냥 소스코드를 고치면 바로바로 갱신된 내용이 뜬다.

 

신문물...

 

기본 설정

웹팩 설정 파일의 devServer 객체에 개발 서버 옵션을 설정할 수 있다.

자세한건 여기랑 여기를 보자.

 

 

그냥 소스코드를

 

웹팩개발서버는 목업서버 역할도 한다.

 

 

CORS Error: 도메인이 다른 API를 호출하면 보안정책으로 막아버림

devserver의 proxy를 이용하여 ajax 테스트를 진행할수있다.

 

 

API 연동

---

맨 아래 원본 링크를 참고하자.

시간이 없어서 패스

 

 

 

핫 모듈 리플레이스먼트

---

변경한 컴포넌트의 내용만 갱신한다! 결과컴포넌트를 갱신했으면 인풋컴포넌트에 넣은 내용은 걍 냅둔다.

SPA(Single Page Application)같은경우 매우 쓸만한 기능이다. 브라우저에 입력한 데이터를 보관한채로 갱신할수 있다!

 

webpack.config.js:

// webpack.config.js:
module.exports = {
  devServer = {
    hot: true,
  },
}

 

이하는 nodejs와 vuejs를 공부하면서 다시 정리할 예정이다.

 

 

참고

---

http://jeonghwan-kim.github.io/series/2020/01/02/frontend-dev-env-webpack-intermediate.html

프론트엔드 개발환경의 이해: 웹팩(심화)