React4 React로 공공데이터 API 호출하여 날씨 어플리케이션 만들기 안녕하세요 오늘은 React로 공공데이터 API 호출하여 날씨 어플리케이션 만드는 방법을 알려드리겠습니다. 1.react 설치 명령어 npx create-react-app . 2.앱 실행 npm start ->안될시, cmd창으로 3.공공데이터포털 단기예보 or 중기예보 활용 신청 회원가입 후 개인 key 발급 하시고 권한 신청하시면 자동으로 권한을 얻습니다. https://www.data.go.kr/data/15043494/fileData.do 이미지 썸네일 삭제 기상청_단기예보_20210725 예보기간과 구역을 시공간적으로 세분화하여 발표하는 자료로 3시간 간격으로 발표합니다. 단기예보는 예보시점부터 3일 이내 기간에 대하여 행하는 예보로, 전국의 읍,면,동 단위로 상세한 날씨를 예보하기 위하여 2시.. 2023. 10. 27. React boilerplate dom 설치 방법 1.react 생성 npm init react-app my-app lint는 문법 검사기 cd my-app 2.react 실행 npm start deffer : 문서 다 읽고 bundle 실행 jsx : 태그 대용품 boilerplate : 반복되며 자주 쓰이는 것들에 대해 미리 개발환경설정을 구성해놓은 일종의 템플릿 개념 즉, react는 템플릿을 변경할 필요없이 js파일들만 생성하여 index.js에서 app 안에 뿌려주면 끝 reportWebVitals src-pages폴더-Home.js import React from "react"; function Home() { return Home 화면입니다. } export default Home; app.js // import logo from './lo.. 2023. 10. 20. Vscode에서 React 설치 및 실행1 안녕하세요 1.react 설치 명령어 npx create-react-app . 대표사진 삭제 사진 설명을 입력하세요. 2.스타트 npm start 대표사진 삭제 사진 설명을 입력하세요. 대표사진 삭제 사진 설명을 입력하세요. 다음과 같이 3000번 port로 로컬호스트가 생긴 것을 확인할 수가 있습니다. 대표사진 삭제 사진 설명을 입력하세요. 만약 실행이 안된다면 Powershell이나 커맨트 창에서 실행을 해보시길 바랍니다. 대표사진 삭제 사진 설명을 입력하세요. 3.수정 app.js의 이부분에서 수정을 하시면 됩니다. 여기서 html css 등을 수정할 수 있습니다. 다음 화면 처럼 app.js가 시작 페이지입니다. 대표사진 삭제 사진 설명을 입력하세요. hear부분 삭제하고 수정하시면 편집이 가능합.. 2023. 10. 19. nodeJS 설치 및 vscode에서 react 실행하는 법 리눅스 및 윈도우 환경에서 node 설치 및 vscode에서 react 실행하는 법을 알려드리겠습니다. 각자의 환경에 맞게 nodeJs 사이트에서 설치를 먼저 해줍니다. 대표사진 삭제 사진 설명을 입력하세요. sudo apt install npm 명령 대표사진 삭제 사진 설명을 입력하세요. 설치확인 대표사진 삭제 사진 설명을 입력하세요. 윈도우버전 설치 nodejs 사이트에서 최신버전 다운로드 대표사진 삭제 사진 설명을 입력하세요. 다음으로 vscode에서 react 실행하는 법 작업폴더 생성 후 오픈 대표사진 삭제 사진 설명을 입력하세요. vscode에서 npx create-react-app blog1 명령 대표사진 삭제 사진 설명을 입력하세요. blog1 폴더 오픈 후 cd blog1 npm star.. 2023. 10. 13. 이전 1 다음
