목록분류 전체보기 (39)
오늘도 코딩하나
1. 컴포넌트 Lifecycle- Detail.jsfunction Detail(props) { let {id} = useParams(); let idx = props.shoes.find((x) => x.id == id); return ( {idx.title} {idx.content} {idx.price}원 주문하기 )}=> D..
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..
1. Node.js 설치React 프로젝트를 생성 전, Node.js를 설치해야 한다.https://nodejs.org/en Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org ** React 개발에 Node.js가 필요한 이유는 아래 게시글 내용을 참고하도록 하자https://chucoding.tistory.com/86 React 개발에 왜 Node.js가 필요할까??구글에 React를 검색하면 항상 Node.js가 붙어다니는 광경을 목격할 수 있습니다. React를 공부하면서 개발하기도 시간이 촉박한데 Node.js까지 공부를 해야하는지 의문이 많이 들 것입니다. 도대체 Reachucoding..