grace's dev_note

프로젝트를 하다 보면 상태에 대한 부분들이 전부 URL 값 파라미터에 반영되어야하는 경우가 있다. 이렇게 해야하는 이유는 모든 사용자의 동작들이 URL로 반영이 되어야지만 내가 보고 있는 페이지 그대로 누군가에게 URL을 공유할때 받는사람도 똑같은 페이지의 똑같은 화면을 볼수 있게 된다 뒤로가기를 눌렀을때 바로 이전 동작으로 되돌릴 수 있다 웹에서 앱 으로 넘어갔을때 앱에서도 똑같은 페이지를 볼수 있게 해야한다 이러한 동작을 도와주는 것이 nextjs 에서 제공하는 shallow routing이다. router.push(format({ pathname, query: { ...query, place: query?.place ?? (place || '부산'), active2: 'true..

라우팅 라우팅이랑 서버에서 클라이언트에 내가 불러오고자 하는 URL을 불러오는 것이다. Static Routing(정적 라우터) next/router 사용하기 import { useRouter } from 'next/router' export default function StaticRoutingPage() { const router = useRouter() function onClickMove() { router.push('/05-02-static-routed') } return ( 페이지 이동하기 ) } const router = useRouter() router.push('이동할 페이지') reloae(), replace(), pathname: 현재 나의 ..

드디어 2일차 :) 오늘은 react의 핵심 Component, State에 대해서 배웠다! React 란 javascript를 기반으로 한 라이브러리이다. 최근에는 사용자가 급속도로 증가하고 그 규모가 커지면서 프레임워크라고 인정되는 추세이다. react는 컴포넌트를 기반으로 다양한 형식의 데이터를 쉽게 전달할 수 있고, DOM과는 별개를 관리할 수 있다. 그렇다면 컴포넌트란 무엇일까 Component UI 또는 기능을 부품화하여 재사용 가능하게 하는 것으로 기존에 각 요소를 하나하나 바꿔주어야하는 번거로움에서 벗어나 원본 컴포넌트 하나로 연결된 컴포넌트를 통제할 수 있다. 컴포넌트를 만드는 방법에는 두 가지가 있다. 1. Class형 2. Function형 기존에는 클래서형을 많이 사용하였으나 코드 ..