dev_eun

webpack을 왜 사용하는데? 여러 개의 js 파일이 있고, 그 많은 파일을 한 번에 실행한다고 하면 변수 이름이 중복될 수 있다. 변수 이름이 중복되면 마지막에 선언된 변수만 살아남고 그 전 변수는 아무 의미 없게 된다. 기존의 html에서 js를 가져오는 방식인 는 브라우저에서도 js 파일에 선언된 변수에 접근할 수 있는데, ES Module인 import, export 를 사용하면 접근할 수 없게 된다. 이러한 방법을 모듈화라고 한다. 최신 브라우저에서는 모듈화를 거의 지원한다. 모듈을 사용하려면 로 명시해주면 된다. 웹에서 사용하는 굉장히 많은 파일을 하나로 묶고 모듈을 사용하게 해주는 것이 bundler 라고 한다. bundler의 대표 주자는 webpack! bundle한 후 용량을 줄이기 ..

html, js, css를 코딩을 하다보면 웹을 왔다갔다하면서 새로고침을 하는 게 굉장히 번거로웠다. 찾아보다가 알게된 좋은 vscode 익스텐션이 있다. vscode를 실행 후 익스텐션에서 Live Server 를 검색한다. 설치를 한 후 코드 창에서 우클릭을 하면 Open with Live Server와 Stop Live Server가 생겼다. Open with Live Server를 클릭하면 로컬 웹이 하나 열린다. 이제 코드를 한 번 수정해보자. 그럼 라이브로 웹에 적용이 된다. 새로고침 계속 안해줘도 된다!

열심히 블로그를 만들고 있었는데, footer가 컨텐츠의 길이에 맞춰 위로 올라오는 것이 보기 좋지 않았다. 구글링을 해보니 wrapper의 flex를 설정하는 글이 많아 시도했지만, 문제가 해결되지 않았다. Header Contents Footer * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } #wrap { text-align: center; display: flex; flex-direction: column; height: 100%; } header { width: 100%; height: 60px; background: #ddd; } main { } footer { width: 100%; height..