한바다
리액트 환경설정 에러와 공공 공기데이터 조회 API가져오기 본문
☑️ 리액트 환경설정 에러
파이널 프로젝트를 매일 깃에 push를 하고 있었는데 해당파일을 다운로드하여 실행 시켰더니
아래와 같은 에러코드가 발생하였다.
[에러코드]
Compiled with problems:
×
ERROR in ../node_modules/react-dom/cjs/react-dom.development.js 21:16-32
Module not found: SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): SyntaxError: Expected property name or '}' in JSON at position 2
ERROR in ../node_modules/react-modal/lib/components/Modal.js 34:13-29
Module not found: SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): SyntaxError: Expected property name or '}' in JSON at position 2
ERROR in ../node_modules/react-modal/lib/components/ModalPortal.js 38:13-29
Module not found: SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): SyntaxError: Expected property name or '}' in JSON at position 2
▶ 주된 에러는 Modele not 즉 모듈이 없다는 것이다. 이는 리액트 환경설정이 잘못된 것으로 기존 폴더에서
node_modules와 package-lock.json을 삭제 하였다.
또한 package.json 을 전체적으로 후정한 후 npm i 그리고 npm start 시도시 정상적으로 실행이 되었다!!
☑️ JSON 과 XML 구분
JSON : RESTful API 응답 /구성파일(예: .json)
REST ful이란 http 메서드와 URL기반으로 자원에 접근할 수 있도록 제공하는 개발이다.
[JSON 예제코드]
{
"to":"KH",
"from":"T",
"heading":"안녕하세요,",
"body":"즐거운 주말 되세요.!"
}
XML : 웹 서비스 / 문사파일 포맷(예: .docx, .xlsx)
[XML 예제코드]
<note>
<to>KH</to>
<from>T</from>
<heading>안녕하세요</heading>
<body>즐거운 주말 되세요.</body>
</note>
☑️ 대기오염 서비스 조회 공통 api :http://apis.data.go.kr/B552584/ArpltnInforInqireSvc
✔️ ApiService.java
@Service
public class ApiService {
@Value("${api.base-url}")
private String baseUrl;
//@Value어노테이션은 외부설정파일(application.properties)에서 'api.base-url'이라는 키에 해당하는
//값을 읽어와서 'baseUrl'필드에 주입한다
@Value("${api.key})
private String apiKey;
@Value("{api.content-type})
private String contentType;
public String getAirData() throws Exception{
//주소값 설정
String url = baseUrl;
url += "?serviceKey=" + URLEncoder.encode(apiKey,"UTF-8");
url += "&sidoName=" + URLEncoder.encode("서울","UTF-8");
url += "&returnType=xml"; //서비스키와 서울지역 데이터를 가져올 때 xml파일로 가져온다
// xml 구버전 json 구 & 신버전
System.out.println("(1)url" +url);
//세팅된 주소를 가지고 데이터 가져오기
URL reqeustUrl = new URL(url);
HttpURLConnection uc = (HtpURLConnection) requestUrl.openConnection();
uc.setRequestMethod("GET");
uc.setRequestProperty("content-Type",contentType);
System.out.println("(2) usc"+uc);
//남의 주소에서 남이 지정한 형식을 가져와야 하기 때문에 한줄씩 읽어서 모두 실시간 가져오기
BufferedReader br = new BufferedReader(new InputStreamReader(uc.getInputStream()));
StringBuilder response = new StringBuilder();
System.out.println("(4)"+response);
String line; //데이터를 한 줄씩 가져오기
while ((line = br.reading()) != null) {
}
System.out.println("(5)response"+response);
br.close();//데이터 다가져오면 닫기
uc.disconnet(); //url 연결끊기
//가져온 데이터 글자값으로 보여주기 위해 전달
return response.toString();
}
}
✔️ApiController.java
@RestController
@RequestMapping("/api")
public class ApiController {
@Autowired
private ApiSerivice apiService;
@GetMapping("/air-pollution")
public String getAirData() throws Exception {
String airData = apiService.getAirData();
System.out.println("air Data :" + airData);
return airData;
}
}
'React' 카테고리의 다른 글
'React' Related Articles
more
