잠온다

1. 설치 npm install react-router-dom@6 2. BrowserRouter index.js에서 BrowserRouter를 import 해준 뒤 App을 감싸주면 Router를 사용할 수 있다. 3. Routes, Route Routes는 여러 Route를 자식으로 둘 수 있다. Route는 2개의 props를 가질 수 있는데, path는 url 경로, element는 해당 경로에 따른 컴포넌트를 입력해준다. 4. Link, useNavigate Link를 사용하여 해당 url로 이동할 수 있다. Link는 text나 element 모두 감쌀 수 있다. 클릭 시 바로 이동하는 Link와 달리 useNavigate를 활용하면 이동 전에 로직을 처리할 수 있다. 5. parameter, ..

1. 현재 위치 정보 가져오기 navigator.geolocation.getCurrentPosition((position) => { let lat = position.coords.latitude; let lon = position.coords.longitude; }); // navigator는 브라우저 내장 객체다. // navigator의 geolocation을 활용하면 지리적 정보를 얻을 수 있다. 2. 위치 정보와 날씨 api를 활용하여 날씨 정보 가져오기 무료 날씨 api인 OpenWeatherMap에서 key를 발급받아 사용 key와 함께 navigator를 통해서 가져온 위도, 경도를 인자로 전달하면 날씨 정보를 받을 수 있다. 3. component에 날씨 데이터 넘겨주기 weather st..

1. 프로젝트 생성 npx create-react-app --template=typescript cd appname npm start 2. state에 타입 정의하기 const [state, setState] = useState(초기값); 3. props에 타입 정의하기 type PropsType = { props1: string, props2: number, ... } const Component = (props: PropsType) => { ...

1. React 설치 node.js 설치 npm -v 으로 npm 설치 확인 npm i -g create-react-app 프로젝트를 진행할 폴더 생성 npx create-react-app (폴더 경로) 2. JSX JSX : A syntax extension to Javascript = Javascript + XML/HTML JS 코드 안에서 html, xml 코드를 사용해줄 수 있다. // 예제1 const inputBox = ... return inputBox; // 예제2 ... return {inputBox} // 예제3 const [id, setId] = useState('jun17183'); const inputId = setId(e.target.value)} /> 3. component 앱..