엔피엠 - 제이슨 서버

엔피엠 제이슨 서버는 제이슨 파일형식으로 데이터를 저장하는 서버로 설치가 간단하기 때문에 프론트엔드 개발 시 테스트용으로 사용하기 편리하다. 사용하는 방법을 살펴보자

목차

• 설치하기
  • 패키지 설치
  • 패키지 제이슨 파일에 커맨드 지정
  • 서버 구동
• 사용하기
  • 앵귤러
    • 모델 생성
    • 서비스 생성
    • ▶ 데이터 가져오기 (리스트)
    • ▶ 데이터 가져오기 (아이템)
    • ▶ 데이터 추가
    • ▶ 데이터 편집
    • ▶ 데이터 삭제
  • 리액트
    • ▶ 데이터 가져오기 (리스트)
    • ▶ 데이터 가져오기 (아이템)
    • ▶ 데이터 추가
    • ▶ 데이터 편집
    • ▶ 데이터 삭제

설치하기

패키지 설치

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'
  })  
}

이상으로 엔피엠 제이슨 서버를 사용하는 방법을 살펴보았다.

---

참고

json-server - npm (npmjs.com)

json-server