목록[ javascript ] (103)
IT_susu
이전했습니다. https://velog.io/@susu1991/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC
1) 정의 브라우저의 요소들과 자바스크립트 엔진, var로 우리가 선언한 모든 변수까지 담고 있는 객체 브라우저 담당 - BOM 웹사이트 담당 - document 객체 - DOM 2) 속성들 수많은 속성이 있지만 몇개만 알아봅시다. navigator 브라우저나 운영체제에 대한 정보. serviceworker도 들어가 있음. screen 브라우저 창에 대한 정보. location 주소에 대한 정보. 주소에 대한 다양한 정보와 새로고침, 주소교체도 가능함. history 앞으로 가기, 뒤로 가기 등등. 브라우저 페이지 이동기록을 갖고 있다. 아마 html5에서 추가된 history.pushState(객체, 제목, 주소)와 history.replaceState(객체, 제목, 주소)를 가지고 react-rout..
1. URL 파라미터와 쿼리 사용법 1) URL 파라미터 URL이 /profile/sujeong과 같은 형식으로 이루어 진 것. match.params를 사용하여 URL에 있는 파라미터를 가져올 수 있다. import React from 'react'; const Profile = ({ match }) => { const { username } = match.params; } // App.js 2) URL 쿼리 URL이 /about?detail=true 와 같은 형식으로 이루어진 것. location.search을 사용하여 가져올 수 있다. 가져온 값은 문자열이다. 문자열은 값을 사용하기 불편하므로 qs 등의 라이브러리를 이용하여 문자열을 객체로 변환 후, 사용한다. 그러나 쿼리의 파싱 결과 값도 문자열..
application에 선언적이고 접근 가능한 탐색 기능 제공 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경. 1) to :string - 위치의 pathname, search, hash properties를 string으로 연결 :object - 다음 속성 중 하나를 가지고 있는 객체 pathname: 현재 path search: 쿼리 파라미터 표현(?...) hash: 해시 파라미터 표현(#...) state: location의 지속되는 상태 :function - location이 파라미터로 전달되고 location 표현을 문자열 또는 객체로 리턴하는 함수 ({ ...location, pathname: "/course..
- 정의 : location이 route의 path와 일치하면 렌더링하는 요소 - path 현재 위치의 pathname입니다. 일치하면 해당하는 컨텐츠를 렌더링하고, 맞지 않으면 null을 렌더링합니다. 하나의 컴포넌트에 여러개의 path를 연결하려면 배열로 값을 넘겨주면 됩니다.(리액트라우터v5이상~) path가 없으면 항상 일치합니다. - exact true이면 location.pathname과 정확히 일치해야만 인정합니다. - strict true면, 슬래시가 있는 경로는 슬래시가 있는 location.pathname과 일치해야만 인정합니다. location에 추가 url 세그먼트가 있는 경우에는 동작하지 않습니다. - sensitive true면, 대소문자를 구별합니다. - route가 컴포넌트를..
BrowserRouter - 정의 : HTML5 history API를 사용하는 라우터. - props basename : 모든 위치의 기본 URL getUserConfirmation : 탐색할 때 쓴다는데.. forceRefresh : true인 경우 페이지 탐색 시 전체 페이지 새로고침. html5 history api 지원하지 않는 브라우저에서 사용. keyLength : location.key의 길이 HashRouter - 정의 : hash를 사용하여 ui와 url을 동기화하는 라우터. 라이브러리에서 비추. NativeRouter - 정의 : React Native에서 사용하는 app 개발용. MemoryRouter - 정의 : URL 기록을 메모리에 유지하는 라우터. 테스트 및 react nat..
react web app에서 router를 이용해 페이지를 이동해보자. 라우터를 사용하기 위해서는 3개의 컴포넌트가 필요합니다. 1. router 컴포넌트 2. route 매칭 컴포넌트 3. navigation 컴포넌트 1. Router 연결 컴포넌트 router란 다수의 네트워크를 연결하는 요소. BrowserRouter, HashRouter... import { BrowserRouter } from "react-router-dom"; ReactDOM.render( , holder ); 2. route 매칭 컴포넌트 경로와 해당 컴포넌트를 매칭 시켜주는 요소. route, switch... 3. navigation 이동 컴포넌트 다른 주소로 이동시켜주는 요소. Link, NavLink... 코드 스플리..