minTech

이 글을 작성하는 이유내가 했던 프로젝트들 중에 Next.js를 사용한 사이트가 2개 있다. 내 포트폴리오를 수정하다가 프로젝트에 왜 이러한 프레임워크나 라이브러리를 왜 사용하게 됐는지 선택한 것들의 장점을 살려 이유를 작성하려했는데,  왜 Next.js를 사용해야하는 것인가? 에 대해 내가 아는 답변은 SSR 밖에 떠오르지 않았다. 이러니 난 내가 왜 Next.js를 사용했는지를 작성하는데 어려움을 겪고 있던 것이다. 그래서 이번 기회에 Next.js를 사용하는 이유와 어떻게 하면 next.js를 잘 사용했다고 할 수 있을지 낱낱이 파헤치겠다.  1. 브라우저 렌더링 방식 먼저 React와 Next.js의 가장 큰 차이점이라 하면 Next.js를 사용하는 사람들은 거의 알듯이 브라우저 렌더링 방식에 있..

Vite를 사용하기 전에는,,브라우저에서 ES Modules를 지원하기 전까지는 JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 즉, Javascript 모듈 기능을 브라우저 또는 Javascript 엔진 자체에서 기본적으로 지원하지 못했다.  따라서 require.js, commonJS, AMD 와 같은 외부 라이브러리나 Webpack, Rollup, Percel과 같은 번들러(Bundler)에 의존해야했다. 번들링이란 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 작업을 말한다.번들러를 통해 여러 개의 모듈 파일을 하나로 번들링하여 브라우저에서 실행할 수 있는 하나의 파일로 만들어준다. 📚 CommonJS 와 ES Modules두 개는 모두 JS 모듈을..

"웹브라우저를 렌더링한다." 본격적인 내용에 들어가기에 앞서 브라우저의 렌더링이란 브라우저가 서버로부터 요청해 받은 내용(HTML, CSS, Javascript)을 브라우저 화면에 표시해주는 작업을 말한다. 렌더링 방식 중 CSR, SSR, SSG에 대해 정리해보았다.. ☝️클라이언트 사이드 렌더링(CSR: Client-Side Rendering) 서버로부터 받아온 데이터를 클라이언트 내에서 동적으로 조작하여 렌더링하는 방식이다. 동작원리 사용자가 웹페이지에 접속하면, 클라이언트는 서버로 요청한다. 요청을 받은 서버는 빈 HTML과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. 클라이언트는 서버로부터 받은 텅빈 HTML 문서를 해석하고, 렌더링한다. 브라우저는 자바스크립트 파일을 다운받는다. 다운이..