GABOJOK 개린D

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

내가 원하는 정보를 추가하거나 가져올 수 있다. 아래처럼 사용해서 속성 추가하면 됨. data-제목 = 데이터내용 이렇게. data-name, data-age, data-country는 data- 접두사로 시작하는 사용자 정의 데이터 속성 .dataset을 사용하여 이러한 데이터를 가져오는거 값 수정도 가능하다. .dataset을 사용함으로 여러 데이터들에 일련의 번호를 부여할 수 있고, 그걸 이용해 원하는 정보를 손쉽게 가져올 수 있다. (e.target의 부모요소 찾고, 그것을 복사해서 조작하고 이렇게 복잡하게 안해도 됨. )

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

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

confirm() confirm("질문을 입력하세요") alert 같은 작은 모달창 띄우는데 "확인", "취소" 버튼이 있다. "확인' 버튼을 누르면 true 를 리턴함 "취소" 버튼을 누르면 false를 리턴함. Esc를 누르면 false를 리턴함. 사용예시 let isBoss = confirm("당신이 주인인가요?"); alert( isBoss );

prompt() prompt("보여줄 텍스트를 입력하세요", [초기값]) alert와 같은 작은 모달창을 띄우며 alert와 매우 비슷하지만 다른점은 input란이 존재하며, "취소" 버튼과 "확인" 버튼이 존재한다. prompt의 두번째 파라미터는 입력 해도 되고 안해도 되는 값이다. 보통 입력해도 되고 안해도 되는 파라미터를 [ ] 에 넣어준다. prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환합니다. prompt 대화상자의 입력칸에 원하는 값을 입력후 확인. 값을 입력하길 원하지 않는 경우는 취소(Cancel) 버튼을 누르거나 Esc를 눌러 대화상자를 빠져나가면 됩니다. 사용자가 입력을 취소한 경우는 null이 반환됩니다. let age = prompt('나이를 입력해주세요.', 100..

let 재할당이 가능하다. let a = 2; a=6; 재선언은 불가하다. let a = 2; let a = 6; 변수가 동작하는 범위는 모든 {} 안이다. for나 if 등등 "블록스코프" 를 가지고 있다. 괄호 밖에서 선언한 변수명과 동일하게 괄호 안에서 선언할 경우, 재할당이 되지 않고, 서로 다른 변수로 취급한다. 괄호 밖은 전역변수로, 괄호 안은 지역변수로. const 변하지 않는 값(상수)를 넣을때 많이 쓴다. 재할당이 불가하다 재선언도 불가하다. 변수가 동작하는 범위는 모든 {} 안이다. for나 if 등등 const를 이용해 대문자로 변수명을 설정하는건 주로 하드코딩 값의 별칭을 만들때 사용한다. COLOR_ORANGE는 "#FF7F00"보다 기억하기가 훨씬 쉽다 + const people..

변수명의 규칙 오직 문자, 숫자만 사용할 수 있다. 기호는 $ 와 _ 만 사용이 가능하다. let, class, return, function과 같은 예약어 목록에 있는 단어들은 변수명으로 사용이 불가하다. 변수의 선언 let 을 이용해 변수를 선언하고 할당하는것이 일반적이다. ES5 이전에는 let 없이도 변수가 생성되었다. num = 5; 라고 단순 할당만 했을 뿐인데 자동으로 변수를 생성시켰다. 그러나 use strict(엄격모드 실행)을 하면 에러 발생. 변수 선언시 주의하자 1. 최대한 서술적이고 간결한 이름으로 선언하자. 2. 변수명을 보고 무엇을 의미하는지 바로 알수 있어야 한다. 3. 회사나 소속 팀의 규칙을 따르자. 4. 변수를 재사용 하면 디버깅에 많이 시간을 쓰게 됨으로, 변수를 추가..

메모리는 0과 1을 저장할 수 있는 칸, 그리고 그 칸의 주소를 가지고 있는데, 어디 주소에 어떤 데이터가 있는지 알아야 접근 할 수 있다. 우리는 "변수"를 이용해 데이터를 손쉽게 불러오고 처리 하는 등 아주 편리하게 사용 할 수 있다. 그런데 이 변수는 도대체 어떻게 동작하는 걸까? 일단 메모리에 대한 이해가 필요하다. 메모리에는 변수 영역, 데이터 영역이 존재한다. 변수의 선언 let apple; 이 변수 영역에 빈공간을 확보해서 식별자를 저장한다. 즉 변수명을 변수영역 메모리 중 빈공간에 집어넣는다는 말이다. 변수의 할당 apple = '사과'; 일단 컴퓨터는 "사과" 라는 문자에 대한 정보가 없다. 우리는 컴퓨터의 메모리 공간에 저 데이터를 넣어주어야 컴퓨터가 일을 한다. 데이터 영역에 빈공간을..

이게 뭐임? ES5 가 나오면서 생김 원래 자바스크립트는 기존에 기능들을 변경하지 않고, 추가만 해왔음. 그래서 기존 코드가 오류 발생하지 않았음. ES5 가 나오면서 새로운 기능 추가 및 기능 중 일부 변경되었는데 그럼 호환성 문제가 생기게 된다. 호환성 문제를 줄이기 위해 변경된 사항들 대부분은 ES5 기본모드에서 비활성화 상태로 이용하도록 설계되었다. 이거 어떻게 씀? 활성화 하기 위해서 use strict 라는 지시자를 이용한다. 변경된 기능 사용하겠다는 말. 우린 이걸 strict mode 실행한다 고 한다. . 보통 스크립트 최상단에 위치하지만, 가끔 함수 본문 맨 앞에 위치하는 경우도 있따. (그럼 해당 함수만 strict mode 로 됨.) 왠만하면 스크립트 최상단에 위치해야 한다! 이거 ..