민ズl으l 개발일ブl

프로젝트 개요🎬이번 프로젝트는 올림픽 메달 집계 사이트로, 입력한 나라명과 메달을 보여주는 리스트로 구현했다.사용자는 입력한 데이터를, 원하는 정렬기준에 맞게 볼 수 있다.기술 스택🧷프론트엔드 : React개발과정🎈아이디어 구상리액트 기본지식을 바탕으로 데이터를 CRUD한 사이트를 구상하게 되었다.구현입력한 나라명, 메달갯수를 리스트로 보여줌정렬을 사용자가 select하여 내림차순으로 리스트가 업데이트됨작성한 리스트를 삭제 가능위에 구현한 기능들을 로컬 스토리지에 관리하여 웹이 리랜더링되어도 동일하게 보여줄 수 있게 함테스트 및 배포리팩토링하다가 발견한 에러들 해결github에 배포배운점🤖기술적 성장: useState로 상태관리, useEffect로 생애주기 관리, 리액트의 기본적인 흐름을 이해문..

1. 정렬현재는 금메달갯수를 기준으로 정렬했는데, 사용자가 select태그의 option을 클릭한 값에 따라 정렬가능하게 구현하게씀!먼저 구조부터 짰는데 이때 리액트에서 예상치 못한 오류가! gold ... option태그에 selected를 넣으면 아래와 같이 오류가 뜬다👻오류내용에 해답이 있듯이 `defaultValue` or `value`을 쓰면 됨!그래서 defaultValue로 바꾸면 에러해결💫 1-1. 정렬할 필터값들을 배열로 저장한다음 map으로 뿌리기const filterList = ["gold", "silver", "bronze", "total"]; {filterList.map((item, i) => ( {item} ))} 1-2. 그리고 선택..

이번 프로젝트는 드디어 리액트로! 익숙하던 CRA대신 vite로 셋팅👀1. 입력창먼저 입력하는 부분을 map으로 돌리기!const formArrName = ["country", "gold", "silver", "bronze"];return ( ... {formArrName.map((name, i) => ( {name} ))} ) 2. 입력한 데이터 뿌리기그리고 입력한 데이터를 담을 useState 하나,데이터들을 저장할 useState 하나 만든후const [inputValues, setInputValues] = useState({ // 입력한 데이터를 담음 country: "", ..