Router
-
[React] 실습 - react twittler SPAcodeStates front-end/React 2023. 1. 25. 20:25
📌 react twittler SPA 📖 학습 목표 React Router 설치 react-router-dom 을 npm으로 설치해야 합니다. 상세 컴포넌트 구현하기 App 루트 컴포넌트(App.js) import 를 이용하여 Tweets, MyPage, About 컴포넌트를 불러옵니다. Sidebar 메뉴 컴포넌트(Sidebar.js) Font Awesome을 활용하여 About 아이콘 을 넣어야 합니다. Font Awesome을 활용하여 MyPage 아이콘 을 넣어야 합니다. Tweets 컴포넌트(Tweets.js) import 를 이용하여 Footer 컴포넌트를 연결합니다. dummyTweets의 길이만큼 트윗이 보여야 합니다 MyPage 컴포넌트(MyPage.js) import 를 이용하여 Foo..
-
[React] SPA, RoutercodeStates front-end/React 2023. 1. 25. 15:56
📌리액트 개념 📍SPA( Single-Page Application ) 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지에 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트 전통적인 웹사이트 - 페이지를 이동 시 "페이지 전체"를 불러와야함 SPA - 페이지 이동 시 중복 되는 부분은 불러 오지 x 중복 되는 헤더, 푸터는 냅두고, 컨텐트만 바꾼다는 뜻 SPA 장점 페이지 전체를 런데링 하는 것이 아니므로 사용자의 행동에 빠르게 반응 SPA 단점 첫 화면의 로딩 시간이 길어짐 검색 엔진(자료를 수집하기 좋도록 웹 페이지를 구성하는 것) 최적화가 좋지 않음 🧷 Wireframe과 Mockup Wireframe - 웹페이지의..