프론트엔드 기록

상세페이지에 상품명 넣어봅시다 임시 글자들만 들어있으면 밋밋해서 그렇습니다. 그래서 shoes 라는 state에 있던 상품정보들을 Detail 컴포넌트에 꽂아넣어봅시다. 근데 안타깝게도 shoes는 App 컴포넌트에 있으니 App -> Detail 이렇게 전송하면 쓸 수 있겠군요. 그래서 App.js 안에 쓰는 곳에서 일단 props 전송하고 (Detail.js) {props.shoes[id].title} {props.shoes[0].content} {props.shoes[0].price}원 주문하기 ) } useParams() 라는 함수를 상단에서 import 해오면 쓸 수 있는데 이거 쓰면 현재 /:url파라미터 자리에 유저가 입력한 값을 가져올 수 있습니다. 변수에 저장해서 쓰든가 하면 됩니다. 그..

리액트 2023. 8. 30. 20:35

리액트 프로젝트 폴더구조는 리액트는 그냥 html 이쁘게 만들어주는 쪼그만한 라이브러리일 뿐입니다. 그래서 여러분이 만들 파일들은 95% 확률로 .js 파일이기 때문에 비슷한 .js 파일끼리 한 폴더에 묶어놓으면 그냥 그게 좋은 폴더구조입니다. 컴포넌트 역할하는 js 파일은 components 폴더에 묶고 -> 한 페이지에서 너무 길어서 그냥 컴포넌트로 뺀 애들 !! 페이지 역할하는 js 파일은 routes 아니면 pages 폴더에 묶고 ->url에 따라서 다르게 보여질 페이지들 !! 자주 쓰는 함수가 들어있는 js 파일은 utils 폴더에 묶고 알아서 필요할 때마다 폴더 만들어쓰십시오 import { Routes, Route, Link, useNavigate, Outlet } from 'react-ro..

리액트 2023. 8. 30. 20:34

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

리액트 2023. 8. 30. 20:10

새로운 내용 없으니 숙제 잘했으면 다음강의로 넘어갑시다. 저는 있는 부분을 컴포넌트로 만들어봤고 가 3개 있으니까 그걸 반복문 돌려서 숙제를 해결했다고 합니다. 방법은 달라도 잘되면 다 정답입니다. 숙제1. html 긴 부분 컴포넌트로 만들어보기 부분이 길고 복잡하고 자주 등장해서 컴포넌트로 만들어볼 것입니다. 다른데서 사용할 일이 없으면 굳이 컴포넌트화 하는게 필요없을 것 같은데 연습삼아서 아무튼 해봅시다. function App(){ return ( (생략) ) } function Card(){ return ( 상품명 상품정보 ) } 그래서 밑에 Card 라는 컴포넌트를 만들고 거기에 축약할 html을 담았습니다. 그리고 라고 쓰면 잘보일텐데 근데 실제 데이터 꽂아넣는건 다시 해야겠군요. 숙제2. s..

리액트 2023. 8. 30. 19:45

오늘 필요한 상품데이터 서버에서 상품데이터 가져와서 집어넣어주세요~~ 상품데이터를 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 States", pri..

리액트 2023. 8. 30. 19:09

리액트는 원래 좀 자유롭습니다. 이미지 넣는 법도 서너개 있습니다. 강의에서 사용하는 신발 이미지 URL https://codingapple1.github.io/shop/shoes1.jpg https://codingapple1.github.io/shop/shoes2.jpg https://codingapple1.github.io/shop/shoes3.jpg 대문만들기 심심하니까 메인페이지에 큰 사진 하나 넣어봅시다. 하나 넣고 css 파일에서 디자인넣으면 될 것 같은데 (App.css) .main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : center; } 이렇게 ..

리액트 2023. 8. 30. 18:36

오늘부터 쇼핑몰 프로젝트를 새로 만들어봅시다. 그래서 새로운 리액트 프로젝트 생성부터 하면 되는데 CSS짜기 귀찮으니 react-bootstrap 라이브러리를 설치해서 레이아웃을 좀 쉽게 복사붙여넣기 식으로 만들어봅시다. 새로운 프로젝트 생성은 ▲ 1. 작업폴더에 shift + 우클릭해서 powershell/터미널 열고 2. 터미널에 리액트 프로젝트 생성 명령어 입력합니다. npx create-react-app shop 그럼 shop이라는 프로젝트가 하나 하위폴더로 생성됩니다. 3. shop이라는 폴더를 VScode 에디터로 오픈한 뒤에 코드짭시다. 4. App.js에 필요없는 html들은 지우고 div 하나만 남겨두고 시작합시다. 5. 에디터에서 터미널열어서 npm start 누르면 미리보기 띄울 수 ..

리액트 2023. 8. 30. 18:18

이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 build용 파일을 생성하신 후 그걸 올려야합니다. 왜냐고요? 웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있습니다. 리액트의 이상한 state, JSX 이런거 전혀 못알아듣습니다. 그래서 리액트 프로젝트를 build 라는걸 하시면 브라우저 친화적인 HTML CSS JS 파일로 바꿔줍니다. 그리고 그걸 어딘가 서버에 올려야 사용자들이 여러분의 사이트를 구경할 수 있는 것임 우리도 build를 해본 후 무료로 HTML 파일을 호스팅해주는 Github Pages를 이용해 배포까지 해보도록 합시다. 빨리 github.com 들어가서 계정을 먼저 ..

리액트 2023. 8. 30. 16:45