합니다, 개발공부📝 합니다, 개발공부📝

먼저 서버의 주소와 프론트엔드의 주소가 다르기 때문에 프록시를 이용해서 이를 연결시켜주자. 프론트엔드에 프록시를 설정한다. frontend>package.json파일에 다음과 같이 추가해준다. { "name": "frontend", "proxy":"http://127.0.0.1:5000", 다음은 axios를 설치하자. frontend> npm install axios해준다. 이제 프론트엔드의 data에서 정보를 가져왔던 것들을 모두 백엔드에서 가져오도록 바꿔주자. 이는 axios를 이용할것인데, useEffect를통해서 axios를 보내고, useState를 이용해서 정보를 바꿔주는 것을 이용할 것이다. 먼저 HomeScreen.js로 가서 해보자. import React , {useEffect, us..

이번엔 서버를 만들어보자. 먼저 amazon 폴더로 가서 (최상위) npm init으로 서버를 설치해준다. backend 폴더도 생성해준다. backend>server.js파일을 만들고 npm install express해준다. 다음 익스프레스와 서버를 연결하는 가장 기본적인 코드로 실행여부를 확인한다. package.json파일로가서 다음과 같이 타입을 모듈추가해준다. { "name": "amazon-clone", "type":"module", "version": "1.0.0", "description": "e-commerce clone", "main": "index.js", server.js import express from 'express'; const app = express(); app.get..

우선 리액트 라우터 돔을 만들어서 상품 클릭하면 페이지 이동할 수 있게 만들어 준다. frontend-> npm install react-router-dom 해주고 App.js파트로 가서 return 로 감싸준다. import React from 'react'; import data from './data'; import Product from './components/Product' import {BrowserRouter,Route} from 'react-router-dom' function App() { return ( ... //라우트 생성해준다. { data.products.map(product=>( )) } ... ); } export default App; src>screens>HomeScre..

먼저 src>components>Product.js파일을 만들어주고, 저번시간에 App.js에 만들었던 map function부분을 그대로 복사해준다. App.js import Product from './components/Product' { data.products.map(product=>( )) } Product.js import React from 'react' function Product(props) { const{product} = props; return ( {product.name} ${product.price} ) } export default Product 이번엔 Rating파트를 따로 빼내서 작동하도록 만들 것이다. components>Rating.js파일을 만들어준다. produc..

리액트앱을 시작해보자. amazon-clone폴더에서 npx create-react-app frontend를 실행해준다. 프론트엔드로 가서 npm start를 하면 리액트앱이 실행되는 것을 확인할 수 있다. 여기서 우리가 만든 template안의 index.html 중에서 body태그 안의 내용들을 App.js로 복사 붙여넣기 해준다. import React from 'react'; function App() { return ( 추가적으로 app.js파일의 링크를 다음과 같이 수정해주자. "/~~~"의형태로 만든다. import React from 'react'; import data from './data'; function App() { return ( amazona Cart Sign In

맨처음 template 폴더를 만들어주고 폴더안에 index.html파일 생성후 !쳐서 기본내용을 입력해준다. index.html을 다음과 같이 만들고 style.css파일을 만들고 설정하자. amazona Cart Sign In Nike Slim Shirts $120 All right reserved html { font-size: 62.5%; /* 16px x 62.5 = 10px = 1rem */ box-sizing: border-box; } body { margin: 0; height: 100vh; font-size: 1.6rem; font-family: Helvetica, Arial, sans-serif; } /* Layout */ .grid-container { display: grid; gr..

로그아웃 페이지는 새로 생성하지 않고, 랜딩페이지에다 버튼을 추가할 것이다. import React, { useEffect } from 'react' import axios from 'axios'; import { withRouter } from 'react-router-dom'; //props.history.push("") 쓰기 위해서 필요하다 function LandingPage(props) { useEffect(() => { axios.get('/api/hello') .then(response => { console.log(response) }) }, []) const onClickHandler = () => { axios.get(`/api/users/logout`) .then(response =>..

이번엔 소셜미디어를 만든다. https://www.youtube.com/watch?v=JGwiXVvPcdk&list=PLs4co9a6NhMyAfSnDg1MKGwLdLx0OA07d&index=2&ab_channel=DevA.TVietNamDevA.TVietNam 제일먼저 만들려는 프로젝트 폴더를 만들고, 프로젝트 터미널에서 npm init을 해준다. 그 이후 npm i express mongoose cors dotenv bcrypt jsonwebtoken cookie-parser를 해서 다운로드 해준다. 여기서 dotenv는 환경변수를 관리하는 프로그램이다. 서버에 추가로 npm i -D nodemon을 실행해서 노드몬을 설치해준다. 서버의 package.json을 다음과 같이 수정해준다. { "name"..