이제 본격적으로 이 프로젝트 작업을 시작해 봅시다
이 음식 주문 앱을 함께 만들어 보겠습니다
일단은 프로젝트 초기 구성을 열겠습니다
지난 강의에 첨부해 둔 파일입니다
이제 작업을 시작함에 있어서
스스로에게 질문을 해야 합니다
어떤 작업을 먼저 시작해야 할까요?
일반적으로는 이것에 대한 대답은
개발자가 정하는 대로
프로젝트를 시작하면 된다 입니다
제 경우에는
핵심 컴포넌트와
핵심 UI 작업을 먼저 한 후에
추가적인 기능을 더합니다
만약 이 작업이 완전히 새로운 프로젝트이고
제가 이전 강의에서 보여드린 대로
최종 결과를 미리 본 적이 없다면
제 시작점은 물론
어떤 컴포넌트를 쓸지
미리 구상하고 계획하는 작업입니다
하지만 이미 이전 강의에서 보셨듯이
최종 프로젝트의 모양을 보았으니
그 결과물대로 프로젝트를 구상하여
시작점으로 삼겠습니다
여기에 프로젝트의 완성본이 있습니다
여기에서는 보시다시피
음식이 있는 영역이 있습니다
각각의 다양한 메뉴가
백엔드로부터 업로드되어 있습니다
이 부분은 저번 시간에 과제를 설명하면서 말씀드렸습니다
페이지 위쪽에는 기본적인 헤더(header)가 있습니다
장바구니(Cart) 버튼이 있어서
클릭하면 장바구니 창이 뜹니다
이 창은 모달 창인데
이 모달 창에서
장바구니에 담은 품목을 볼 수 있습니다
항목 수정도 가능합니다
그 후에 결제창(Checkout)으로 이동할 수 있습니다
물론 장바구니에 품목이 있을 경우입니다
여기에는 결제 양식이 있습니다
페이지 구성은 이 정도입니다
물론 이 구성을 보면
컴포넌트가 여러 개 필요합니다
그러므로 제가 제안하는 것은
헤더를 추가하는 것부터 시작하는 것입니다
간단한 것부터 하겠습니다
컴포넌트를 하나 생성하겠습니다
즉 헤더를 추가하는 것입니다
그 다음 단계로는
음식 품목을 작업하겠습니다
이 각각의 품목을 업로드하고
화면에 띄우도록 하는 작업입니다
이 작업 다음에는
장바구니 기능을 작업하고
또 결제 작업을 하겠습니다
물론 이 방식 외에도 다른 접근이 가능하지만
이 순서가 제가 선택한 작업방식입니다
순서대로 먼저 소스 폴더(src)에
컴포넌트 폴더(components)를 만들겠습니다
그 안에 헤더 파일(Header.jsx)을 만들고
여기에서 헤더 컴포넌트 작업을 하겠습니다
프로젝트 작업을 할 때에는
이렇게 간단한 컴포넌트부터 시작하는 것이 좋습니다
이렇게 하면 작업 도중에 좀 더 빨리
작은 성취감을 느낄 수 있기 때문입니다
여기서 먼저는
헤더(header)라는 컴포넌트 함수를 내보내겠습니다
이 컴포넌트 함수는
지금 이 시점에서는
복잡한 로직이나 상태를
필요로 하지 않습니다
대신에 JSX 코드만 반환하도록 하겠습니다
반환할 것은 헤더 요소입니다
이미 시스템에 있는 헤더 요소입니다
이 안에는 div를 하나 추가해서
이 안에 이미지 하나와
h1 제목을 하나 추가하겠습니다
이 div 아래에는
요소를 하나 더 추가하겠습니다
예를 들면 p 태그 요소나
nav 요소를 사용하여
이 안에 버튼을 하나 만드는 것입니다
이 버튼이 바로 장바구니 버튼입니다
나중에는 장바구니에 있는 품목의 숫자 또한
버튼 옆에 표시하겠습니다
물론 이 숫자는 동적이어야 하겠지만
지금 시점에서는
하드코딩(고정된 값의 코딩)으로 숫자 0을 쓰겠습니다
헤더 작업에 더 필요한 것이 있습니다
index.css로 가 보겠습니다
이것 또한 제가 만들어 둔 것입니다
여기에서는
컴포넌트나 요소를 빌드하는 데에
유용한 도움을 얻을 수 있습니다
여기에는 CSS 규칙을 몇 개 작성해 두었습니다
이것은 main-header라는 ID를 가진 요소를 위한 형식입니다
여기서는 중첩 요소를 찾는데
이 제목 ID를 가지고 있어야 합니다
이 규칙을 잘 보시면
이미지도 사용이 가능합니다
물론 이 규칙이나 이쪽의 규칙들 모두
현재 구축하고 있는 헤더에 대한 내용입니다
그러므로 여기 헤더 요소에 ID 속성(prop)을 추가하고
이름을 main-header로 하겠습니다
이렇게 하면 index.css에 저장된
형식을 모두 불러와서
헤더에 적용할 수 있습니다
이 div에는
제목(title) ID를 추가하겠습니다
이제 이 규칙이
제목의 이미지를 지정할 때 적용됩니다
이제 이것으로 기본 형식을 갖췄습니다
제목으로 할 내용은
리액트푸드(ReactFood)입니다
물론 여러분이 임의로
이 가상의 음식점 이름을 지으셔도 됩니다
이미지 란에는 로고를 넣겠습니다
로고 파일 또한 여기 포함되어 있습니다
Header.jsx로
로고 이미지를 한 단계 위에서 가져오겠습니다
위치는 assets 폴더이고
logo.png를 찾아옵니다
이전 강의에서 이미 언급했듯
가져온 이미지의 출처(src)를 통해
최적화된 이미지 파일에 대한 경로를 설정하고
대체 텍스트(alt text)로는
식당이라고 적어서
이미지 내용을 설명하겠습니다
이제 기본 헤더 컴포넌트 작업이 완료되었습니다
이제 이 헤더 컴포넌트를
앱 컴포넌트에서 사용할 수 있는데
이것이 루트(root) 컴포넌트이기 때문입니다
대부분의 리액트 프로젝트에서도 동일합니다
여기에는 h1 요소에 있는
임의로 넣은 내용을 모두 삭제하고
아까 만든 커스텀 헤더 컴포넌트를 반환하겠습니다
이 헤더는 Header.jsx에서 가져오면 됩니다
이것으로 작업이 끝났습니다
첫 컴포넌트 작성을 완료했습니다
이제 개발 웹사이트로 가서
미리보기를 해 보면
이런 화면을 보실 것입니다
아직 그렇게 멋지진 않습니다
예를 들어 이 버튼 형식이 조금 이상하고
음식 품목이 하나도 없습니다만
첫 단추를 잘 끼웠습니다