Frontend
-
프론트엔드 개발 환경 : Webpack - pluginFrontend 2023. 6. 20. 18:04
안녕하세요 호기심 많은 도라희몽입니다! 회사 업무에 치이고, 여러가지 다른 할 것들도 많아지다보니 블로그 작성이 많이 늦어졌네요😞 다시 웹팩에 대해서 리마인드 공부를 할 상황이 생겨 이어서 다시 작성하려구요 아 그리고 블로그는 깃헙과 벨로그로 두개 이용해서 작성하려구 합니당 플러그인 plugin 로더가 각 파일 단위로 처리했던거에 반해서, 플러그인은 번들 된 결과물을 처리한다. 자바스크립트를 난독화 한다거나, 특정 텍스트를 추출하는 용도로 사용된다. 플러그인의 동작 원리 플러그인이 읽히는 원리는, class MyPlugin { apply(compiler) { compiler.hooks.done.tap("My Plugin", stats => { console.log("MyPlugin: done") }) }..
-
프론트엔드 개발 환경 : Webpack - loaderFrontend 2022. 9. 2. 11:28
안녕하세요 호기심 많은 도라희몽입니다! 벌써 8월의 마지막이 다가왔네요! 날씨도 요즘 9월이 바짝 다가오자마자 선선해지더라고요 다음 주부터 회사 업무가 엄청 바빠질 것 같은데 웹팩을 계속 이어서 공부할 수 있을지 모르겠네요ㅠㅠ그래도 열심히 도전해봐야겠어요! 로더 loader 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올수 있다. 이게 가능한 이유는 웹팩의 로더 때문이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다..
-
프론트엔드 개발 환경 : Webpack - entry/outputFrontend 2022. 8. 25. 15:19
안녕하세요 호기심 많은 도라희몽입니다! 이전에 웹팩에 대해서 공부할 때 웹팩 탄생 배경에 대해서는 간과하고 넘어가면서 공부하니까 웹팩을 아무리 공부해도 제대로 이해하지 못한 느낌이었어요ㅠ! 이전 블로그에 웹팩 배경에 대해서 정리하면서 공부하니까 뭔가 웹팩 작동원리가 술술 이해되는 느낌? 웹팩 작동 원리 웹팩의 작동 원리를 우리가 이전에 이용했던 예제로 이용해보자. 우리가 파일을 작성하게 되면 모듈에 대한 의존성들이 생기게 된다. 의존성이 생기게 되는 이유는 app.js 가 sum.js를 Import 해서 계속 계속 불러오는데, 그래서 app.js 이 sum.js 파일을 의존하고 있다고 이해하면 된다. 여기서 웹팩의 역할은 모듈로 연결된 여러 개의 자바스크립트 파일을 하나로 합쳐주는 역할을 한다. 그리고 ..
-
프론트엔드 개발 환경 : Webpack - 배경Frontend 2022. 8. 23. 12:04
안녕하세요! 호기심 많은 도라희몽입니다! 웹팩 배경이나 기초에 대해서는 한번 훑긴 했긴 했지만, 누군가 파고드는 질문을 하게 될 때 당황하지 않고, 버벅이지 않기 위해 블로그를 다시 한번 정리할려구 합니다 또한 누군가에게 설명할 때 이해하기 쉽게 설명할 수 있는 그때 까지!! 웹팩 배경 웹팩의 배경을 살펴보려면 import/export 가 없던 모듈 이전 상황부터 살펴야 한다. // sum.js function sum (a ,b ){return a + b}; // 전역 공간에 sum 함수가 노출된다. // app.js sum(1,2); //3 sum.js가 로딩되면 app.js는 sum이라는 함수를 찾은 뒤에 함수를 실행한다. 문제는 다른 파일인데도 불구하고 sum이라는 함수가 전역 공간에 노출되는 것이..
-
프론트엔드 개발 환경 : npmFrontend 2022. 8. 20. 22:36
안녕하세요 호기심 많은 도라희몽입니다! 1년 차가 되면서 회사 프로젝트의 번들링 성능에 대해서 문제점을 느끼게 되었고, 이를 개선하고자 Webpack에 자연스럽게 관심을 가지게 되었습니다. 사실 Webpack의 중요성을 크게 느끼지 못해서 관심도 없었고, 항상 초기 세팅이 되어있는 프로젝트를 진행하다 보니, wepback 이 이렇게 방대한 내용인 줄도 몰랐네요.. 열심히 공부해봐야겠어요! 프론트엔드 개발에 Node.js가 필요한 이유 1. 최신 스펙으로 개발할 수 있다. 자바스크립트 스펙은 빠르게 발전하고 있지만, 브라우저의 발전 속도는 항상 느리다. 그래서 자바스크립트의 최신 문법이 나오면 항상 트랜스파일러가 필요한데, 트랜드파일러는 모두 node 환경에서 이루어지고 있다. 2. 빌드 자동화 개발을 완..