[올림픽 메달 집계 사이트] 회고록

프로젝트 개요🎬

이번 프로젝트는 올림픽 메달 집계 사이트로, 입력한 나라명과 메달을 보여주는 리스트로 구현했다.

사용자는 입력한 데이터를, 원하는 정렬기준에 맞게 볼 수 있다.

기술 스택🧷

• 프론트엔드 : React

개발과정🎈

아이디어 구상

• 리액트 기본지식을 바탕으로 데이터를 CRUD한 사이트를 구상하게 되었다.

구현

• 입력한 나라명, 메달갯수를 리스트로 보여줌
• 정렬을 사용자가 select하여 내림차순으로 리스트가 업데이트됨
• 작성한 리스트를 삭제 가능
• 위에 구현한 기능들을 로컬 스토리지에 관리하여 웹이 리랜더링되어도 동일하게 보여줄 수 있게 함

테스트 및 배포

• 리팩토링하다가 발견한 에러들 해결
• github에 배포

배운점🤖

• 기술적 성장: useState로 상태관리, useEffect로 생애주기 관리, 리액트의 기본적인 흐름을 이해
• 문제 해결: 블로그 프로젝트 일기 참고

후기✏️

사실 프로젝트 하기전까지 리액트를 배운게 기본적인 작동원리, 상태관리 훅인 useState뿐이였다.

그래서 프로젝트하면서 리액트 공식문서+묵혀놨던 인강 으로 참고했다

 

전에 프로젝트에서 submit기능을 제대로 못써서 이번에 form태그로 편하게 데이터를 전달!

submit한 데이터를 보여주는것까진 수월했다. 하지만 후에 리팩토링하면서 많이 고침ㅋ 

 

예를들어 입력안하면 alert보여주고 return하게 했는데 input태그에 required를 넣으면 끝이였다...

그리고 메달갯수는 최대 99개까지만 입력되는걸 if문을 엄청 써서 스크립트로 구현했는데 그냥 maxLength를 설정하고 짧게 코드를 적으면 되는거였다... 👇이러케..

const maxLengthCheck = (object) => {
    if (object.value.length > object.maxLength) {
      object.value = object.value.slice(0, object.maxLength);
    }
};

 

이번 프로젝트 하면서 제일 머리아팠던 부분은 함수전달vs함수호출 , 객체 속성접근 이였다...ㅠㅠㅠ

함수 전달 vs 함수 호출은 너무나 친절하게 리액트 공식문서에 설명이 되어있었다ㅎ,,,

https://ko.react.dev/learn/responding-to-events

 

다시 복습하자면,

밑에 handleClick이라는 함수가 있다.

function handleClick() {
  console.log("Button clicked");
}

위에 함수를 세가지 방법으로 호출할 수 있는데

<button onClick={handleClick}>Click me</button> // 클릭할때마다 콘솔에 출력
<button onClick={handleClick()}>Click me</button> // 페이지가 랜더링 되자마자 콘솔에 출력
<button onClick={() => handleClick()}>Click me</button> // 클릭할때마다 콘솔에 출력

위에서 handleClick이랑 () => handleClick()이랑 똑같이 클릭할때마다 출력이 되는데 차이는 

 

• handleClick
  • 함수 호출을 매번 새로 생성하지 않고 기존 함수 참조를 그대로 전달하므로 성능상 이점
• () => handleClick()
  • 렌더링할 때마다 새로운 함수가 생성되기 때문에 불필요한 성능 저하를 유발

그러면 handleClick이 좋네!

 

그리고 객체 속성 접근은 점 표기법과 대괄호 표기법이 있는데,

• 점 표기법
  • obj.key
  • obj라는 객체에서 key라는 이름의 속성을 찾는 방법
  • 속성 이름이 고정되어 있을 때 사용
• 대괄호 표기법
  • obj["key"]
  • obj라는 객체에서 key라는 이름의 속성을 찾는 방법으로, 키를 문자열로 주는 방법
  • 동적으로 속성 이름을 지정할 때 사용

나는 점표기법으로 접근하다가 계속 객체가 안불러져왔다....

const sortedItems = [...medalItems].sort((a, b) => {
      return b.selected - a.selected;
}); //💩

 

결국 나는 자바스크립트가 부족했던것이다... 근데 그렇다고 자바스크립트를 완벽하게 깊게 파기보다는, 그때그때 마다 부족한 부분을 내것으로 만드는게 좋을꺼같다!

💫완성된 모습💫

📌코드보러가기

GitHub - minji7901/olympics