Age of Discovery

{ let player1 = [...player] player1.sort((a, b) => a.name.toLowerCase() '가나다순' 이런식으로 가나다순 정렬기능을 담은 버튼을 생성했다. 하지만 일회성이었고 다시 원래대로 되돌리는 버튼을 만들고 싶었다 한마디로 토글버튼을 원했다 구글링을 동반해 이런저런 시도를 해봤지만 애당초 State변경함수는 데이터의 배열자체를 바꿔주기 때문에 그 전으로 되돌리는 기능은 찾기 어려웠다.. 꽤 오랜시간 고민끝에 삼항연산자를 이용해 각 data의 고유 id를 정렬하는방식이 낫겠다 싶었다. { let player_1 = [...player]; let player_2 ..

축구선수를 쇼핑하는 페이지 구성을 완료했다. 가장 먼저 가나다순으로 정렬하는 버튼을 만들어보자 let [player, setplayer] = useState(data); { let player1 = [...player] player1.sort((a, b) => a.name.toLowerCase() '가나다순' 버튼을 생성한 후 onClick함수를 붙여주고 player 데이터의 스프레드연산자를 player1 변수로 저장해준다 (원본을 해치지 않고 재활용하기 위함) 그리고 player1을 sort 내장함수로 정렬해준다 정렬 기준은 data의 선수들 name이다. data가 가나다순으로 정렬됐다 근데 맘에 안..

축구선수를 장바구니에 담는 쇼핑몰을 만들어보자 우선 서버와 DB는 다룰줄 모르기 때문에 (node.js 후딱 배워야겠네) 데이터는 객체로 구성된 배열을 자바스크립트 파일에 저장 해두었다 이 데이터를 자유자재로 다룰 수 있어야 다음에 서버와 연동했을 때도 수월하게 작업할 수 있을 것이다 그동안 수강했던 코딩애플 센세의 강의를 토대로 내가 재밌게 즐길만한 쇼핑몰을 만들어보자 let data = [ { id : 0, name : 'Mohamed Salah', age : '1992년 6월 15일', position : 'Right-wing' }, { id : 1, name : 'Sadio Mane', age : '1992년 4월 10일', position : 'False-nine' }, { id : 2, nam..

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 역시나 마찬가지로 리스트로 사용할 state를 작성한 후 이번엔 input text박스에 글을 입력했을 시 배열을 추가해서 리스트 맨앞에 생성되게 해보자 { let input_text = document.querySelector('.input-text'); if (input_..

let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 전 게시글과 마찬가지로 State를 4개 생성한 후 list로 작성하여 화면에 띄워주고 props파라미터를 넣어 Modal창을 만든 후 띄워줬다 리스트의 각 타이틀을 클릭했을 때 모달창의 상세정보도 클릭한 선수들의 내용으로 변경하고싶다 지금은 변경이 안된다. 조작해보자! le..