Front End (99) 썸네일형 리스트형 [React Exam] react-router-dom 사용해보기 2 다음과 같이 코드를 이용해서 작성해도 같은 결과 입니다.import { createBrowserRouter, RouterProvider } from 'react-router-dom'; let router = createBrowserRouter( [ { path: "/", element: Hello world!!Hello Router!!, }, ],);function App1() { return router={router} />;}export default App1; 위 처럼 엄청난 경고가 나타납니다. 다음과 같이 추가 하면 경고가 사라집니다.import { createBrowserRouter, RouterProvider } from 'react-router-dom';.. [React Exam] react-router-dom 사용해보기 1 라우팅이란 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것으로 웹애플리케이션이 커지게 되면 하나의 페이지로 구성하기가 매우 어렵습니다. 이럴 때 여러 페이지로 구성된 웹애플리케이션을 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. react-router-dom은 리액트의 라우팅 관련 라이브러리들 중에서 가장 많이 사용되고 있으며 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다.간단하게 사용법을 알아 보도록 하겠습니다. 1. 프로젝트 생성 및 라이브러리 설치npx create-react-app router1 cd router1 npm i react-bootstrap bootstrap react-bootstrap-icons npm i day.. [JavaScript] localforage를 이용한 CRUD(저장/읽기/수정/삭제) html> lang="en"> type="hidden" id="id" value="0" /> type="text" id="comment" placeholder="저장할 내용을 입력하세요" /> onclick="updateComment()" id="btn">저장하기 onclick="resetComment()" id="resetBtn">취소하기 id="comments"> [JavaScript] localStorage를 이용한 CRUD(저장/읽기/수정/삭제) 로컬 저장소를 이용하여 데이터를 저장하고/ 읽어보고/수정하고/삭제하고를 수행행 보겠습니다.데이터는 계속 유지가 됩니다. 브라우져를 다시 열어도 다른 부라우져를 써도 내일도 모레도 계속 유지 됩니다. html> lang="en"> type="hidden" id="id" value="0" /> type="text" id="comment" placeholder="저장할 내용을 입력하세요" /> onclick="updateComment()" id="btn">저장하기 onclick="resetComment()" id="resetBtn">취소하기 id="comments"> 초기화면입니다. 내용을 입력하고 "저장하기"버튼을 누르면 저장이 됩니다. "수정" 버튼을 누르면 폼에.. [JavaScript] 웹 스토리지(localStorage, sessionStorage) 사용해 보기 웹 스토리지 객체(web storage object)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다.웹 스토리지 객체(web storage object)는 브라우저 내에 키/값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다. 쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요? 그 이유는 다음과 같습니다.쿠키는 네트워크 요청 시 서버로 전송되지만 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 그렇기 때문에 쿠키보다 더 많.. [JavaScript] localforage 사용해 보기 브라우저에서 데이터를 저장하는 방법에는 여러가지가 존재 합니다. 쿠키, 웹 storage, indexedDB 등을 이용하는 방법입니다.사용자의 컴퓨터에 구조화된 방식으로 데이터를 저장할 수 있는 Web SQL Database API (내부적으로는 SQLite 데이터베이스 엔진을 기반으로 함)는 2009년 4월에 도입되었으며 2010년 11월에 폐기되었습니다. 하지만 웹 storage는 문자열만 처리되고 느리며 Blob(대형 이진 객체, Binary Large Object)를 처리할 수 없습니다. 또한 indexedDB와 WebSQL은 그 API가 복잡하여 배워 사용하기가 쉽지 않습니다. 그리고 모든 브라우져가 지원하지도 않습니다. 그래서 모질라 에서는 로컬포리지(localForage)라 부르는 라이브러.. [JavaScript] SPA/MPA & SSR/CSR SPA (Single Page Application) : 1개의 페이지로 구성된 ApplicationMPA(Multiple Page Application) : 여러개의 페이지로 구성된 Application SSR(Server Side Application) : 서버가 랜더링을 담당 CSR(Client Side Rendering) : 클라이언트가 렌더링을 담당 MPA는 SSR 방식을 사용하고 SPA는 CSR 방식을 사용 MPA(Multiple Page Application)는 각 페이지별로 HTML문서가 따로 존재하여, 페이지를 이동할 때마다 새로운 html 페이지를 서버로 부터 새로 받아와서 매번 새로 렌더링하는 전통적인 웹페이지 구성 방식입니다. SPA(Single Page Application)는 .. [JavaScript] Axios 사용해 보기 Axios AxiosPromise based HTTP client for the browser and node.js Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.axios-http.com 시작하기 | Axios Docs 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그.. 이전 1 2 3 4 ··· 13 다음
