전체 글

● 로더 웹팩에서 로더는 모든 파일을 자바스크립트의 모듈 처럼 만들어줍니다. (이미지, 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..

Q. CSR과 SSR의 차이점은 CSR에서는 브라우저가 html, css, js 파일을 파싱하여 돔 트리를 생성하고, SSR에서는 서버가 돔 트리를 생성하여 브라우저에 전달한다는 점이니? 네, 맞습니다! CSR(클라이언트 측 렌더링)과 SSR(서버 측 렌더링)은 웹 페이지를 렌더링하는 두 가지 다른 접근 방식입니다. CSR에서는 브라우저가 HTML, CSS 및 JavaScript 파일을 다운로드한 다음 이를 구문 분석하여 DOM(문서 객체 모델) 트리를 생성합니다. 그런 다음 브라우저는 이 트리를 사용하여 사용자 디바이스에서 페이지를 렌더링합니다. 즉, 대부분의 렌더링 작업은 클라이언트 측 또는 사용자의 디바이스에서 수행됩니다. 반면에 SSR은 서버가 DOM 트리를 생성하여 브라우저에 HTML로 전달합니..

● 그동안 공부한 것 웹표준을 준수하는 방법 시맨틱 태그 div나 span태그를 막 쓰지 않고 의미가 있는 태그들로 html을 작성해준다. 보다는 으로 등 이 있다. 크로스 브라우징 크로스 브라우징 이슈를 해결하기위해 어떤 기능을 사용한다면, 브라우저가 호환해주는지 늘 확인을 해야하고, can i use 같은 웹사이트로 확인을 해주면 좋다 개발이 완료되면 브라우저별로, 운영체제별로 테스팅을 꼭해주어야한다. SEO에 영향을 미치는 On-page, Off-page가 있다. 광고비를 내고 검색어 상단에 뜨는 거는 Off-page이며, 나머지 meta태그나 html의 다른요소들을 검사하여 검색어와 매칭해주는건 On-page다. 따라서 태그 안을 잘 적어주어야한다. 그렇다고 연관없는 단어나, 단어를 중복해서 메타..