2021-12-17 TIL

Fact

• 백준 알고리즘 홀수,10부제,일곱난쟁이 문제를 풀었다.
• 프론트엔드에서 Nest.js를 사용하는 방법을 공부했다.

Feelings

• Nest.js는 정말 좋은 기능이 많은것같다. 리액트의 단점을 보완해주고 성능까지 올려주니 꼭 쓰자! 특히 react-router-dom 을 사용해 라우팅을 직접 해줄필요가 없으니 정말 편하다!

Findings

• [Next.js] 나는 여태 Next.js 가 백엔드에서 쓰이는줄 알았다. 근데 내가 하는 프로젝트에서 Next.js를 프론트엔드에서 사용하고있었다.. React의 Virtual DOM을 기반으로 클라이언트 사이드 렌더링을 하는데, 이경우 HTML, JavaScript, css를 모두 받아 렌더링 트리로 만들어야하기 때문에 첫 로딩이 오래걸린다는게 큰 단점이다. 또한 빈 HTML을 가져와서 script를 로딩하기 때문에 Search Engine Optimization에서 포털 검색에 노출이 될수가 없다.

이러한 문제점을 해결하기 위해 Next.js는 Pre-rendering을 통해 페이지를 미리 렌더링하여 HTML을 생성하여 성능을 향상시키고 SEO에서 장점을 얻을수 있다.

Server-side Rendering

React에서도 써브파티 라이브러리나 내장기능을 사용해서 SSR(서버사이드렌더링)을 구현할 수 있지만, Next.js를 사용하게되면 별다른 설정없이 SSR을 구현할수 있다고한다. Nest.js를 사용하면 SSR뿐만 아니라 CSR또한 사용할수있어 두장점을 같이 얻을수있다.

File Based Routing

React는 라우터가 없어서 보통 react-router-dom을 사용해서 렌더링한다. 하지만 Nest.js의 경우 별다른 설정없이 편하게 라우팅을 할수있다. 폴더 내부의 파일위치나 파일명에 따라서 라우팅 할수있다.

Image Optimization

기존 태그를 대체하는 next/image 패키지에 있는 image 컴포넌트를 제공합니다. 브라우저가 지원하는 경우에 Viewport에 맞게 다양한 이미지 크기를 로드 해 둘수 있어. 성능을 개선시킬수 있다고 한다.

Future Action

• 바닐라 자바스크립트를 공부하고싶은데 뭐로 공부해야할까?