여기 이 코스 섹션은
지난 코스 섹션에서 다루었던 중요한 리액트의 필수적인 것들을
연습하는 것이 전부입니다
필수적인 것들을 연습하기 위해 여기 섹션에서는
새로운 데모 프로젝트를 살펴 볼 것 입니다
이 리액트 기반 Investment Calculator (투자금 계산기)는
웹 방문자들이
미래 가치를 계산하거나
혹은 실제로 주어진 투자 매개변수들의
미래 가치를 곱하기 위하여 사용할 수 있습니다
그러는 동안 우리는 당연히
이미 이 시점까지 여러 데모 프로젝트를 만들었습니다
여기 이 데모 프로젝트는
지금껏 우리가 배운 것을 연습하는 것이 전부입니다
왜냐하면 이 섹션에서는
새로운 개념이나 새로운 리액트 기능을
다루지 않을 것이기 때문입니다
대신에 우리는 이 Investment Calculator 웹 앱을
만들 것입니다
이것은 우리가 컴포넌트 혹은
상태와 관련하여 연습하기 위함이고
우리는 리스트를 출력하거나 조건적인 콘텐츠를
연습할 수 있습니다
제가 여러 분을 위해 드리는 임무는
여러분이 이 프로젝트 만들기를 시도하는 것입니다
따라서 그것을 돕기 위하여
저는 시작 프로젝트를 만들었습니다
여러분은 당연히 이것을 로컬 버전과 CodeSandbox 버전으로
첨부된 것을 찾을 수 있을 것입니다
로컬 버전에서는 늘 그렇듯이, 만약 사용하고 싶다면
다운로드하고 추출해서
run npm install을 진행합니다
이렇게 한 후에 npm run dev를 하여
개발 서버를 실행합니다
이것은 CodeSandbox 에서는 필요하지 않습니다
그러나 이 시작 프로젝트가
가동되었으니
여러분의 목표는 이 Investment Calculator 웹 앱을 구축하기 위해
필요한 컴포넌트와 상태 등을
추가하는 것입니다
이제 이 웹 앱을 만드는 과정을
조금 더 쉽게
그리고 여러분이 배운 리액트 기능에
집중할 수 있도록 하기 위해
이 시작 프로젝트에서, src 폴더에서
여러분은 index.css 파일을 찾을 것입니다
이 파일은 이미 여러 묶음의 CSS 코드를 포함하고 있습니다
따라서 여러분은 어떤 커스텀 CCS 코드도
이 웹 앱을 만들기 위해 작성하지 않아도 됩니다
이 CCS 코드를 살펴보면
여기서 여러분은 어떻게 웹 애플리케이션을 구조화할 수 있을지에 대한
만들 수 있는 몇 컴포넌트에 관해
몇 가지의 힌트를 얻을 수도 있습니다
예를 들어서 이 user-input 컴포넌트는
user-input 필드를 그룹화합니다
그러나 당연히 결과적으로는
이 앱을 어떻게 만드는지는 모두 여러분에게 달려 있습니다
왜냐하면 하나의 올바른 솔루션만 존재하는 것도 아니기 때문입니다
대신에 여러 가지 가능한 솔루션들이 있습니다
이 섹션은 정말 여러분이
여러분이 배운 것을 시도하고 연습하는 것입니다
그러나 이 CSS 코드 외에
이 src 폴더에 util 폴더로 찾을 수 있습니다
더불어 assets 폴더는 여러분이 사용할 수 있는 이미지를 가지고 있습니다
이 util 폴더 내에서 여러분은 investment.js 파일을 찾을 수 있습니다
이것은 calculateInvestmentResults 함수를 포함하고
마무리된 앱에서의 이 테이블에서 보여지는 결과를
도출할 때 사용할 수 있습니다
그리고 제가 여러분이 이 투자 값을 계산하기 위한
로직을 생각하지 않아도 되도록
이 함수를 제공합니다
따라서 여러분은 이것 대신에 리액트의 개념에 집중할 수 있습니다
그리고 여러분은 여기서 formatter 라는 객체도 찾을 수 있습니다
이것은 export되는 것이고
따라서 다른 파일에서 import해올 수 있습니다
이 calculateInvestmentResults 함수 같이 말입니다
그리고 이 formatter 객체는 단순히 유틸리티 객체로
여러분이 숫자를
더 깔끔하고, 보여 드린 최종 결과물에서 보았던 것처럼
환율처럼 보이도록 숫자를 포맷할 때 사용할 수 있습니다
이로써 여러분은 목표와 시작 프로젝트와
도우미 파일들을 얻었습니다
이제 여러분을 위한 제가 드리는 과제는
여러분이 배운 리액트 개념을 활용하여
이 Investment Calculator 웹 앱 을 만들도록 시도하는 것입니다
당연히 시간이 걸리더라도
포기하지 않아야 합니다
왜냐하면 결국 이것이 여러분이 완전히 스스로
작업해야 하는 첫 번째 연습이기 때문입니다
따라서 시간이 오래 걸리더라도
혹은 이것을 만들지 못하더라도
완전히 괜찮습니다
왜냐하면 연습의 다른 의미는
실패하고 배우고 그리고 더 나아지는 것이기 때문입니다
따라서 다음 강의를 시작하면서
저는 여러분과 이 웹 앱을 함께 만들 것입니다
저는 여러분에게 해결책을 안내해 드리겠습니다
그러나 또 강조하고 싶은 것은
저의 솔루션은 어디까지나 하나의 가능한 솔루션에 불과하고
당연히 유일한 솔루션이 아니라는 것입니다
따라서 저의 솔루션을 보기 전에
스스로 먼저 시도해 보아야 합니다