no image
[React] react-router-dom이 뭔데?
1. react-router-dom이란?리액트랄 사용하여 페이지를 이동할 때 필요한 라이브러리이다.기존에는 A페이지를 보여준다면 A.html파일을 이용하고 B페이지를 보여준다면 B.html 파일을 보여주는 방식이였지만,리액트에서는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.이를 SPA(Single Page Application)이라고 부른다. SPA에서 페이지 전환은 HTML 5의 History API를 사용하여 보여준다.자바스크립트 영역에서 Histroy API를 이용해 현재 페이지 내에서 페이지 이동이 일어난 것 처럼 보인다. History API내용History.back()세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드History.forward()세션 ..
2025.03.14
no image
[React] 더미데이터에 map과 반복문을 사용해보자
1. 더미데이터 data.json{ "days" : [ {"id":1, "day":1}, {"id":2, "day":2}, {"id":3, "day":3} ], "words" : [ { "id":1, "day":1, "eng":"book", "kor":"책", "isDone":false }, { "id":2, "day":1, "eng":"apple", "kor":"사과", "isDone":false }, ..
2025.03.14
no image
[React] 개발환경 설정하기
1. node.js 설치React는 js환경에서 실행되기 때문에 node.js를 설치해야된다.node.js를 설치하면 npm, npx, yarn 같은 명령어를 사용할 수 있다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  2. npx crate-react-app {프로젝트명}npx명령어로 프로젝트를 생성해준다. 3. 끝
2025.03.12