NEXT 를 사용해 서비스를 만들어보자
한달안에 서비스 릴리즈 하기
NEXT 란
NEXT 는 공식문서의 설명에 나와있듯이 The React Framework for the Web 이다. Used by some of the world's largest companies, Next.js enables you to create high-quality web applications with the power of React components. 하이퀄리티 앱 어플리케이션을 만들 수 있다는데, 과연 어떤 핵심 개념들이 있는지 보자!
Next 는 서버 사이드 렌더링 (SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원한다. 프레임워크 이기 때문에, 개발에 필요한 도구들과 규격이 어느정도 정해져있다.
NEXT 의 주요 특징
파일 기반 라우팅 : Next.js에서는 페이지를 pages 디렉토리에 파일을 생성하는 것만으로 라우트를 설정할 수 있다. 파일의 이름이 URL 경로와 자동으로 매핑됩니다.
서버 사이드 렌더링(SSR) : 페이지를 요청할 때마다 서버에서 HTML을 생성하여 클라이언트에 전송한다. 이를 통해 SEO(검색 엔진 최적화) 및 초기 로딩 성능이 개선된다.
정적 사이트 생성(SSG) : 빌드 시점에 HTML을 미리 생성하여 배포한다. 정적 콘텐츠가 많을 경우 매우 빠르고 효율적인 웹사이트를 구축할 수 있다.
클라이언트 사이드 렌더링(CSR) : JavaScript로만 페이지를 렌더링하며, 전통적인 React 애플리케이션처럼 동작한다.
API 라우트 : app/api 디렉토리 내에서 API 엔드포인트를 정의할 수 있고, Severless Function 나 간단한 벡엔드 기능을 구현할 수 있다.
이미지 최적화 : next/image 컴포넌트를 제공하여 이미지 최적화를 자동으로 처리한다. 이를 통해 이미지 로딩 속도가 향상된다.
코드 스플리팅 : (오 이것도 자동으로?) 페이지 단위로 코드를 분할하여, 초기 로딩 시간을 단축하고 성능을 최적화한다.
내장 CSS/SCSS 지원 : CSS,SCSS 파일을 페이지나 컴포넌트에 직접 import 하여 사용할 수 있다. 또한 CSS 모듈을 지원해 컴포넌트 단위로 스타일을 캡슐화할 수 있다.
Internationalization (i18n) : 다국어 지원을 위한 내장 기능을 제공하며, 다양한 언어로 웹사이트를 쉽게 구축할 수 있다.
NEXT 사용해보면서 느끼고 있는 점
무엇보다 개발 편의성을 느끼고 있다. 파일 기반 라우팅을 자동으로 해주고, 자동 코드 분할을 통해 최적화가 되어있어 개발자 경험이 크게 향상된다. 그리고 다양한 렌더링 방식을 쉽게 구현할 수 있다. 내가 만들고자 하는 서비스에서 특정 컴포넌트들마다 렌더링 전략을 원하는대로 선택하여 구현할 수 있다. 그리고 이미지 최적화 등이 자동으로 되기 때문에 웹사이트의 성능이 크게 향상된다. NEXT 의 Serverless Function 도 정말 유용하다. 간단하게 서버에서 처리하고 싶은 함수를 NEXT 프레임워크에서 작성할 수 있기 때문에 매우 유용한거같다. tailwindCSS 도 처음 사용해보고 있는데, NEXT 와 tailwindCSS 의 조합은 아주 매력적이다. NEXT 의 layout 혹은 template 기능을 같이 활용해서 스타일을 적용하게 되면 개발을 빠르게 할 수 있다.
불편하다고 느끼는 점
우선 프레임워크이다 보니, 리액트에서 개발했던 것처럼 내 마음대로 핸들링이 되지 않는다. 이것은 어떻게 보면 장점일 수도 있는데, 프레임워크에서 정해준 대로 개발을 해야하기 때문에 개발자들끼리 논쟁이 생기지 않는다. 프레임워크에서 권장하는 방향성 대로 개발하는게 최대한 리스크를 줄일 수 있다. 그리고 런닝커브가 존재한다. 기존의 React 앱만 개발 해봤던 나로서는 각 컴포넌트들을 개발하는데 있어서, NEXT 의 컴포넌트가 서버에서 렌더링 되는지 클라이언트에서 렌더링 되는지 헷갈렸던 부분이 있었고, 각 컴포넌트를 렌더링 하는데 있어서 어떤 전략을 취해야할지 아직은 정확하게 감이 오지 않는다. 그러나 점점 어떤식으로 활용하면 될지, 기본기를 다져가면서 공부중이다.
새로운 언어나 프레임워크를 공부할 때 가장 좋은 방법은 해당 내용을 목적으로 공부하는게 아닌, 어떤 서비스를 만들기 위해 언어나 프레임워크를 수단으로서 따라오게 하는 방법이다. 개발 문서를 읽을 때 해당 개념을 막연히 공부해야겠다 생각하고 접근하면 단순히 문서를 읽고 해당 개념을 인식하고 끝나고 만다. 그러나 특정 서비스를 만들기 위해 개발 문서를 공부하다 보면 주도적으로 공부하게 되고, 좀 더 좋은 접근 방법은 없는지 계속해서 고민하게 된다. 그리고 하나의 기능을 구현하기 위해서는 다양한 개념들이 엮여서 따라온다. 기술을 수단으로 따라오게 하는 공부 방법은, 새로운 기술이나 개념을 엄청난 속도로 내껄로 만들 수 있게 해준다.
나는 현재 Deskify 라고 하는 서비스를 만들고자 한다. Deskify 는 자신만의 데스크셋업을 공유하는 SNS 이다. 나 처럼 SNS 에 자랑하고 보여줄 수 있는게 데스크 셋업 밖에 없는 사람들의 문제를 해결해고자 출시하려고 하는 서비스이다. 니치 전략을 통해 최대한 특정 타겟을 잡고 서비스를 빠르게 개발해 MVP 로 릴리즈할 생각이다. MVP 개발의 핵심은 속도이다. 이 서비스가 얼마나 사람들에게 가치가 있을지 판단하는 것은 유저의 몫이다. 어떤 언어, 프레임워크를 사용했건 해당 서비스가 사람들에게 가치가 없다면 아무런 쓸모가 없다. 그것은 마치 목적지가 없는 비행기를 타는 것과 동일한 것이다. 기술이라고 하는건 목적성이 제일 중요하다. 그리고 비즈니스에서는 가치가 제일 중요하다. 당신이 가진 기술은 사회에 얼마나 많은 가치를 제공하고 있는가?
라고 했지만,, 땀 질질 싸면서 개발중.. 이다. 기술적인 완벽함을 쫓기보다 우선 마감기한에 릴리즈하자. 그리고 기술적 부채는 끊임없이 갚는걸로 한달안에 릴리즈할 수 있으려나..
Last updated