[React] 타이머 만들기 / Router와 상단 NavBar 추가, padStart 적용

2021. 7. 16. 17:54·Project/Timer Project
반응형

추가

상단에 NavBar를 만들었고, Router를 통해 경로 지정을 해주었다.


변경

타이머 빈 공간에 0을 조건식으로 작성했었다. 

<div className="timer">
	{currentHours < 10 ? `0${currentHours}` : currentHours}:{
        currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes}:{
        currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}
<div>

 

이러한 방식은 시간을 저장하게 되었을 때 중복이 되고, 불편할 것이라 생각하여 ES7의 padStart를 사용하였다.

setCurrentHours(String(hours).padStart(2, '0'))
setCurrentSeconds(String(seconds).padStart(2, '0'))
setCurrentMinutes(String(minutes).padStart(2, '0'))

// padStart(2,'0') 두 자리 숫자에서 빈 공간은 0으로 채운다 01 (앞)
// padEnd(2,'0') 두 자리 숫자에서 빈 공간은 0으로 채운다   10 (뒤)

디렉토리(Directory)

최대한 비슷한 종류들끼리 모으려고 노력중이다.


NavBar 

타이머에 메뉴를 추가해주었다. 현재 예상으로는 Home(Timer), Contents, [About / Profile]등으로 생각 중이다.

만들다가 해보고 싶은 게 생기면 계속 추가할 예정이라 구상은 간단하게만 해놓은 상태이다.

Router

App.js에 Router를 바로 작성하기보다 App.js는 최종 컴포넌트들이 모여있는 것이 보기 좋을 것 같아서 Router.js를 따로 작성하였다.

[Router.js]

const AppRouter = () => {
    return (
        <BrowserRouter>
            <NavBar />
            <Switch>
                <Route path="/">
                    <SetTimer />
                </Route>
            </Switch>
        </BrowserRouter>
    );
}
export default AppRouter;

 

[SidebarData.js]

//FontAwesomeIcon 사용
export const SidebarData = [
    {
        title: 'Timer',
        path: '/',
        icon: <FontAwesomeIcon icon={faStopwatch} />,
        cName: 'nav-text'
    },
    {
        title: 'Contents',
        path: '/Contents',
        icon: <FontAwesomeIcon icon={faCommentAlt} />,
        cName: 'nav-text'
    },
    {
        title: 'About',
        path: '/About',
        icon: <FontAwesomeIcon icon={faUserAlt} />,
        cName: 'nav-text'
    }
];

정리

공부한 시간을 저장하고, 공유하는 기능을 구현하기 위해 이제 Server와 DataBase (back-end)가 필요하다.

최근에 AWS와 Firebase를 찾아보면서 Firebase를 사용해보기로 결정했다.

이유는 App에 특화되어 있어서 React Native를 통해 App으로 만들때에도 큰 문제는 없을것이라고 생각한다.

또한 공식 홈페이지 UI가 Firebase가 더 보기 편했다.

반응형
저작자표시 (새창열림)
'Project/Timer Project' 카테고리의 다른 글
  • [React] Firebase 활용하여 타이머 시간 저장(Create), 불러오기(Read)
  • [React] 타이머 만들기 / Modal창 추가, jsconfig 절대경로 연결
  • [React] 동적인 타이머 만들기 React에서 FontAwesome 아이콘 사용/ 기본 배치 CSS
  • [React] state를 활용한 동적인 타이머 만들기 - 시작, 정지, 리셋 기능 구현
꾸매코더
꾸매코더
웹 / 앱 개발자
  • 꾸매코더
    꾸매코딩
    꾸매코더
  • 전체
    오늘
    어제
    • 분류 전체보기 (96)
      • JavaScript (18)
        • Deep Dive (0)
      • React (5)
      • React-Native (9)
      • CSS (3)
      • TypeScript (1)
      • CS (10)
      • GitHub (4)
      • Clone Coding (15)
        • Kakaotalk [HTML + CSS] (10)
        • Momentum [JavaScript] (5)
      • Project (30)
        • Timer Project (14)
        • Netflix [React + Hooks] (12)
        • ToDoList [React-Native] (4)
      • 회고 (1)
  • 링크

    • Github
  • hELLO· Designed By정상우.v4.10.3
꾸매코더
[React] 타이머 만들기 / Router와 상단 NavBar 추가, padStart 적용
상단으로

티스토리툴바