1. TIL (Today I Learned)

React Router

Achievement Goals

1. You can install React Router DOM with npm from React (npm install react-router-dom) and use it.
2. You can implement SPA using React Router DOM
3. You should be able to construct a routing structure, and you should be able to use the basic syntax required for this.

SPA & Routing

• SPA has one page, but it doesn't actually use only one kind of screen.
• For example, when creating an SPA like Twitter, you may need screens such as the main Tweet Collection Page, Notifications page, and My Tweets Page.
• Also, there will be different "addresses" for each page. This process of showing different views according to different addresses is called Routing, meaning "change according to the route."
  ex.

1. xx.com
2. xx.com/notification
3. xx.com/mypage

• But, React doesn't have this built in. We have to show a different view for each address ourselves.
• React SPA uses a library called React Router the most for routing.

Using React Router

• Let's take a look at the main components of React Router.

• The main components of React Router can be divided into 3 main components. BrowserRouter that acts as a router, Switch & Route that matches routes, and Link that changes routes.

• To use these components, you need to load them seperately from the React Router Library.

  	import { BrowserRouter, Switch, Route, Link } from "react-router-dom"

  ** Import is the role of importing required modules and can be used simliarly to destucturing assignment.

Setting up React Router usage environment

import logo from './logo.svg';
import './App.css';
import React from 'react'
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link> {/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
              </li>
              <li>
                <Link to="/about">MyPage</Link>
              </li>
              <li>
                <Link to="/dashboard">Dashboard</Link>
              </li>
            </ul>
          </nav>

          {/* 주소경로와 우리가 아까 만든 3개의 컴포넌트를 연결해줍니다. */}
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/about"> {/* 경로를 설정하고 */}
              <MyPage /> {/* 컴포넌트를 연결합니다. */}
            </Route>
            <Route path="/dashboard">
              <Dashboard />
            </Route>
          </Switch>
        </div>
    </BrowserRouter>
  );
}

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

06_letterCapitalize

Take a string as input and return a string in which the first letter of each word composing the string is an uppercase letter.

function letterCapitalize(str) {
  const arr = str.split(" ");
  for(i = 0; i < arr.length; i++){
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1);
  }
  const result = arr.join(" ");
  return result;
}

2. 3 Things to be thankful

1. Thankful for a great day
2. Thankful for being able to be humble.
3. Thankful for being safe and happy.

3. Ideas and things to think about

1. Skills are what you can use to prove that you can become a good person or leader. Just built on skills. Skills will show up later on.
2. Be quiet stay silent and slow to speak that will bring you much more peace than anything.