[Next.js] Routing
·
Next.js/이론
1. a 태그 기본적인 페이지 이동을 위해서 사용하는 태그인 a 태그를 Next.js에서 사용할 수 있다. const NavBar = () => { return ( Home About ); }; export default NavBar; 페이지 이동은 정상적으로 가능하다. 하지만, React는 SPA, Single Page Application을 채택하였는데, a태그를 사용하면 페이지 이동 시 새로고침을 하게된다. 이러한 문제를 해결해서 라우팅을 하기 위해서 Next.js에는 제공하는 기능이 있다. 2. Link 태그 import Link from "next/link"; const NavBar = () => { return ( Home About ); }; export default NavBar; Link..
[CCNA] Router
·
CCNA/이론
라우터를 켰을때 제일 먼저 POST가 돌아간다. (Power On Self Test) 이상이 없다면 ios(OS)를 찾는다. ​ 라우터 -> 플래시 메모리가 있다. 이 플래시 메모리가 ios 이미지 파일이 들어있으며 라우터에 전원을 넣게 되면 ios를 휘발성 메모리인 DRAM에서 올려 os를 작동시킨다. ​ 휘발성 메모리인 DRAM은 전원을 종료하면 os와 설정들이 날아가 버린다. ​ 이러한 이유로 os 설정을 담아두기 위한 비휘발성 메모리가 필요했으며 그것이 바로 NVRAM이다.(NVRAM : 비휘발성,256k정도로 작다.) ​ MVRAM에 저장된 os설정 파일 명 -> startup configuration os 작동시 startup파일이 DRAM위로 올라갔을 때의 설정 파일 명 -> running ..
[React] Route 부가적인 부분 (history, withRouter..)
·
React/기능
history history라는 기능이 Route에 많이 보이는데, 도당체 어떤 거냥?? history는 자바스크립트 다양한 환경에서 history 세션을 관리해준다. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md 깃허브 주소에서 보자면 history objects typically have the following properties and methods: length - (number) The number of entries in the history stack action - (string) The current action (PUSH, REPLACE, or POP) ..
[React] Route
·
React/기능
Route를 들어가기 앞서 SPA를 다시 한번 알아보자 SPA? Single Page Application의 약자로, 말 그대로 페이지가 1개인 애플리케이션이란 뜻이다. 전통적인 웹 어플리케이션의 구조는 여러 페이지로 구성되어 있다. react-router는 써드파티 라이브러리로, 공식은 아니지만 가장 많이 사용되고 있는 라이브러리이다. 이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해 준다. react-router-dom 기본적으로 react-router-dom이 브라우저에서 사용되는 리액트 라우터이다. import React from 'react'; import {Route} from 'react-router-dom'; import { Home, About } from 'pages'..