일반적으로 파일, 페이지 라우트도 있지만 서버에서 실행되는 API 엔드포인트 역할도 있다.
데이터베이스 통신: 사용자 정보 조회, 게시글 저장 등
인증 처리: 로그인, 회원가입 등
파일 업로드: 이미지나 문서 파일 업로드 처리
외부 API 연동: 다른 서비스에서 데이터를 가져오거나 보내는 작업
스트리밍 응답: 대용량 데이터를 효율적으로 처리
클린 아키텍처
★ 아키텍처 구조
업무로직 : 시스템이나 프로그램이 어떻게 작동해야 하는지에 대한 규칙이나 절차
객체지향 : 객체라는 작은 단위로 쪼개서 생각하고, 이 객체들이 서로 상호작용하면서 프로그램을 만드는 방식(책임을 나눈다라고 생각하면 됀다.)
★ 서비스 계층 분리
DTO = 객체를 주고 받는 페이지
페이지 : 사용자에게 보여지는 페이지
서비스(*유즈케이스) : 업무로직에 해당한다. (좋아요, 예약 등..) *유즈케이스 : 서비스를 기능별로 파일로 쪼개준다. 사용자가 요청하는 행위 (기능의 단위) 수정없이 추가와 제거가 용이하여 유지보수에 좋다.
리포지토리 : 사용자가 요청한 것을 받아주는 CRUD에 해당한다.
★ 5대 최신 아키텍쳐
Hexagonal Architecture : 육각형 아키텍처, 내부 도메인 로직과 외부 시스템(데이터베이스, UI, API 등)을 분리해서, 의존성을 역전시키는 구조
Onion Architecture : 양파 아키텍처, 양파처럼 핵심 도메인을 중심에 두고, 바깥쪽으로 인프라, UI, 데이터베이스 같은 외부 요소들이 계층적으로 둘러싸는 구조
Domain-Driven Design (DDD) or Domain Centric Architecture : 도메인(비즈니스 영역) 모델을 중심으로 설계하는 방법론이자 아키텍처
Vertical Slice Architecture : 기능 단위(수직 슬라이스)로 애플리케이션을 나누는 방식
Clean Architecture : 로버트 C. 마틴 아키텍처로, 의존성 규칙에 따라 안쪽(비즈니스 규칙)과 바깥쪽(외부 인터페이스)을 엄격히 분리, 유지보수성과 테스트 용이성이 극대화된 설계 방식
★ 클린 아키텍쳐
클린 아키텍처 구조 이미지
★ 클린아키텍처 4계층
도메인(Domain)
비즈니스 핵심 로직과 규칙이 담긴 곳
어플리케이션(Application)
도메인 객체를 활용해 실제 유스케이스(Use Case)를 구현하는 계층, 업무 로직에 해당(리뷰, 주문, 채팅 등..)
인터페이스 어댑터(Interface Adapters)
도메인과 어플리케이션 계층을 외부 시스템과 연결(Next.js에서 route가 해당)
인프라스트럭쳐(Infrastructure)
실제 외부 시스템과 직접 통신하는 계층이며 데이터베이스, 파일 시스템, 네트워크, 외부 API 등과 연결되는 구체적인 구현체
의존성 규칙(Dependency Injection, DI ) : 필요한 객체를 직접 만들지 않고 외부에서 주입받는 방법
제어반전 (IOC) : 일반적인 객체의 흐름은 순차적이다.(위의 이미지에서 가장 바깥쪽으로 부터 A>B>C>D) 하지만 객체를 만들고 관리하는 제어권이 역전되어 의존성을 주입해야하는 경우 [A>B>C>(의존 주입)>D]이지만 실질적으로 순차적으로 흐르며 클린아키텍쳐 4계층으로 보면 아래 표에 해당한다.
폴더 명은 곧 url를 의미한다. but page.tsx가 없으면 url에 해당하지 않는다.
컴포넌트 폴더
바깥에 두는 방법 : 컴포넌트를 한 곳에 모아둠, 다른 앱에서도 적용 시키기 용이함
페이지 안에 두는 방법 : 컴포넌트를 해당 페이지에 적용 되어있다는 것을 알기 쉬움
적용방법 : 컴포넌트를 layout.tsx에 삽입
페이지 명은 소문자 컴포넌트 명은 파스칼로 명시할 것
★ Next.js에서 css적용
컴포넌트 폴더 안에 컴포넌트명.module.css로 설정 후 코드 삽입
해당 컴포넌트에 들어가서 경로를 불러오기
import "./header.css"; <= 기존에 불러오는 방법
1. styles 객체에서 필요한 스타일을 꺼내 쓰는 방식2. 구조 분해 할당으로 스타일을 변수로 꺼내쓰기
style.css = 기본적으로 모든 파일이 공통적으로 받는 스타일시트
module.css = 특정 파일에만 적용 시키는 스타일시트
★ 레이아웃 중첩 : 페이지마다 다르게 디자인 해야 하는 경우에 활용
layout.tsx가 2개인 상황 : 부모(app) 레이아웃의 {children} 안에 자식 레이아웃이나 페이지가 들어가는 구조 이미지에는 부모는 RootLLayout에 자식은 admin에 있는 해당하고 admin이 부모면 안에 있는 layout에서 {children}은 사용자가 요청한 페이지
회고 : Next.js를 한번 개인적으로 사용한 적은 있었으나, 무작정 내 것으로 만드는 것보다
Special types : 특정 데이터 타입을 가르키지 않음, 코드의 유연성을 높이거나 특정한 상황일 때 사용(any,unknown ...)
Unknown의 경우에는 뒤에 if조건문을 걸거나 as (별칭)으로 결과를 출력한다.
Union types : 변수의 타입이 둘 이상인 경우
=> 변수 변수명 : 변수타입1 | 변수타입2
Literal types : 변수 타입을 특정한 값으로 설정, 타입이 곧 변수 값(정해진 숫자는 리터럴에 해당)
type Fruit = "apple"; // Fruit 타입은 오직 "apple" 값만 가진다.
let myFruit: Fruit = "apple"; // 정상 출력
// let yourFruit: Fruit = "banana"; //"banana"는 Fruit의 타입에 없으므로 에러
=>고유의 값이 있을 때, 값을 따로 부여할 때 ex) 고객번호, 프로세스
변수명 : 타입(변수값) = 변수값
Enum types : 관련된 특정한 값을 “집합” (상수는 쓸 수 없고, 상수를 문자화, 숫자를 포함하고 있다.)
enum Day {
MONDAY, // 0
TUESDAY, // 1
WEDNESDAY, // 2
THURSDAY, // 3
FRIDAY, // 4
SATURDAY, // 5
SUNDAY // 6
}
let today: Day = Day.MONDAY;
console.log(today); // 0 (기본적으로 숫자가 할당)
=> 조직, 집합에 해당 할 때 ex) 반, 부서
Interface types : 상속을 의미하며, 객체와 객체를 연결해주는 타입
interface User {
name: string;
age: number;
}
let user1: User = {
name: "김철수",
age: 30
};
// 정상 출력
// 인터페이스의 속성과 객체 내 속성의 타입을 지키지 않으면 에러 발생
let user2: User = {
name: "이영희"
};
// 에러 = age 속성이 없음
let user3: User = {
name: "박지민",
age: "스물다섯"
};
// 에러 = age 타입이 number가 아닌 string
Generics types: 내가 타입을 임의로 설정하고 지정한다. 보통은 <T>로 설정
function print<T>(value: T): void {
console.log(`출력 결과는 ${value} 입니다.`);
}
print<string>("Hello World"); // Hello World
print<number>(42); // 42
★ 비동기 함수의 타입스크립트
function welcome():string {
return "Hello World";
}
async function welcome(): Promise<string> {
return "Hello World";
}
// async 비동기 경우에는 Promise<타입>이 들어가야한다.
