API
"Application Programming Interface"의 약자로 프로그램끼리 소통할 수 있게 도와주는 도구
API는 애플리케이션 코드와 데이터베이스 사이의 중간 계층이다.
제 3자 서비스와 통신
- 만약 구글 맵을 사용하려면, 구글 맵 API를 통해 지도를 불러와야 한다. 이렇게 제 3자 서비스와 통신할 때 API가 필요하다.
클라이언트와 서버 사이의 보완
- 클라이언트와 서버 사이에 API를 두면, 클라이언트가 직접 데이터베이스에 접근하지 않고, 서버를 통해 데이터베이스와 통신할 수 있다. 이렇게 하면 데이터베이스의 비밀번호나, API 키 등을 클라이언트에게 노출시키지 않으면서 데이터를 안전하게 처리할 수 있다.
Next.js에서 API 레이어
Next.js는 React를 기반으로 한 프레임워크이다.
Next.js에서는 'API Routes'라는 기능을 제공해 서버 측에서 API 엔드 포인트를 쉽게 만들 수 있다.
Next.js에서 API를 만드는 방법
1.API 디렉토리 생성
- Next.js 프로젝트의 'pages/api'디렉토리 안에 파일을 생성하면 자동으로 API엔드 포인트가 생성된다.
2. API 핸들러 작성
- 파일 내에서 요청을 처리하는 함수를 작성한다.
이 함수는 request(요청)과 response(응답) 객체를 인자로 받는다.
예시
// pages/api/posts.js
export default function handler(req, res) {
// 여기서 데이터베이스에서 데이터를 가져오거나 외부 API를 호출합니다.
const posts = [
{ id: 1, title: 'First Post', content: 'This is the first post' },
{ id: 2, title: 'Second Post', content: 'This is the second post' },
];
// 클라이언트에게 JSON 형식으로 응답을 반환합니다.
res.status(200).json(posts);
}
위 코드는 '/api/posts' URL로 요청이 들어오면 서버가 게시물 리스트를 JSON 형식으로 반환하는 API엔드 포인트를 생성한다.
클라이언트에서 API 호출
- 클라이언트 측에서는 'fetch' 또는 'axios'와 같은 라이브러리를 사용하여 위에서 만든 API 엔드 포인트를 호출한다.
예시
async funtion fetchPosts(){
const response = await fetch('/api/posts');
const data = await response.json();
console.log(data);
}데이터베이스 쿼리란?
데이터베이스에서 특정 데이터를 조회하거나 조작하기 위해 사용하는 명렁어
데이터베이스 쿼리를 작성하는 방법에는 두 가지 주요 방식이 존재
SQL(Structured Query Language):
-
SQL은 데이터베이스와 상호작용하기 위해 사용하는 표준 언어이다.
예를 들어 데이터 베이스에서 특정 정보를 조회하려면 SQL 쿼리를 사용한다.ORM(Object-Relational Mapping):
-
ORM은 객체 지향 프로그래밍 언어와 관계형 데이터베이스를 연결해주는 도구이다.
SQL을 직접 작성하지 않고도 데이터베이스와 상호작용할 수 있다.
또한 데이터 베이스는 클라이언트에서 직접 데이터베이스 쿼리를 수행하지 말고, 서버를 통해 데이터베이스와 상호작용해야 한다.
Server Components
Next.js에서 서버 측에서 실행되는 React 컴포넌트이다.
Next.js는 React Server Components를 사용해 데이터를 가져오고 페이지를 렌더링한다.
Server Components를 사용하는 이유
1.비동기 작업을 간편하게 처리
- Server Components는 비동기 작업(예: 데이터 가져오기)을 쉽게 처리할 수 있게 해준다.
- 'async/awit'문법을 사용해서 데이터 요청을 처리할 수 있으며, 'useEffect'나 'useState와 같은 클라이언트 측 훅을 사용할 필요가 없다.
예시
// 비동기 데이터 가져오기
export default async function MyComponent() {
const data = await fetchDataFromServer();
return <div>{data}</div>;
}
2. 서버에서 실행되므로 클라이언트에 부담을 덜어준다.
. Server Components는 서버에서 실행되기 때문에, 클라이언트(브라우저)는 서버에서 처리된 결과만을 받아온다.
=> 클라이언트는 무거운 데이터 처리나 로직을 신경 쓸 필요가 없다.
3. API레이어 없이 데이터베이스에 직접 접근 가능
- Server Components는 서버 측에서 직접 데이터베이스에 접근할 수 있다.
- 데이터를 가져오기 위해 별도의 API를 만들 필요가 없다는 뜻
- 서버에서 직접 데이터베이스 쿼리를 수행하고, 그 결과를 클라이언트 측에 전달할 수 있다.
예시
//서버 측에서 데이터베이스에 직접 접근
export default async function Posts(){
const posts = await fetchPostsFromDatabase();
return(
<div>
{posts. map(post => (
<div key ={post.id}> {post.title} </div>
))}
</div>
)
}