개발자연습노트

페이지를 나누고 싶으면 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 근데 리액트는 html 파일을 하나만 사용합니다.그래서 리액트에선 누가 다른 페이지 요청하면 그냥 내부에 있는 를 갈아치워서 보여주면 됩니다. 근데 직접 코드짜면 귀찮으니 react-router-dom 이라는 외부 라이브러리 설치해서 구현하는게 일반적이라 그렇게 해봅시다.      react-router-dom 설치하려면  외부라이브러리라서 설치 셋팅하는 법은react-router-dom 홈페이지 들어가서 그대로 따라하면 되는데 그냥 알려드리자면  터미널 열어서 npm install react-router-dom@6 입력해서 설치합니다.  셋팅은 index.js 파일로 가서  import ..

숙제1. html 긴 부분 컴포넌트로 만들어보기  부분이 길고 복잡하고 자주 등장해서 컴포넌트로 만들어볼 것입니다. 다른데서 사용할 일이 없으면 굳이 컴포넌트화 하는게 필요없을 것 같은데연습삼아서 아무튼 해봅시다.   function App(){ return ( (생략) )}function Card(){ return ( 상품명 상품정보 )}그래서 밑에 Card 라는 컴포넌트를 만들고 거기에 축약할 html을 담았습니다.그리고 라고 쓰면 잘보일텐데 근데 실제 데이터 꽂아넣는건 다시 해야겠군요.      숙제2. shoes에 있던거 ..

오늘 필요한 상품데이터 상품데이터를 3개 준비해왔는데 이걸 html에 보여줍시다. 하단 자료를 state에 보관해놓고 html에 데이터바인딩해보도록 합시다. 실제 서비스였으면 서버 이런데서 받아왔겠지만 서버가 없으니 대충 서버에서 보낸 것이라고 생각합시다.  [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the..