Routing 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 합니다. BrowserRouter 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줍니다. 또한 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있습니다. Routes, Route 경로를 매칭해주는 역할을 하는 컴포넌트입니다. 컴포넌트는 여러 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다. 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다...

SPA (Single Page Application) 전통적 웹사이트 : 웹사이트 페이지 전체를 로딩한다. SPA : Menu,Footer 등 중복되는 컴포넌트에 대해서는 새로 불러오지 않는다. SPA의 등장 배경 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스간의 더욱 많은 상호작용이 일어나게 되었다. 이 때 마다 중복되는 요소를 새로 불러오게 되면서 서버와의 불필요한 트래픽을 발생시켰다. 사용자 또한 증가하는 불필요한 트래픽 때문에 느린 반응성을 겪었고, 이는 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었다. SPA의 장점 전체페이지가 아니라 부분적인 데이터만 받아서 서버에 요청하기 때문에 처리속도가 빠르다. 서버입장에서도 전체적인 데이터를 넘겨주지 않아도 ..

-React SPA 학습 후 정리하기 -React Tweettler Bare Minimum Requirement 완료하기 -React Tweettler Advanced Challenge 완료하기 -React SPA 관련 유튜브 시청 -Daily coding 11번 풀기. -프로그래머스 1문제 풀기.

import React from 'react'; import './App.css'; import './global-style.css'; import { dummyTweets } from './static/dummyData'; // ! 위 코드는 수정하지 않습니다. console.log(dummyTweets); // 개발 단계에서 사용하는 더미 데이터입니다. const Sidebar = () => { //슬라이더 컴포넌트 return ( ); }; const Counter = () => { //카운터 컴포넌트 return ( 총 트윗 횟수:{dummyTweets.length} ); }; const Footer = () => { //푸터 컴포넌트 return ( Copyright @ 2022 Code Sta..

const newsURL = 'http://localhost:4999/data/latestNews'; const weatherURL = 'http://localhost:4999/data/weather'; function getNewsAndWeather() { // 체이닝의 결과가 Promise 형태로 리턴되어야 합니다 // fetch 두번 사용해야한다 // 불러온 api의 결과값을 합쳐 새로운 객체로 리턴해야한다 // promise all / async 사용 하지 않아야한다. const dailynews = {} return fetch(newsURL) // fetch도 프로미즈 객체를 리턴한다. .then(res => res.json()) // 프로미즈 객체 안에 리스폰에 접근해서 정보를 json으로 만..

Promise,async 등 비동기 개념 익히기 dailycoding 7일차 풀기 구조분해할당 개념 익히기 동기/비동기 과제 통과하기.