[Next.js 13] 풀스택으로 블로그 만들기 0. 프로세스와 용어 이해하기 (컨트롤러, 서비스, 서비스로직..)

 

 

 

 

백엔드 개발자들이 정말 많이 얘기하는 컨트롤러, 서비스, 서비스로직...
신입 프론트 개발자에게는 너무나 어려운 백엔드의 세계 🫠

 

 

Next.js is a React framework for building full-stack web applications.

 

 

Next.js 를 공부하다 보면 자꾸 보이는, "Next.js는 풀스택 프레임워크"라는 말.

넥스트로 백엔드까지 구현할 수 있다는 것.

네임드 개발자 제로초님에 의하면,
Next.js에는 서버 코드가 내장되어 있으며, 거기서 서버 코드를 작성하면 서버처럼 작동한다고 한다.

 

 

Next.js를 이용하여 풀스택으로 블로그를 만들어 보았는데,

그 과정을 순서대로 포스팅하기 전에

작업하면서 개인적으로 미리 알고 시작했으면 좋았겠다 싶은 내용으로 먼저 시작해보고자 한다.

 

마크다운 블로그 작업 과정

먼저 내가 작업했던 내용들을 단계별로 정리해보면 아래와 같다.

 

1. 내 파일 시스템을 DB로 사용한다.
   • 파일 시스템에 저장된 마크다운 파일을 데이터베이스처럼 활용
   • 마크다운 파일의 front matter를 이용하여 데이터 객체화
2. 파일 시스템에서 데이터를 처리하고 관리하는 함수를 구성한다.
   • 파일 시스템에서의 데이터 조작과 관련된 기능을 수행
   • Node.js의 fs 모듈을 이용하여 CRUD 수행
3. REST API 함수를 구성한다.
   • 클라이언트의 요청을 받고, 해당 요청을 서비스에 전달하여 데이터를 처리하거나 반환
   • Next.js 13의 Route Handlers
4. UI를 구성한다.
   • 사용자 인터페이스 개발
5. 만들어둔 API를 UI와 연동한다. (사용자의 요청을 통신)
   • UI와 백엔드 API 간의 통신을 설정하여, 사용자의 요청을 API로 보내고 그 결과를 UI에 표시하는 과정
   • axios 등

 

다 만들고 보니 이게 정석인 것 같아 이렇게 정리했지만,

실제로는 UI부터 만들면서 거꾸로 올라가서 고생했다...

 

앞으로 하나씩 차근차근 포스팅할 예정이지만,

혹시라도 부족한 나의 코드 보고싶다면 https://github.com/gia-world/gialog 에서 확인해보시길.

 

그렇다면 이제, 제일 처음에 언급했던 백엔드 개발자들이 말하는 용어를 간단하게 살펴보자.

백엔드 용어 정리

컨트롤러, 서비스, 서비스 로직은 소프트웨어 개발에서 주요한 구성 요소들이다.

컨트롤러

사용자의 요청을 받고, 그에 맞는 응답을 보내는 역할을 한다.

웹 애플리케이션(웹 페이지나 앱)에서 사용자가 버튼을 누르거나 어떤 기능을 요청할 때 호출된다.

그럼 해당 요청을 처리하고 결과를 보여주기 위해 다른 부분들과 소통하게 된다.

서비스

실제로 데이터를 처리하거나 계산하고, 필요한 작업들을 수행한다.

예를 들어, 사용자가 새로운 계정을 만들거나 뭔가를 구매하고 싶을 때,

그 작업을 처리하고 그에 따른 데이터베이스의 변경이나 정보 업데이트를 수행하는 등의 역할을 한다.

서비스 로직

서비스 안에서 이뤄지는 실제 작업들을 의미한다.

예를 들어, 사용자가 로그인을 시도할 때,

서비스 로직은 이를 확인하고 사용자가 올바른 정보를 입력했는지,

그리고 그에 따라 로그인을 승인할 수 있는지 여부를 결정한다.

서비스는 일반적으로 기능이나 업무를 수행하는 단위를 가리키는데 사용되며,
이에는 데이터 처리, 비즈니스 규칙 실행, 작업 처리 등이 포함되고,
서비스 로직은 이러한 서비스 안에서 구체적으로 이뤄지는 작업들을 설명할 때 사용된다.
두 용어는 종종 혼용해서 사용하기도 한다.

 

 

역할 정리

위의 단계에서 백엔드의 역할과 대입해보면,

1. 내 파일 시스템을 DB로 사용한다. (마크다운 파일 이용)
2. 파일시스템에서 데이터를 처리하고 관리하는 서비스 함수를 구성한다.
3. REST API 함수를 구성한다. (컨트롤러)
4. UI를 구성한다.
5. 만들어둔 API를 UI와 연동한다. (사용자의 요청을 통신)

이렇게 기존에 백엔드 서버에서 하던 역할을 Next.js를 통해 할 수 있는 것이다.

( 참고 : 2023.11.29 - [코딩공부] - 서버사이드렌더링에서 서버는...? 프론트 서버 vs 백엔드 서버 )

 

 

정리하고 보니 너무나도 명확하게 보이지만,
올해 초만 해도 백엔드, DB와 서버도 구분하지 못했었던 나로써는
여기까지 이해하기가 굉장히 힘들었다.

 

나와 같은 병아리 프론트 개발자들에게 도움이 되길 바라며 🐣