JSON SERVER

📍 아직 백엔드가 없는 경우 - json server

sudo npm install -g json-server

 

 

 

[javaScript] 프론트엔드 가상 서버 json-server 사용법

[javaScript] 프론트엔드 가상 서버 json-server 사용법

 

 

💡 json 파일이어야 됨

   ~.json

 

💡 json 형식 데이터 보기 명령

json-server --watch ./src/data.json --port 3003

 

 

💡data.json 파일 public 폴더에 두어야함 !

→

1. 정적 파일 제공

• 정적 파일: React 애플리케이션에서 public 폴더에 있는 파일들은 웹 서버가 정적으로 제공하는 파일입니다. 즉, 사용자가 요청할 때 서버가 직접 해당 파일을 반환합니다.
• URL 접근 가능: public 폴더에 있는 파일은 애플리케이션의 루트 URL을 기준으로 직접 접근할 수 있습니다. 예를 들어, public/data.json 파일은 http://localhost:3000/data.json와 같은 URL로 접근할 수 있습니다.

2. src 폴더와의 차이

• src 폴더: src 폴더 안에 있는 파일들은 React 애플리케이션의 소스 코드입니다. 이 파일들은 빌드 과정에서 번들링되어 최종 애플리케이션에 포함됩니다. 따라서 src 폴더의 파일은 URL로 직접 접근할 수 없습니다.

3. Axios 요청

• Axios 요청: axios를 사용하여 JSON 파일을 요청할 때, 서버가 해당 파일을 찾아 반환할 수 있어야 합니다. public 폴더에 위치한 파일은 서버가 쉽게 찾을 수 있기 때문에, 요청이 성공적으로 처리됩니다.

요약

• 정적 파일 제공: public 폴더의 파일은 정적으로 제공되며, URL로 직접 접근할 수 있습니다.
• 서버 요청 처리: axios를 사용하여 JSON 파일을 요청할 때, public 폴더에 있어야 서버가 파일을 쉽게 반환할 수 있습니다.