Front End 개발5 [Vue.js] vue-loader, SFC Spec, webpack 설정 1. vue-loader란 Vue 컴포넌트를 단일 파일 컴포넌트(SFCs) 형식으로 작성할 수 있게 해주는 webpack용 로더 vue-loader가 무엇인지, 어떤 기능을 하는지 그리고 webpack에서는 어떻게 설정해주면 되는지 정리해보았다. 2. Vue Single-File Component (SFC) *.vue 파일은 HTML과 같은 구문을 사용하여 Vue 컴포넌트를 설명하는 사용자 지정 파일 형식이다. 각 *.vue 파일은 , 3. vue-loader의 기능 여기서 vue-loader는 파일에서 각 언어 블록을 추출하고 필요한 경우 다른 로더를 통해 파이핑하여 (ex) 그 외에도 제공하는 기능을 요약하자면 다음과 같다. ▷ *.vue 파일에 커스텀 블록 생성 가능 ▷ 개발 중 핫 리로딩 제공 4.. 2022. 3. 3. [CSS] Defensive CSS, 자주 사용하는 팁 모음 Defensive CSS CSS에서 종종 발생하는 문제로부터 보호되는 CSS를 작성하는 데 도움이 되는 스니펫 콜렉션 CSS에서 꽤나 자주 마주치는 상황들이 있다. 예를 들어 글자가 박스에서 튀어나온다던지 이미지 비율이 깨진다던지 그런 상황들에 대해서 대처하는 CSS 스니펫을 모아 정리해둔 글이 있길래 공부할 겸 해당 글 + 추가 팁들을 정리해보았다. Defensive CSS - Ahmad Shadeed A list of defensive CSS techniques to avoid potential future issues ishadeed.com 1. Flexbox 감싸기 Flexbox Wrapping display 속성을 flex로 설정했을 때 flex로 설정한 wrapper 크기가 내부 콘텐츠보다 작.. 2022. 2. 3. [CSS] 선택자(selector) 우선순위, 명시도(specificity), !important 보통 하나의 요소(element)에는 여러 스타일 속성이 설정되어 있는 경우가 많다. 브라우저는 그렇게 설정된 속성들 중 어떤 속성을 우선적으로 적용할지를 계산한다. 먼저 선택자끼리 비교했을 때 우선순위가 높은 순대로 정리하자면 다음과 같다. 1. CSS 선택자 우선순위 1. !important 2. 인라인 스타일(HTML에서 직접 스타일 준 경우 style="") 3. ID 선택자(#example) 4. 클래스 선택자(.example), 속성 선택자([type="radio"]), 의사 클래스 선택자(:hover) 5. 유형 선택자(h1), 의사 요소(:before) 6. 부모 요소에 의해 상속된 속성 (선택자에 대해서 잘 모르겠다면 https://developer.mozilla.org/ko/docs/W.. 2022. 1. 26. [Tip] 브라우저에서 JS, CSS 파일 변경사항 반영 안 될 때 해결 방법 1. 문제 상황 개발하다가 코드 변경 사항이 브라우저(크롬)에 반영이 안 될 때가 있었다. 분명 파일은 변경됐고 웹팩 빌드도 잘 되어서 build 폴더에 있는 min.js 파일까지 제대로 변경이 됐는데 브라우저에는 새로고침을 해도 변경사항이 반영이 되지 않았다. 찾아보다가 브라우저가 파일을 캐싱하고 있어서라는 사실을 알았다. 2. 해결 방법 개발자 도구 > 네트워크 탭에 들어간다. 그러면 상단에 Disable cache가 있는데 이를 체크하면 된다. 한글 모드에서는 캐시 사용 중지를 체크하면 된다. 2022. 1. 26. [환경설정] 바닐라 자바스크립트 + Webpack + Babel + Jest 설정하기 바닐라 자바스크립트로 프론트엔드 개발을 시작하기에 앞서 웹팩과 바벨을 사용하여 개발 환경을 설정하려 합니다. 웹팩과 바벨은 다음과 같은 역할 등을 수행할 수 있습니다. Webpack 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러 웹팩을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없습니다. 또한 여러 개의 자바스크립트 파일을 하나로 번들링함으로써 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라질 수 있습니다. Babel 최신 사양의 소스 코드를 ES5 사양의 소스 코드로 변환(transpiling) 바벨은 ES6 이상의 자바스크립트 소스 코드를 트랜스파일링.. 2021. 9. 6. 이전 1 다음 반응형
