전체 글44 [리액트 React] 쇼핑몰 프로젝트_03 1. import / export 사용해서 데이터 바인딩하기 - 신발 shoes에 대한 정보(데이터)를 담은 배열(array) 만들기 --> useState - 필요한 데이터를 웹 페이지에 띄우기 --> 데이터 바인딩 2. object와 array 차이 3. 반복적인 HTML요소가 많다면 반복문이나 Component 이용 - 특정 div 태그를 Component로 만들어서 web page에 나오게 하기 - Component 바인딩 하기 - Conponent를 반복문 돌리기 4. Props 사용하기 부모 component에 있는 state를, 자식 component에서 사용하고 싶으면 props를 이용해야 한다. 5. 각각의 자식 Component에 다른 data 전송하기 data.js에서 받아온 데이터에.. 2021. 3. 28. [리액트 React] 쇼핑몰 프로젝트_02 1. 쇼핑몰 레이아웃 디자인 대부분의 쇼핑몰 사이트는 상단에 메뉴를 선택할 수 있는 nav-bar, 큰 이미지가 보이는 대문 사진, 판매중인 상품들, 이런 식으로 레이아웃이 구성되어 있다. 레이라웃 구성에 대해서 생각해보고 지난 시간에 설치한 react-bootstrap 라이브러리를 이용하여 디자인을 구현한다. 2. react-bootstrap 컴포넌트(component) 사용하기 - navbar : 상단 바 - jumbotron : 페이지 대문 - container : 상품 리스트 - component 사용중에 발생한 에러 - 상품 레이아웃은 react-bootstrap 라이브러리 사용하지 않음 3. Code Shopee Home Link Action Another action Something Sep.. 2021. 3. 28. [리액트 React] 쇼핑몰 프로젝트_01 리액트 프로젝트 설치하기 1. 프로젝트 생성 VScode 에디터를 실행하고 터미널에서 작업폴더명으로 이동한다. 터미널에 아래와 같이 입력을 하면 shop 이라는 이름의 프로젝트가 하위폴더로 해서 생긴다. npx create-react-app 프로젝트이름 ex) npx create-react-app shop 2. 리액트 프로젝트 실행 터미널에서 경로를 프로젝트를 설치한 폴더로 이동하고 리액트 프로젝트를 실행한다. npm run start 또는 yarn start 라고 입력하면, web brouser에서 localhost:3000의 주소로 프로젝트가 실행된다. 3. react-bootstrap 설치 웹페이지를 구성하는 메뉴, 버튼, 레이아웃 등 UI를 디자인 할때 원래는 css를 이용하지만 bootstrap.. 2021. 3. 28. [리액트 에러 해결] Failed to compile 'Jombotron' is not defined react/jsx-no-undef Failed to compile react-bootstrap 사이트에서 'Jubbotron' 컴포넌트를 사용하기 위해 코드를 가지고 왔는데 에러가 발생했다. import 리액트에서 컴포넌트를 사용할때는 import {Component이름} from ~~; 이런식으로 import를 하면 해결할수 있다. 2021. 3. 27. 이전 1 ··· 7 8 9 10 11 다음
