● 로더 웹팩에서 로더는 모든 파일을 자바스크립트의 모듈 처럼 만들어줍니다. (이미지, CSS, 폰트.. 등) 웹팩(1)에서 실습했던 파일을 그대로 가지고 실습을 진행해 보겠읍니다. 폴더 최상단에 파일을 하나 만들어줍니다. my-webapck-loader.js module.exports = function myWebpackLoader(content){ console.log('myWebpackLoader가 작동함'); return content; } 로더는 함수로 만들어줍니다. 다시 confing파일로 돌아와서 webpack.config.js const path = require('path'); module.exports = { mode : 'development', entry : { main : './s..
웹팩 같은 경우는••• 이전에 한번 포스팅을 한적이 있었는데요, 웹팩에 대한 내용을 포스팅한거라기보다는 모듈에 대해서 포스팅한 적이 있었습니다. ESMAScript에서 표준으로 채택된 모듈방식은 import export 이고, node.js환경에서 쓰이는 모듈방식은 CommonJS방식이었죠. 그래서 require, module.export 방식이었습니다. [48장 모듈] ● 모듈의 일반적인 의미 모듈이란 무엇인가? 우리가 어떤 문제를 해결할 때, 막상 문제에 도전한다면 해결하기 어려울 것이다. 하지만 문제를 쪼개어 하나씩 해결한다면 조금 더 쉬울 것이다. ddaeunbb.tistory.com 기본적인 이런 사항만 일단 알아두고 웹팩에 대해 알아봅시다. ● Webpack 이란? 이전에 모듈방식이 지원되기 ..
● 서버 사이드 렌더링의 이해 CSR SSR 에 대해서 자꾸 많은 것을 보고,, 그게 먼지 개념은 항상 들었지만 이해하기가 너무 힘들었습니다. 이번기회에 실습으로 아예 SSR을 접하면서 그 차이를 직접 느껴보고 개념을 이해하려고 합니다. ❍ 웹의 역사(SPA 시대까지) 1990년대 중반 - 정적 웹 사이트들 1990년대 중반까지는 모두 정적 웹 사이트들(Static Sites)이었다. 이미 잘 만들어진 HTML 문서들이 만들어져 있고, 사용자가 브라우저에서 해당 사이트에 접속하면 서버에 이미 배포되어져 있는 HTML 문서를 받아와서 보여주는 방식입니다. 예를 들어 페이지 내에서 다른 링크를 클릭하면, 다시 서버에서 해당 페이지의 HTML 문서를 받아온 후 페이지 전체가 업데이트 되어야 한다. 사용성이 떨..
SSR 서버사이드렌더링 구현하려고 했더니 바벨을 마주 안할 수가 없네요..ㅎ ㅎ %^~ㄴㅇㄹ~@#$~!! 예상 외의 스터디가 되었습니다. 바벨 -> 웹팩 -> SSR 순으로 공부를 하면 좋을 것 같다는 생각이 드네요. 이전에 스터디에서 바벨에 대해서 듣기만 했는데, 역시 제 스스로의 것으로 만드는 건 그냥 발표를 듣는거랑 직접해보는 거랑은 차이가 있는 것 같습니다.. ● 바벨이란 무엇인가? 바벨은 브라우저에서 ES6이상의 문법들을 사용하기 위해서 이전 버전의 자바스크립트 코드로 변환해주는 도구입니다. (트랜스파일러) 브라우저마다 ES6의 문법의 호환성이 각각 달라서 크로스브라우징 이슈가 생겨나곤 했는데요, 이를 해결하기 위해 나타난 것이 바벨입니다. ● 트랜스파일러 VS 컴파일러 우리는 컴퓨터는 0과 1..
제너레이터.. 오지말라고 그렇게 협박을 했거늘.. 하지만 마주하게 되었습니다. [34장 이터러블] 시작되었읍니다.. 제너레이터로 가기 이전의 첫번째 지옥열차를 탑승하신 것을 축하합니다.. 이터레이터를 들어가기 전에, 먼저 우리가 모던자바스크립트 책에서 자주 볼 수 있었던 '유사 배열 ddaeunbb.tistory.com 우리는 이전에 이터러블을 공부하면서 직접 이터러블과 이터레이터를 구현해보았죠? 왜 이터러블이 필요한지에 대해서는 아래에 포스팅해 두었습니다. [이터레이터 왜쓸까? - 제너레이터로 향하는 길] 약 한달 전.. 저는 이터러블, 이터레이터에 대해 공부를 하고.. 스터디에서 발표도 진행했었습니다. [34장 이터러블] 시작되었읍니다.. 제너레이터로 가기 이전의 첫번째 지옥열차를 탑승하신 것 dda..
약 한달 전.. 저는 이터러블, 이터레이터에 대해 공부를 하고.. 스터디에서 발표도 진행했었습니다. [34장 이터러블] 시작되었읍니다.. 제너레이터로 가기 이전의 첫번째 지옥열차를 탑승하신 것을 축하합니다.. 이터레이터를 들어가기 전에, 먼저 우리가 모던자바스크립트 책에서 자주 볼 수 있었던 '유사 배열 ddaeunbb.tistory.com [Symbol.iterator]를 가지고 있으면 이터러블이고, 이를 실행해서 내뱉는건 이터레이터가 되고.. 이터레이터는 이터레이터 리절트 객체를 반환하고, 리절트 객체에는 value, done이라는 프로퍼티를 가져야하고 까지는 이해했지만 이 개념을 언제 활용하는 것이 좋을까에 대한 고민을 좀 많이 했던 것 같습니다. ● 일단 결론부터 여러 블로그를 보다가 좋은 비..
