목록2024/05/13 (2)
우당탕탕 개발일지
AXIOS서버와 통신하기 위해서 axios 라이브러리를 사용하도록 한다. npm을 이용해 라이브러리를 다운받는다.npm install axios --save landingPage가 오픈될 때 테스트용 api통신을 해보도록 하자. 아래는 LandingPage.js 로, http://localhost:3000/ 으로 접속했을 때 실행되는 스크립트이다. (react-router-dom 을 이용했다. 이전 게시글을 참고) //LandingPage.jsimport React, { useEffect } from "react";import axios from "axios";function LandingPage() { useEffect(() => { axios.get("/api/hello").then((res)..
VSCODE에서 react 프로젝트 생성하기우선 vscode extensions에서 react를 다운받도록 한다. 프로젝트 폴더를 생성한다. 프로젝트 폴더를 만들고, 아래 명령어를 통해 react프로젝트를 생성한다npx create-react-app##실행하기 : pacakge.json에서 확인가능##npm run start React-Router-Dom리액트라우터돔은, 유저의 상태나 요청에 따라서 적합한 콘텐츠로 이동시켜주는 기능을 수행한다. 예를들어 보기를 눌렀을 때 로그인 된 유저라면 페이지로 유도하고, 아직 로그인이 되지 않았다면 페이지로 유도해야한다. 이러한 기능을 도와주는것이 react-router-dom 이다. 라이브러리를 npm 을 이용해 다운받는다.npm install react..