꾸매코딩

서론 React를 사용하면서 페이지 이동에 가 아닌 Router를 사용해야하는 이유가 궁금해졌다. SPA란? React에서 Router를 사용하는 이유를 알기 위해선 먼저 SPA를 이해해야한다. SPA에 대한 이전 글 참고 SPA(Single Page Application)는 말 그대로 한개의 페이지로 이루어진 어플리케이션이라는 의미이다. SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)방식의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다. 를 통한 이동이 가능하다. 하지만, SPA의 경우 렌더링의 역할을 서버가 아니라 브라우저에서 처리하는 방식이다. 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때 ..

결과 Header 부분을 완성 하였다. [ 홈 / TV 프로그램 / 영화 ]로 분류 하였고 각각 Router를 이용해 경로를 지정해주었다. createGlobalStyle로 GlobalStyle을 설정하였다. jsconfig.json을 사용하여 절대경로로 지정하였다. [JavaScript] import (상대경로 → 절대경로) path 설정 방법 절대 경로 설정 방법 프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 경로 (Path) 문서, 파일, 그림 등의 위.. shin1303.tistory.com Header npm i styled-comp..

추가 상단에 NavBar를 만들었고, Router를 통해 경로 지정을 해주었다. 변경 타이머 빈 공간에 0을 조건식으로 작성했었다. {currentHours < 10 ? `0${currentHours}` : currentHours}:{ currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes}:{ currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds} 이러한 방식은 시간을 저장하게 되었을 때 중복이 되고, 불편할 것이라 생각하여 ES7의 padStart를 사용하였다. setCurrentHours(String(hours).padStart(2, '0')) setCurrentSeconds(String(sec..