모듈 (2) 썸네일형 리스트형 개발환경 설정 - Webpack 에디터 설정 VSCode 에디터 기본 브라우저 설정 크롬 브라우저 모듈 번들러란? 웹 개발에 필요한 자원 (HTML, CSS, JS, Image 등등 ) 을 모두 각각의 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만들어주는 도구 웹팩 (WebPack) 이란? 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 최종 배포용 파일을 만들어줌 태그가 여러개 있을 때 순서보장도 중요하기 때문에 이런 것도 WebPack이 해준다. 사용 이유에 대해서는 참고 웹팩 설치 방법 새로운 폴더를 생성한다 폴더에서 터미널을 열어 아래의 코드를 입력해 package.json 을 초기화해준다. npm init -y package.json 파일이 생성된 것을 확인한다. 아래의 코드를 터미널에 입력해 웹팩을 .. CSS Modules CSS Modules란? CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술 모듈화된 CSS를 번들러로 불러오면 다음과 같이 사용자가 정의했던 클래스네임과 고유한 클래스네임으로 이뤄진 객체가 반환됨 장점 클래스명이 충돌하는 단점을 극복할 수 있다. 컴포넌트 단위로 스타일을 적용할 때 유용하다. 유지보수가 편해진다. 단점 CSS Modules 는 컴포넌트를 작성할 때 한곳에서 모든 것을 작성하지 않는다. 많은 CSS 파일을 따로 관리해야하는 문제점 발생 사용법 [파일이름].module.css 으로 파일 명을 저장해야함 module.css 파일을 import 해준다 styles 를 console.log 로 확인해보면 객체로 받아와진.. 이전 1 다음
