반응형

프론트엔드 개발 중 webpack을 사용하기도 한다.

웹 어플리케이션 해석 시 js 외 리소스들을 변환 가능하도록 loader를 사용한다.

 

Webpack 관련 참고 링크

https://seogeurim.tistory.com/13

 

우리는 Webpack이 왜 필요할까?

본 글은 2020년에 작성된 글입니다. 프론트엔드 개발 중이라면 Webpack이라는 기술에 대해 필수적으로 마주치게 된다. 이번 포스팅은 Webpack이 무엇인지, 왜 필요한지에 대해 찬찬히 알아보려한다. W

seogeurim.tistory.com

https://devraphy.tistory.com/194

 

2. Vue - webpack을 이용한 프로젝트 생성

0. 시작하기 전에 - webpack 포스팅에서 생성한 프로젝트를 기반으로 Vue 프로젝트를 만들 예정입니다. - 필요하신 분은 아래에 있는 제 github 주소를 사용하여 해당 프로젝트를 사용하셔도 됩니다. g

devraphy.tistory.com

https://joshua1988.github.io/webpack-guide/concepts/loader.html#loader

 

Loader | 웹팩 핸드북

Loader 로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성입니다. 엔트리나 아웃풋 속성과는 다르

joshua1988.github.io


vue 공부 겸 테스트 중이었다.

일부 이미지(*.jfif)나 ico 파일에서 에러가 발생하여 알게 되었다.

img1 [ 이거 때문에 검색해보느라 시간을 ... ]

css파일으 style 태그안에 import 가능하다.

// example
<style>
@import "@/assets/css/common.css";
@import "@/assets/css/content.css";
</style>

그리고 vue 기본 적인 레이아웃 관련 링크

https://ospace.tistory.com/788

 

[vue.js] 레이아웃 구성

웹페이지는 여러 화면으로 구성되어 있다. 일반적으로 상단에 로고와 메뉴, 가운데에 컨텐츠, 하단에 사이트정보 등 형태로 되는 경우가 많다. 이런 화면을 모든 페이지에 반복적으로 나타나는

ospace.tistory.com


Vue 이미지 파일 연결 및 경로 별칭 설정

https://devraphy.tistory.com/195

 

3. Vue - 이미지 파일 연결 및 경로 별칭 설정

1. 파일 확장자 생략을 위한 설정 webpack.config.js 파일에서 위의 사진과 같이 resolve 속성에 extensions를 설정한다. js와 vue 파일을 import하거나 링크하는 경우, 확장자를 따로 명시하지 않아도 동작하

devraphy.tistory.com


 

'2023' 카테고리의 다른 글

2023.01.13.vue build  (0) 2023.01.13
2023.01.12.  (0) 2023.01.12
클린 코드  (0) 2023.01.10
정보처리기사  (0) 2023.01.10
2023.01.10. 공부 참고  (0) 2023.01.10

+ Recent posts