웹팩에 외부 라이브러리를 추가하는 방식에 대해 정리된 글이 많이 없어서 정리하고자 한다. 나는 오픈소스인 bootsrtap을 설치해 사용했으며, 이때 기반이 되는 jquery를 웹팩에 추가하는 방식으로 진행했다.CLI로 신규프로젝트 생성 및 bootstrap이 설치되었다는 가정 하에 진행한다! (npm i bootstrap) 1. Bootstrap 설정 Bootstrap이란? 반응형 웹사이트를 개발하기 위해 트위터에서 오픈소스로 공개한 UI Framework이다. jQuery기반으로 되어 있으며, PC, Tablet, Mobile의 스크린을 자유롭게 설계하여 UI의 표현을 가능하게 한다. Bootstrap의 경우는 js 이외의 UI를 표현해주는 css파일도 포함시켜줘야 합니다. 따라서 아래와같이 두가지를..

위아래로 아코디언(accordion) 형식으로 메뉴를 펼치고 접는 로직을 짜면서 메소드를 정리하고자 부트스트랩의 콜랩스 예제를 정리했다. 아코디언(Accordion) 타입 예제 HTML 삽입 미리보기할 수 없는 소스 1. href or data-target 첫번째 예시는 클릭했을때 펼칠 영역을 href를 사용하여 선언하였고, 두번째 예시는 클릭하였을때 펼칠 영역을 data-target을 사용하여 선언하였다. 접힌 대상은 두가지 속성을 사용하여 요소를 표시하고 숨길 수 있다. 다만, 두가지 속성을 이용할때 data-toggle="collapse" 선언은 필수이다. 2. role 컨트롤의 HTML 요소가 버튼이 아닌 경우에는 role에 속성을 추가해야한다. 위의 예시의 경우 div 속성이므로 role에 ta..