1. 프로젝트 wecode 38기 1차 프로젝트 스웨덴의 가구 브랜드 iKEA cloning project 개발 인원: 프론트엔드 3명, 백엔드 3명 개발기간 : 2022/10/17 ~ 2022/10/27 적용기술 Front-End : Javascript, React.js, sass, React Router, Create React App Back-End : Node.js, Express, MySQL, EC2, RDS, S3, PostMan common : Git, GitHub, AWS. ESLint. Prettier 협업툴 : Notion, Slack, Trello 기능구현 Detail Page,,Cart,, Wishlist,, Nav Bar Main Page,, List Page,, Footer,, ..

⚡️전체 유저 리스트 import React, { useEffect } from "react"; import "./List.scss"; const List = () => { const [users, setUsers] = useState([]); useEffect(() => { fetch("https://reqres.in/api/users") .then(response => response.json()) .then(result => setUsers(result.data)); }, []); }; return ( {users.map(({ id, first_name, email, avatar }) => ( {first_name} {email} ))} ); ⚡️단일 유저 리스트 import React, { use..

⚡️로그인 API 통신 const appearAlertModal = () => { setIsAlertModalAppear(true); setTimeout(() => { setIsAlertModalAppear(false); }, 3000); }; const loginRequest = e => { e.preventDefault(); fetch(API.login, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email, password }), }) .then(response => { if (response.ok === true) { return response.json(); } throw ne..

import React, { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import ASIDE_1ST from "./ASIDE_1ST"; import ASIDE_2ND from "./ASIDE_2ND"; import "./SignUp.scss"; function SignUp() { const [alert, setAlert] = useState(false); const navigate = useNavigate(); const [userInfo, setUserInfo] = useState({ last_name: "", first_name: "", birthday: "", phone_number: "", emai..

import React, { useState } from 'react'; import './App.css'; function App() { const [alert, setAlert] = useState(false); return ( setIsShown(true)} onMouseLeave={() => setIsShown(false)}> Hover over me! {alert && ( I'll appear when you hover over the button. )} ); } export default App; export default Login; { alert && } 위에 내용은 useState(false)의 값을 주면 alert이 false이기 때문에 && 는 둘중하나만 거짓이여도 반환하지 않기 때문..

⚡️Router 설치 사용 방법 터미널에 들어가서 npm install react-router-dom@6 설치한뒤 Router.js 파일을 생성하고 path = "경로" element = {경로접근시 렌더링할컴포넌트} import React from "react"; import Login from "./pages/Login/Login"; import Main from "./pages/Main/Main"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const Router = () => { return ( ); }; export default Router; 4. index.js 파일에 Router를 연결 import React from..