서두

앞으로 프로젝트를 진행하면서 배울 기술스택에 대해 미리 공부하는 시간을 가져보도록 한다. 코드를 사용하는 것까지는 아니고 왜 사용하는지, 어떨 때 사용하는지 등에 대해 공부하려 한다. 확정된 기술스택은 다음과 같다.

1. Next.js(13v)
2. CSSTailwind
3. Typescript

들어본 것도 있고 처음 들어보는 것도 있다. 그러나 결국 전부 새롭게 공부해야 되는 것들이다. 하나하나 기록하며 앞으로를 준비해보자.

Next.js

우선 Next.js란, React로 만드는 서버사이드 렌더링(SSR) 프레임워크다. 여기서 볼 내용은 서버사이드 렌더링과 프레임워크다.

서버사이드 렌더링(SSR)

서버사이드 렌더링(Server Side Rendering)이란, 사용자 페이지를 요청할 때마다 매번 서버에서 데이터를 처리해 화면을 띄우는 방식이다.

이렇게 했을 때 장점은 초기 로딩속도가 빠르다는 것과, 검색엔진최적화가 가능하다는 장점이 있다.

프레임워크

프레임워크란, 뼈대라는 뜻이다.

결국 Next.js는 서버사이드 렌더링을 하게 해주는 뼈대라는 뜻이다. 이걸 사용하는 이유는 뼈대에서 다양한 기능을 제공해주기 때문이다.

제공기능

1. 자동 코드 분할
2. 통합된 API 개발
3. 자동 페이지 라우팅
4. 확장성
5. 큰 규모의 활발한 커뮤니티

등의 기능을 제공하고 있어 많이 사용한다.

알아야 할 것

그렇기 때문에 프로젝트를 시작하기 전에 알아야 할 것은 Next.js는 다양한 기능을 지원해주는 게 가장 큰 핵심이다. 그렇기 때문에 나는 이러한 기능을 잘 다룰 준비를 하고 공부해야 한다.

CSSTailwind

CSSTailwind란? Utility-First를 지향하는 CSS 프레임워크라고 한다.

Utility-First란?

클래스명을 별도로 정의하지않고 제공하는 유틸리티 클래스를 사용하는 특징이다.

코드

이런 건 코드를 보면 빠르게 이해할 수 있다.

<button class="py-2 px-4 font-semibold rounded-lg text-white bg-green-500 hover:bg-green-700">
    Hello, Tailwind CSS!
</button>

이런 식으로 class에 속성을 정하는 형태를 CSSTailwind라 볼 수 있다.

사용이유

1. CSS를 작성할 때 시간을 많이 절약.
2. 컴포넌트 생성과 관리가 용이.
3. 유지보수하기 편함.

이러한 장점이 있어서 사용한다.

Typescript

Javascript의 슈퍼셋인 오픈소스 프로그래밍 언어이다.

슈퍼셋

슈퍼셋이란 +a 라는 의미다. 즉, Javascript의 기능 + 다양한 패턴 등을 제공하여 Javascript의 단점을 보완했다는 걸 의미한다.

사용이유

1. 에러예방
2. 협업용이성
3. 실행속도 향상

과 같은 장점이 있기 때문에 사용한다.

정리하기

이번 프로젝트를 시작하기 전에 다루는 기술스택에 대해 훑어봤다. 왜 사용하는지, 어떨 때 사용하는지에 대한 이해를 기반으로 앞으로의 프로젝트를 준비할 수 있게 되었다.

내가 생각했을 때 이 기술스택들은 다양한 기능을 제공해주고, 협업하는데 도움이 되며, 만들 시스템의 효율성을 향상시켜줄 것들이다. 그렇기 때문에 Javascript라는 기본적인 언어를 알고 있기 때문에 기술스택을 어떻게 활용하는지를 이해하고 사용하면 좋을 것 같다.