🤔 브라우저는 어떻게 웹 페이지를 렌더링할까? 서버에 페이지 요청 웹 브라우저에 URL을 입력하면 브라우저는 서버에 웹 페이지를 요청하고 서버는 HTML 파일을 제공(응답)한다. ⚙️ 렌더링 엔진 브라우저에는 여러 구성요소가 존재하는데 구성요소 중, 렌더링 엔진은

들어가기 이전에 작성했던 SEO에 대한 글에서 검색 엔진 최적화를 위해 할 수 있는 일 중 서버에서 HTML을 렌더링하여 클라이언트로 보내는 서버사이드렌더링을 사용하는 것이 있었다. NextJs는 대표적인 서버사이드렌더링을 제공하는 프레임워크이다. 나는 이 글을 작성

🚪 들어가기 개인 프로젝트를 진행하다보니 불필요하게 리렌더링이 발생하는 부분이 해결해야겠다는 생각이 들었다. 이 글에서는 렌더링이 발생하는 이유와 내가 개인 프로젝트에서 최적화를 진행했던 부분에 대해 다루려고 한다. 따라서 모든 최적화에 대한 내용을 다루지는 않을 예

🤔 Webpack이란? 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 이다. > At its core, webpack is a static module bundler for modern JavaScript applications. When webpack proce

🤔 Babel이란? 바벨은 자바스크립트 컴파일러이다. > Babel is a JavaScript compiler Babel 공식페이지 🔎 컴파일러란? 컴파일러는 특정 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어나 컴퓨터 프로세서가 이해할 수 있는 기계어

🔎 SEO(Search Engine Optimization)는 무엇일까? SEO는 우리가 만든 웹 사이트나 웹 페이지를 최적화하여 구글과 같은 검색 사이트에서 더 높은 위치에 위치하기 위한 작업이다. 즉, 사용자가 어떠한 것을 검색할 때, 웹 사이트의 일부를 가져와

🚪 들어가기 React Suspense는 React 16에서 릴리즈된 기능이다. React 18에서는 추가된 기능을 제공하고 있고 Error Boundary와 합친 기능으로도 사용할 수 있다고 하여 적용해보려한다. 이 글에서는 React 16에서의 Suspense와

에러가 발생하면 개발자들은 개발자 도구를 열어 에러 내용을 확인할 수 있지만 사용자에게 무엇이 잘못된지 알 수 없고 또한 어플리케이션의 모든 작업이 중단되어 좋은 경험을 줄 수 없다. 따라서 우리는 적절히 에러를 핸들링해 줘야 한다.

🚪 들어가기 React나 Redux를 사용하다 보면 불변성이라는 개념을 많이 들어 볼 수 있다. 불변성을 유지하기 위해 라이브러리를 사용하기도 하는데 특히 Redux-Toolkit에서는 내장된 미들웨어로 Immer 라이브러리가 들어가 있기도 한다. 불변성이 무엇이고

🚪 들어가기 getInitialProps는 서버에서 페이지에 필요한 데이터를 채우고 렌더링한 페이지를 클라이언트에 보낸다. 따라서 SEO에 친화적이다. 그러나 Next 9.3에서 getServerSideProps가 도입되면서 getServerSideProps가 ge