⚡️ Mock Data 란? 프론트엔드 개발을 진행하다 보면, UI 구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 수도 있습니다. 이러한 경우Mock Data를 만들어 사용한다. Mock Data란 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터입니다. ⚡️ Mock Data 를 사용하는 이유 1. 백엔드 API가 미완성인 상태에서도 작업에 차질 없이 개발할 수 있습니다. 2. 백엔드 API의 구성을 미리 맞춰볼 수 있습니다. 3. 실제로 API 통신을 진행할 때 원활하게 할 수 있습니다. ⚡️ Mock Data 생성 Mock Data는 실제 서버에서 보내주는 데이터의 형식과 동일하게 만들어야 하기 때문에 .json 확장자 파일로 JSO..

⚡️ 상수 데이터란? 페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있습니다. 이런 데이터들을 상수 데이터로 만들어 UI를 구성할 수 있습니다. 즉 상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 의미합니다. ⚡️ 상수 데이터를 사용하는 이유? 반복되는 UI를 하드코딩으로 일일이 만들어두게 되면 코드가 길어져서 가독성에 좋지 않고 수정이 필요할 시 해당하는 부분을 찾기 힘들어 유지보수가 어렵다는 문제가 있습니다. 하지만 상수 데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있습니다. 이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return하는 JSX 부분만, 내..

⚡️.env파일 만들기 깃에. env파일이 올라가면 안될때 사용 ( API나 토큰번호 ) .gitIgnore에. env를 꼭 추가시켜줍니다 .gitignore 폴더 .env 추가 ⚡️변수 내용 작성 파일 안에 저장할 환경변수 내용을 적어줍니다. 이때 중요한 점은, 반드시 변수명 앞에 REACT_APP_ 을 붙여줘야 합니다 이걸 붙여주지 않으면 리액트 앱에서는 변수를 불러오지 않는 것으로 확인됐어요 .env 폴더 REACT_APP_SERVER_URL= 'API주소' REACT_APP_JAVASCRIPT_KEY= K MAP 자바스트립트키 REACT_APP_GETALLERROR= 'API주소경로' ⚡️등록한 변수 사용하기 리액트는 라이브러리나 컴포넌트 사용 시 import를 꼭 해줘야 하지만, .env에 등록..

import React, { useState } from 'react'; import First from './components/First'; import Second from './components/Second'; import Third from './components/Third'; import './MenuTab.scss'; const MenuTab = () => { const [currentTab, setCurrentTab] = useState('First'); return ( Menu Tab {TAB_ARR.map((tab, index) => ( setCurrentTab(tab)}> {tab} ))} {MAPPING_OBJ[currentTab]} ); }; export default Menu..

⚡️전체 유저 리스트 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..