[React project] EP01. 가장 먹고 싶은 디저트 16강 웹 프로젝트를 시작하다

PROJECT/개발일지

[React project] EP01. 가장 먹고 싶은 디저트 16강 웹 프로젝트를 시작하다

Ray123 2022. 2. 10. 23:37

PC방 알바하던 중이었다. 잠깐 시간이 비어서 카운터 컴퓨터로 유튜브를 켰는데 알고리즘으로 침착맨의 "가장 쉽게 질리는 음식 16강"이란 제목의 영상이 떴다. 영상을 보다가 "나도 한 번 16강 웹사이트를 만들어볼까?"라는 생각으로 시작하게 됐다.

어떤 식으로 할 건지 구상해봤다.

우선 처음 시작하면 16개의 아이템들이 랜덤하게 섞이고, 2개씩 사용자 화면에 출력된다. 사용자가 선택한 음식들은 별도의 배열에 담기고, 16개의 아이템에 대해 모두 셀렉이 끝나면 8강을 진행. 이후 4강 진행, 결승.

난이도가 있는 프로젝트는 아니라고 생각되지만, 강의 실습이 아니라 처음으로 스스로 하는 프로젝트가 될 것 같다. 작년 멋사에서 Django로 플젝할 때와는 다른 설렘이 생기는 듯. 역시 강의들으며 실습보단 스스로 뭔가 만드는 게 더 재밌는 건가 싶다 ㅋㅋ

일단 이 플젝은 내가 리액트로 처음 하는 개인 플젝이므로, 이 플젝으로 얻고 싶은 소소한 목표는 다음과 같다.

1. 기본적인 컴포넌트 다루는 법 익히기

: 강의 실습이 아니라 내가 스스로 만들면서 하는 거니까 컴포넌트의 개념이 좀 더 와닿지 않을까 생각한다.

2. json파일 다루기

: 대부분의 웹사이트는 json배열 등을 가공하고 출력하고 뭐 그런다고 한다. 강의에서는 API로 데이터를 받아오기 전에 mock데이터(샘플로 쓸 데이터를 mock데이터라고 부른다고 하더라)를 만들어서 쓰던데, 나도 이 플젝을 통해 json파일 등을 다루는 데 좀 익숙해지면 좋겠다. 작년에 Django로 해커톤할때도 json을 다루는 일이 종종 있었기 때문..

3. API로 데이터를 받아오는 것 이해하기

: 사실 js를 공부하고 리액트를 시작한게 아니라 리액트와 js를 병행하면서 그 때 그 때 모르는 걸 찾아보는 식으로 하기 때문에 fetch, async, await, premise? 이런 거 잘 모른다. 이 플젝을 하면서 이런 게 뭔지 이해하자. 일단 처음엔 나도 mock.json만들고 다루다가 좀 가닥이 잡히면 API로 데이터 받아와보는 식으로 해야겠다.

# 일단 mock.json만들자!

일단 샘플 데이터들이 있는 mock.json을 만들기로 했다. 근데 시작부터 나름 큰 난관에 봉착.

"도대체 어떤 16강 월드컵을 만들지?"

킹받는 롤 챔피언 16강 만들까? 이런 거 고민하다가 카페에서 하던 중이라 그런지 갑자기 가장 먹고 싶은 디저트 16강으로 정했다.ㅋㅋㅋㅋㅋ

나름 샘플 만드는 과정도 재밌었다. 디저트를 뭘로 하지?부터 이미지는 다운받아서 로컬에 넣을까 하다가 그냥 구글에 검색해서 이미지 주소 복사해서 쓰기로 했다. 근데 이거 저작권에 문제 생기나..? 문제 생기면 프로젝트 폐기 이런건가..

mock.json은 다음과 같이 만들어졌다.

배열 형태고 각 원소?들은 id, name, imgUrl속성?을 갖도록. 이제 이 놈을 App.js에서 다음과 같이 임포트했다

import mock from "../mock.json";

리액트는 import를 활용해 모듈이나 파일을 추가하듯이 이미지를 추가할 수 있다. 리액트에서 로컬에 있는 이미지 등을 다룰 땐 저렇게 임포트해서 경로를 쓰는게 더 낫다 카더라. 아니면 오류가 난다꼬..json도 저렇게 import하면 mock이란 이름으로 쓸 수 있다.

이제 이 놈들을 시험 삼아서 화면에 띄워보기로 했다. 배열의 map메소드를 활용하면 배열의 각 아이템들에 대한 가공?이 가능하고, 이 map메소드 안에서 JSX요소를 리턴하면 마치 여러 개의 JSX요소를 추가한 것처럼 동작한다. App에서 다음과 같이 map메소드를 쓰면서 DessertItem 컴포넌트를 만들도록? 했다.

function App(){
    return(
        <div>
            {mock.map((dessert) => {
                return(
                    <li key={dessert.id}>
                        <DessertItem item={dessert}/>
                    </li>
                )
            })}
        </div>
    )
}

아! 그리고 리액트에서 배열을 다룰 때는 저렇게 원소들에 key속성을 넣어줘야 하고, 속성값으로는 각 요소를 구분지을 수 있는 값을 넣어야 한다. 공식 문서에 따르면 key는 리액트가 어떤 항목을 추가, 변경, 또는 삭제할지 식별하는 것을 돕는다고 함. 따라서 배열의 인덱스를 key로 쓰는 멍청한 짓은 하면 안 됨. 배열 요소들의 순서가 바뀔 수도 있으니까 인덱스는 고유한 값이 아니기 때문!

암튼 DessertItem는 다음과 같이 작성해 디저트 사진과 이름을 볼 수 있도록 했다.

function DessertItem({item}){
    return(
        <div>
            <h3>{item.name}</h3>
            <img src={item.imgUrl} alt="디저트 사진" />
        </div>
    )
}

이제 출력된 모습!

별 거 안했지만 그래도 혼자 해봤다는 게 조금 뿌듯..뿌듯할 레벨은 아니지만 ㅎㅎ..

암튼 이제 시작이다! 잘 만들어보자