프론트엔드/웹팩, 바벨 썸네일형 리스트형 웹팩 서버 정리 웹팩 서버 웹팩 서버는 프론트엔드 개발환경에서 개발용 서버를 제공해준다. 웹팩을 통해 빌드한 파일들을 정적인 형태로 제공해주는 서버인 것이다. 사용법은 아래와 같다. 우선 웹팩 서버를 설치한다. npm i webpack-dev-server 설치한 뒤에 npx webpack serve 명령어를 입력하여 서버를 띄울 수 있다. 포트 기본값은 8080인듯하다. 8080포트에 서버를 열면서 설정에 따라서 해당 폴더 내에 있는 정적 파일들이 올라간다. 그럼 이제 해당 웹팩 설정에 포함되는 코드를 변경하면 바로바로 반영하여 브라우저에 보여준다. contentBase는 파일을 올릴 대상의 폴더이름이다. dist라고 설정이 되어있으니 dist 폴더 내의 파일들이 올라갈 것이다. overlay를 true로 설정하면 에러.. 더보기 바벨, 린트 간단 정리 바벨 ES 2015+에서 작성한 코드에 더해서 타입스크립트, JSX 코드들도 모든 브라우저에서 동작하도록 도와주는 도구이다. 바벨은 이러한 것을 어떻게 해주는 것일까? 바벨의 동작과정은 다음과 같다. 입력받은 코드를 파싱 🤜 변환 🤜 결과물 출력 바벨은 코드를 입력받아 변환시킨 코드를 반환해주는 친구이다. 코드를 변환해주는 작업은 사실 플러그인이 담당한다. 플러그인을 설치하고 바벨을 사용해보자 const a = a => console.log(a); const 가 var 로 바뀌었다. block-scoping 플러그인이 동작한 결과이다. 블록 스코핑을 따르는 변수 const let 등을 var로 바꿔주는 플러그인이다. 매번 이렇게 하기엔 귀찮으므로 webpack.config.js 처럼 바벨도 config .. 더보기 웹팩 간단 정리 웹팩 왜 쓰나? 보통 자바스크립트 코드를 html에 넣을땐 태그를 이용한다. 만약 file.js에서 a 라는 변수를 선언했으면 a 변수는 어디서든 접근 가능하게 된다. 그렇기 때문에 전역 스코프가 오염되지 않도록 하기 위해서는 자바스크립트 모듈 시스템을 사용해야한다. 일부 브라우저에서는 script 태그에 type="module" 이라고 줌으로써 모듈 시스템을 이용한다. type="module" 이라고 해줌으로써 브라우저가 main.js는 모듈 시스템을 이용한다고 알게끔해주고 이제 main.js 에서는 import 해오는 것이 가능하게 된다. 참고로 export default가 아닌 그냥 export 들은 { } 로 감싸야한다. nodejs 에서는 require과 exports로 가능하고 ES2015에서.. 더보기 이전 1 다음
