오늘도 코딩하나

1. 리액트 라우터?리액트 라우터 = 라우팅 관련 라이브러리 (페이지 이동)-> 신규 페이지를 불러오지 않는 SPA에서 각각의 url에 따라 선택된 페이지를 렌더링 해주는 라이브러리 ** 리액트는 CSR을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식 CSR, SPA에 대한 자세한 설명은 여기를 참고하자https://coding-hana.tistory.com/15 CSR, SSR, SSG 정리https://youtu.be/iZ9csAfU5Os?si=dWfuGRQuhMFz9jUQ드림코딩 유튜브 영상을 본 후 정리한 내용이다.1990년 중반까지는 Static Sites로, 클릭할 때마다 html을 서버에서 불러와서 페이지 전체가 update 1996년 도입 ..

https://youtu.be/iZ9csAfU5Os?si=dWfuGRQuhMFz9jUQ드림코딩 유튜브 영상을 본 후 정리한 내용이다.1990년 중반까지는 Static Sites로, 클릭할 때마다 html을 서버에서 불러와서 페이지 전체가 update 1996년 도입 - 문서 내에서 또 다른 문서를 담을 수 있는 태그                                    - 부분적 update 가능 1998년 - XMLHttpRequest API(fetch API의 원조)             - HTML 문서 전체가 아니라 JSON과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있음.             - Data는 JS를 이용해서 동적으로 HTML 요소 생성 => 2005년 ..

1. 데이터 가져오기- data.jslet data = [ { id : 0, title : "나이키", content : "우먼스 나이키 인터랙트 런", img : "./img/shoes1.png", price : 99000 }, { id : 1, title : "아디다스", content : "그라다스", img : "./img/shoes2.png", price : 79000 }, { id : 2, title : "반스", content : "올드 스쿨 - 블랙/블랙 (CANVAS)", img : "./img/shoes3.png", pr..

1. image 삽입 방법(1) img 태그 사용하는 경우import bg from ./img/bg.png' (2) div 태그 사용하는 경우import bg from ./img/bg.png' (3) css 파일 사용하는 경우- App.js - App.css.img-bg { background-image: url('./img/bg.png');}

1. react-bootstraphttps://react-bootstrap.netlify.app/docs/getting-started/introduction Introduction | React BootstrapLearn how to include React Bootstrap in your project.react-bootstrap.netlify.app(1) react-bootstrap 설치npm install react-bootstrap bootstrap (2-1) index.html - 안에 import 시켜주기 (2-2) App.js import 'bootstrap/dist/css/bootstrap.min.css';-> 2-1 / 2-2 중에 하나의 방법으로 하면 된다. ** bootstrap v..