본문 바로가기

JavaScript7

[React] BrowserRouter와 createBrowserRouter의 특징과 코드작성차이 프로젝트 이후 코드를 공부하다가createBrowserRouter에 대해 알게되었다.두 방식에 어떤 차이점이 있는지 살펴보자. 1. _ 컴포넌트 기반 라우팅앱이 주소창의 변화를 감지하고 그에 맞는 화면을 보여줄 수 있게 해준다.과거에는 HashRouter를 사용해서 "http://localhost:3000/#/admin/customers"로 나타났다.BrowserRouter를 사용하면, "http://localhost:3000/admin/customers"로 나타난다.BrowserRouter는 HTML5History API를 사용해서, 깔끔한 주소를 가지도록 해준다.끊김 없는 부드러운 화면 전환을 제공한다. 2. createBrowserRouter_ 객체 기반 선언적 라우팅React R.. 2026. 4. 22.

[Spring, React] 페이지네이션, 고객 10명만 보여주고 페이지 넘기기. 고객 명단 표를 만들었다.그럼 이제 10명의 정보만 보이도록만들고싶다. 1. 동작화면 2. 페이지네이션 검색해서 찾아본 페이지네이션은, 방대한 정보 중 사용자에게 필요한 정보를 선별하여 일부분만 보여주는 기술을 말하는 것 같다. 아무래도 구글에 검색했을 때 구글이 가지고 있는 모든 정보를 다 보여준다면 아마 사용자의 메모리가 감당하지 못할 것이다. 그리고 무엇보다 기능에 의미가 없어질 듯 하다. 그래서 이 페이지네이션 기능을 활용하여 사용자의 메모리와 시간을 아끼는 듯 하다. 일단 내가 한 프로젝트는 이미 고객 정보가 기입된 상태이고 그걸 관리하는 것이다. 거기다 고객 명단이 그리 방대한 양이 아니다. 그래서 그리 어렵지 않은 페이지네이션을 구현해도 되겠다는 생각을 했다. 아래 링.. 2026. 2. 18.

[Spring, React] 고객 명단을 관리할 테이블(표) 만들기! 고객 정보를 보여줄표를 만들어보자! 1. 화면고객 정보가 화면에 보이도록 하며, 맨 끝에 수정과 삭제 버튼이 나오도록 만들어볼 것이다. 2. 전체 코드 {columns.map((data, i) => ( ))} {columns.map((data, i) => ( .. 2026. 2. 16.

[Vue.js] 새로고침 쉽게 하는 방법, window.location.reload( ) 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! [ 토끼와 거북이 경주게임 ] [Vue.js] Vue.js를 이용하여 간단한 토끼와 거북이 경주게임 만들기.토끼와 거북이경주게임을간단하게 만들어보자. 1. 환경□ WebStrom: HTML 편집기가 포함된 자바스크립트 IDE(Intergrated Development Environment)로 IntelliJ IDEA 플랫폼 위에 구축되었고 비주얼 스튜디오나 이post-this.tistory.com 1. 화면다시하기 버튼을 누르면 새로고침이 되어 토끼와 거북이의 위치가 처음으로 돌아가도록 한다. 2. reload 코드.game-return{ position: absolut.. 2025. 8. 13.

[Vue.js] animation과 @keyframs로 토끼와 거북이 경주게임 만들기. 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! [ 토끼와 거북이 경주게임 ] [Vue.js] Vue.js를 이용하여 간단한 토끼와 거북이 경주게임 만들기.토끼와 거북이경주게임을간단하게 만들어보자. 1. 환경□ WebStrom: HTML 편집기가 포함된 자바스크립트 IDE(Intergrated Development Environment)로 IntelliJ IDEA 플랫폼 위에 구축되었고 비주얼 스튜디오나 이post-this.tistory.com 1. 동작과정구성토끼는 조건을 가진다. 짝수가 나오면 토끼의 행동 시간이 짧아지고, 홀수가 나오면 토끼의 행동 시간이 길어진다. 거북이는 조건 없이 항상 같은 속도로 달린다. .. 2025. 8. 12.

[Vue.js] Vue.js를 이용하여 간단한 토끼와 거북이 경주게임 만들기. 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! 토끼와 거북이경주게임을간단하게 만들어보자. 1. 환경□ WebStrom: HTML 편집기가 포함된 자바스크립트 IDE(Intergrated Development Environment)로 IntelliJ IDEA 플랫폼 위에 구축되었고 비주얼 스튜디오나 이클립스와 같은 프론트엔드 개발에 최적화된 통합개발환경을 제공한다. WebStorm WebStorm: The JavaScript and TypeScript IDE, by JetBrainsMake development more productive and enjoyable with WebStorm, the IDE for JavaScript and rel.. 2025. 8. 11.

이전 1 2 다음

티스토리툴바