[Olympic PJ_Final] 올림픽 메달 개수 트래커 만들기

🏅올림픽 메달 개수 트래커 메인 화면 및 작동 영상

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

ℹ️프로젝트 정보

✔️ 기간 : 2025년 1월 21일 ~ 1월 24일

✔️기술스택 : React, Vite

---

목표 및 구현한 기능

✅ Vite로 리액트 프로젝트를 셋업

✅ 나라 이름과 금, 은, 동 메달 수를 입력할 수 있는 폼 작성

✅ 폼 제출 버튼을 눌렀을 때 새로운 나라와 메달 수가 추가

✅ 제출 후 모든 입력 필드는 빈 값으로 초기화

✅ CRUD(Create, Read, Update, Delete) 기능

✅ Create: 폼 제출 시 새로운 나라와 해당 메달 수를 리스트에 추가

✅ Read: 화면에 국가별 메달 집계를 리스트 형태로 출력

✅ Update: 이미 추가된 국가의 메달 수를 수정할 수 있는 기능

✅ Delete: 리스트에 표시된 나라 옆에 삭제 버튼을 추가하여, 해당 국가 정보를 삭제

✅ 화면 전체의 레이아웃을 설정하여 정돈된 UI

✅ 기능별로 컴포넌트를 분리하여 코드의 가독성과 재사용성을 높이기

 

☑️ 메달 집계 정렬

☑️ 로컬 스토리지 활용

---

페이지 소개

🏅메인페이지

 

module.css를 활용하여 className을 지정한 UI 구현하였습니다.

 

초기값은 순서대로 공란, 0, 0, 0 으로 지정하였습니다.

또한 메달의 수는 음수일 수 없으므로 최소값을 0으로 설정하였습니다.

 

 

 

🏅국가 추가 및 삭제

input에 값을 입력합니다.

'국가 추가' 버튼을 눌러 입력 값을 추가합니다.

'삭제' 버튼을 눌러 입력한 값을 각각 삭제할 수 있습니다.

삭제 버튼을 누르면 다음과 같은 안내창이 뜹니다.

 

 

🏅중복되는 값 찾기

이미 추가된 리스트와 같은 국가명의 정보를 추가할 시, 안내창이 뜨며 추가가 불가능합니다.

 

 

🏅업데이트

새롭게 입력한 메달 정보가 이미 리스트에 추가되어 있다면 '업데이트' 버튼을 통해 값을 수정할 수 있습니다.

 

 

🏅사용자 편의 - 입력값 초기화, 값 입력, 이미 등록, 정말 삭제

 

• 값을 입력한 후 버튼을 누르면 해당 동작과 함께 입력값은 항상 초기화됩니다.

 

• 아무런 값도 입력되지 않았을 때 안내창을 띄워줍니다.

 

• 삭제버튼을 누르면 한 번 더 안내창을 띄워 사용자가 삭제를 확인합니다.

 

• 중복되는 국가명을 추가할 시 안내창이 뜨며 값은 추가되지 않습니다.

 

---

트러블 슈팅

📌과제 시작 접근법

• 주어진 요구사항에서 눈에 보이는 요소들 먼저 뼈대 만들기
• 컴포넌트 분리화 하기 (미리 머리 속으로 구상해도 좋다.)
• 동적으로 변동되는 부분 파악하여 useState 만들기

📌useState에 대해 파악하기

• 리액트에서 useState의 기능과 state의 중요성 공부하기
  'useState() 를 왜 쓸까?' 정리 글

📌내가 설정한 useState에 대해 정확히 정리하기

• 리액트는 동적인 부분에 대해
  자바스크립트에서 썼던 document.querySelector 와 다른 방식으로 접근하기 때문에
  내가 설정한 state가 무엇인지, 어떤 값을 담고 있는지 정확히 정리하기

📌컴포넌트 분리하기

• 컴포넌트 분리 기준은 개발자마다 다양하지만
  구조적, 기능적으로 한눈에 보기 쉽도록 깔끔한 정리가 필요하기 때문에
  프로젝트의 전체적인 그림을 구상하기
  
  
• 부모 컴포넌트로 어떤 state를 끌어올릴지 생각하고
  그 state가 어느 자식요소에서 사용되는지 파악하기

📌업데이트 기능 구현 (find & map)

• 이미 추가된 리스트에서 사용자가 입력한 정보의 국가명(name)과 동일한 데이터를 찾아 객체로 출력하기 - find 메소드
• find를 통해 출력된 객체와 동일한 리스트를 찾아 사용자가 새롭게 입력한 정보로 바꾼 배열을 출력하기 - map 메소드
• map을 통해 바꾼 배열을, 리스트에 추가하는 setState 함수 (setNationList)에 넣기

📌입력 정보의 id값 확인하기 - 렌더링 이슈

• 업데이트 기능 구현 시, map에서 return한 새로운 형식의 배열을 콘솔창에 찍어보면 id: 1이다.
  그 이유는 입력창 초기값의 id를 1로 지정해두었기 때문이다.
  콘솔창에는 warning이라고 뜨지만 이를 그냥 지나가게 되면 결국 업데이트한 데이터들의 id가 모두 1로 동일하게 된다.
  
  이 현상이 위험한 이유는, 리액트는 동적으로 바꿔야 하는 정보를 인식할 때 id로 데이터들을 구분한다.
  이때 모든 id의 값이 같다면 바뀐 정보를 찾기 위해 렌더링 시간이 길어지게 된다.
  (튜터님의 설명을 빌리자면 : 식당에서 주문을 했는데 주문 번호가 안 뜨는 경우. 짜장면 시키신 분~)
  따라서 Date.now() 를 활용하여 변동된 데이터에는 unique하고 고유한 id가 필요하다.

📌중복 국가 기능 구현 (some)

• 사용자의 입력값과 리스트의 정보를 비교한다는 점에서 업데이트와 구현이 비슷하지만,
  업데이트와 동일하게 find를 사용하게 되면 새롭게 객체가 출력된다.
  중복 국가를 찾아내는 것에서는 단지 '둘의 값이 같냐?' 는 if문의 조건만 필요하기 때문에
  조건 만족 여부만 판단할 때 간결하게 사용 가능한 some 을 활용하는 것이 적합하다.

---

마치며

프론트엔드의 주특기인 리액트.
기초를 이틀만에 배우고 4일 정도 걸려 프로젝트를 완성하였다.

금방 구현하는 분들과는 다르게(물론 그분들이 고생하지 않으셨다는 것은 아닙니다.)
이해도 어렵고 너무나도 복잡해서 머리가 터질 것만 같았던 4일이었다.

단 4줄의 코딩 때문에 고생도 해보고 속상한 마음도 들었지만,

같은 내용을 배우는 누구라도 처음에는 고생했을 거라는 걸 알고 있다!

그렇기 때문에 좌절하지 않고 반복 복습하며 공부다운 공부를 해야겠다고 참 많은 생각을 했다.

비록 아직은 느리고 버벅대지만 처음 시작보다 더 나아진 내 모습을 바라보며 앞으로의 나를 기대한다!!