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 모듈을..

Next.js에서 styled-components 라이브러리를 설치하고, 적용해보았다. 처음에 페이지 스타일 적용을 위해 하나하나 코드를 작성할 때는 원하는 스타일이 적용되었다. 하지만, 페이지 이동이 잘 되는지 확인하기 위해 다른 페이지로 이동하고 해당 페이지로 다시 돌아왔는데 내가 적용했던 스타일이 하나도 적용이 되지 않았다,, 뼈대만 남아있는 느낌...? 🤷‍♂️문제 원인 Next.js의 경우 기본적으로 프리렌더링을 수행한다. 프리렌더링을 수행할 때는 정적으로 생성된 HTML 문서를 렌더링한다. 다운로드한 Javascript 파일을 실행한다. Hydration : Javascript를 읽어 이미 화면에 렌더링되어있는 것들과 연결한다. styled components는 CSS-in-JS 방식이다. C..

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