엔피엠 제이슨 서버는 제이슨 파일형식으로 데이터를 저장하는 서버로 설치가 간단하기 때문에 프론트엔드 개발 시 테스트용으로 사용하기 편리하다. 사용하는 방법을 살펴보자
목차
설치하기
패키지 설치
npm i json-server
패키지 제이슨 파일에 커맨드 지정
package.json 파일을 열고 스크립트 란에 아래 코드를 추가
"<command>":"json-server --watch <fileName>.json"
※ 제이슨 서버는 기본적으로 리액트와 같은 3000 포트를 사용한다.
따라서, 리액트를 사용하는 경우 스크립트에서 포트를 따로 설정을 해 주어야 충돌이 없다.
"<command>":"json-server --watch <fileName>.json --port <port>"
서버 구동
스크립트에 설정한 명령어로 서버를 구동하면
자동으로 테스트 파일이 생성된다 (혹시 생성이 되지 않는 경우 루트에 해당 파일을 추가하자).
옵젝트 안의 각 키가 테이블의 역할을 한다. 테스트를 위해 포스트에 데이터를 추가해 보자.
사용하기
서버를 가동하고 http 요청을 통해 서버와 통신.
앵귤러
앵귤러를 사용하여 기본기능인 데이터 보기, 추가, 삭제, 업데이트를 해 보자.
모델 생성
수월한 작업을 위해 모델생성, 제이슨 서버는 id라는 필드명을 아이디로 사용하므로 반드시 id라는 필드명 사용
export interface Post {
id?: string;
title: string;
content: string;
imagePath?: string;
auth?: string;
}
서비스 생성
서비스 파일을 생성 (아래 CLI 커맨드 사용 또는 직접생성)
ng g service <name>
서비스 클래스에 작업에 필요한 속성들 추가.
url: string = 'http://localhost:4040/posts/';
posts!: Post[];
constructor(private http: HttpClient, private router: Router) {}
▶ 데이터 가져오기 (리스트)
getPosts() {
this.http.get<Post[]>(this.url).subscribe((data) => {
this.posts = data;
this.postUpdated.next(this.posts);
});
}
▶ 데이터 가져오기 (아이템)
getPost(id: string) {
return this.http.get<Post>(this.url + id);
}
▶ 데이터 추가
addPost(title: string, content: string) {
const post: Post = {
id: '3',
title: title,
content: content,
};
this.http.post(this.url, post).subscribe((result) => {
this.router.navigate(['/']);
});
}
▶ 데이터 편집
updatePost(
id: string,
: string,
content: string,
) {
let post:Post = {
id: id,
title: title,
content: content,
}
}
this.http.put(this.url + id, post).subscribe((result) => {
this.router.navigate(['/'])
});
}
▶ 데이터 삭제
deletePost(id: string) {
this.http.delete(this.url + id).subscribe((result) => {
this.router.navigate(['/']);
});
}
리액트
리액트를 사용하여 자바스크립트 fetch를 통해 기본기능인 데이터 보기, 추가, 삭제, 업데이트를 해 보자.
const URL = 'http://localhost:4040/posts/'
▶ 데이터 가져오기 (리스트)
const fetchData = async () => {
const res = await fetch(URL)
const data = await res.json()
}
▶ 데이터 가져오기 (아이템)
const fetchData = async (id) => {
const res = await fetch(URL + id)
const data = await res.json()
}
▶ 데이터 추가
const addFeed = async (newFeed) => {
await fetch(URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newFeed)
})
}
▶ 데이터 편집
const updateFeed = async (id, newFeed) => {
await fetch(URL + id, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newFeed)
})
}
▶ 데이터 삭제
const deleteFeed = async (id) => {
await fetch(URL + id, {
method: 'DELETE'
})
}
이상으로 엔피엠 제이슨 서버를 사용하는 방법을 살펴보았다.
참고
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
자바스크립트 모듈 - 버튼물결 (0) | 2023.07.03 |
---|---|
리덕스 (1) | 2023.06.25 |
자바스크립트 모듈 - 물결효과 (0) | 2023.04.05 |
반응형 웹 디바이스 구분하기 (3) | 2023.03.23 |
라이브러리 - RxJS (0) | 2023.02.15 |