프로젝트 5

"팀소개 사이트" 프로젝트 KDT 회고

keep _ 좋았던 부분. 지속하고 싶은 부분 😃 의사소통을 중요하게 생각한 부분 😃 비대면으로 진행되는 부트캠프 이지만, 최대한 의사소통에 주의를 기울이고 소통하려고 서로 노력했던 점이 정말 좋았다. 😃 현재 작업과정의 "진척도" 와 "문제 상황" 들을 정말 활발히 공유했던 부분 😃 현재 작업과정이 얼마나 진행되었는지, 현재 우리 팀원이 무엇을 하고 있는지 계속해서 체크하고, 만약 문제가 발생했을 경우, 화면공유를 통해 함께 코드를 살펴보고, 원인을 분석하고, 검색해 보며 함께 고민 했던 부분 또한 좋았다. 또한 해당 문제를 해결한 방법도 함께 공유하고, 참고한 블로그와 사이트들을 링크로 정말 활발히 주고받았다. 😃 서로 알고있는 좋은 정보나 지식들을 함께 공유하고 알려준 부분 😃 자신이 알고있는 좋은..

프로젝트 2023.10.12

상품 드래그 해서 장바구니에 넣으면 상품카드 담기기.

dragstar, dragover, drop 이벤트 리스너 사용해서 하면 되는데, 여기서 제일 중요한건, 내가 누른 그것에 해당하는 object를 가져올 수 있는가 이다. 제일 간편하게 할 수 있는 방법은 내가 누른 그것에 상품 id값을 부여해 주는것. 그러면 형제요소 부모요소 이런거 찾을 필요 없음 어떻게 하냐면 data- 이름 기능을 사용해서 .dataset.이름 으로 정보 불러오는 거다. 그래서 불러온 그 아이디 값을 몰래 저장할 수 있다. 바로 .dataTransfer.setData('이름', 저장하려는 데이터) 이렇게. 근데 드래그 앤 드롭 이벤트 에서 이거 사용하려면 e.originalEvent 뒤에 써야함 ㅋㅋㅋ 그래야 원본 객체 가져와서 정보 활용함. 무튼 이렇게 셋팅 한 뒤에 넣을 데이터..

프로젝트 2023.08.31

버튼 누르면 정보 가져와서 장바구니에 담기.

상품의 id값 쉽게 가져오기 data-이름 속성 을 사용해 각 상품의 구매 버튼에 data-id 값을 넣어준다. 그리고 click이벤트가 일어나면, e.target.dataset.id 이런식으로 내가 누른 그것에 대한 data-id 정보를 가져온다. 이떄 click 이벤트 리스너 에는 파라미터 e 넣어주는거 잊지 말것. 카트에 지금 누른 그 상품 있는지 없는지 확인 아무것도 누르지 않았다면 cart는 지금 빈 상태인데, cart.findIndex()로 조건에 부합하는 최초의 인덱스 값을 찾아낸다. 그리고 만약 그 값이 없다면 -1을 리턴하니깐, -1이 나온다면 지금 누른 그 상품이 카트에 아직 없다는 말임. 그러니까 cart에 넣어주어야 한다. 없다면 카트에 넣자 이때는 전체상품.find()를 이용해서 ..

프로젝트 2023.08.31

코드의 작동 순서 고려하자. $.get().then() 안에서 click이벤트와 drag/drop 이벤트 작성해야 하는 이유.

click이벤트와 drag/drop 이벤트가 발생할때 일어날 일들을 코드로 짯던 상황. 데이터를 불러와서 모든 정보는 전역변수로 저장했으니 당연히 $.get().then(여기에서 빠져 나와도 되는줄 알았다.) 아니 근데 작동 안됨.... ㅎ 당연한 결과였다. ㅋㅋㅋㅋ 이유 : 데이터를 불러오기 전에 이벤트 핸들러는 등록됨. 그러니 append한 데이터가 애초에 없음. 코드가 없는데 거기에 이벤트 핸들러 달은 꼴 ㅎ

프로젝트 2023.08.31

온라인 쇼핑몰 만들기 __데이터 불러오기.

온라인 쇼핑몰 만들기 토이프로젝트 1. 일단 데이터를 불러오는 것 자체가 달랐다.. 나는 for문을 이용해서 데이터의 항목 하나하나를 변수 선언후 담아주었다. 그리고 가져온 데이터 이용해 카드 만들어 append()😂 그렇지만 더 좋은 방법이 있었다.. 바로 forEach()👶 data의 요소 하나하나 꺼내서 바로 append()👶 엥?? 그럼 계속 데이터 활용해야하는데?? 싶었는데, 제일 위에 전역변수를 선언한 슨상님........👀 가져온 데이터 전체를 하나의 전역변수에 넣어두고, 장바구니에 넣은 상품을 담을 또하나의 전역변수를 설정한것... 기억하자 불러온 데이터 자주 쓰일것 같으면 꼭 전역변수 선언해두고, 데이터 불러오면 그 변수에 넣어두기.🫡

프로젝트 2023.08.31