11월 5일 공부일지

오늘 공부에 투자한 순수한 시간:  3시간

학습한 개념 JS
1. 필터를 누르면 조건에 맞는 카드만 보이게하기
JSsms Html,css와 성격이 다르다. 무엇을 어떻게 보여줄지 였다면, js는 순서대로 실행 되는 명령어입니다.

console = 조작대, 제어판
js가 보내는 메시지 확인 : console.log로 출력한 값
에러확인은 js코드가 틀리면 빨간 글씨로 표시됨.

console. log(“안녕”)
콘솔에게 기록해라 (이내용을)

log=기록(일지). 항해일지를 log라고 부르는 것과 같습니다.

2.변수 const

예시
Const region = “서울”;

Console. log(region);

• const = 상자를 만든다는 선언
  const=sonstant(변하지않는, 상수)의 줄임말. 한번 담은 값을 다른 값으로 바꿀수없음
  (반대되는 용어가 let 바꿀일이 있을때만)
  * const 상자는 같은이름으론 또 만들면 안됨. 한번 만들면 끝.
  
  

• Region = 지역 (지은이름)

• = 오른쪽 값을 왼쪽 상자에 담아라

• “서울” = 글자는 따옴표로 감쌈. 따옴표 없이 이름을 쓰면 이름자체가 아니라 상자 안의 값이 출력됨 . 예를 들어 console.log(region)
  따옴표 = 글자 그대로다
  따옴표없음 = 이건 상자이름이다, 열어봐
  
  
  

3.html요소 찾기

Js가 화면을 바꾸려면 먼저 html요소를 찾아서 상자에 담아야한다.

const regionSelect = document.querySelector(“#region”);
상자를 만든다 이름은regionSelect, 담아라 html문서에서 찾아라 id(#)이 region인것.
console.log(regionSelect);
콘솔에 보여줘라, regionSelect 상자 안에 든것을

4.이벤트
이벤트= 사용자가 한 행동(클릭, 선택변경 입력 등)
이 이벤트가 일어나면 이걸 해라를 정해두는 코드

regionSelect.addEventListener("change", function () { console.log("지역이 바뀌었다");
regionSelect상자에 귀를 달아라(바뀌면, 안의 명령을 실행해라. 지역이 바뀌었다라고 콘솔에 보여줘라

5. 선택한 값 일기
바뀌었다 만으로는 부족하고, 무엇으로 바뀌었는지 보이게 수정
(regionBox.value = regionBox) 상자에 든 드롭다운의 현재 선택 값

*주의 괄호안의 regionBox에 따옴표를 넣으면 그대로 출력됨.
따옴표가 없어야지 상자를 열어서 값 출력.

6. 카드 전부 찾기
querySelector 맞는 것 중 첫 번째 1개만
auery(묻다,조회하다)+ selector(선택자)

querySelectorAll 맞는것 전부

7. 카드 하나씩 꺼내보기
카드 상자에 카드 3개가 현재 있음
필터를 하려면 하나씩 꺼내서 확인해야됨.
cards.forEach(function (card) {
      console.log(card.dataset.region);
});

묶음에서 하나씩 반복해라 괄호 안 카드를
그 카드의 값을 보여줘라

- forEach = 각각에 대하여 , 하나씩반복해라
(출석체크 생각하면됨. 명령어 하나로 모든학생이름을 호명하듯 이 한줄로 카드를 다 확인하는)
-card= 지금 꺼낸 카드 하나(지은 이름임)
- card.dataset.region = 그 카드의 data-region 값

- function= 기능, 함수

8. 카드 숨기기
js로 css를 바꿀 수 있다. (카드를 숨기는 방법)

css에서 배운 display속성이다. None이면 화면에서 사라짐.

card. style.display = “none”;
카드의 css display를 없음으로 (반댓말 block)

9. 조건문 if
if : 만약~라면. Else : 그렇지 않으면
if(조건) { }
조건이 맞을때 할일
else {}
조건이 틀릴 때 할일

=== 같은지 비교할때 쓰는 용어
card.dataset.region === regionBox.value
카드의 지역값이 같은가? 지역드롭다운 선택 값이

10. 전체처리
“전체”를 고르면 카드가 전부 사라져있는데 그부분을 수정

전체의 드롭다운 값은 all 인데 카드지역에는 서울 인천밖에없음 그러므로 전부숨김

|| = 또는. 둘 중 하나라도 맞으면 통과

(입력: Shift + \ 두 번, 엔터 위 키)

if (regionBox.value === "all" || card.dataset.region === regionBox.value) {

만약에 드롭다운이 전체이거나, 카드 지역이 드롭다운 값과 같으면


11. 체크박스에 귀달기 (드롭다운과 같은 방법)
드롭다운 읽는것 : .value
              값 : “seoul”,”incheon” 같은 글자
체크박스 읽는것 : .checked
              값 : true(체크됨)/false(안됨)

12. 필터 동작시키기
! 아니다 (not)

예
!playroomBox.checked
=체크가 안 되어 있다

13. 필터가 서로 덮어쓰는 문제
드롭다운-> 인천 (1개보임)
놀이방 체크 (전부사라짐)
놀이방 체크해제 —> 인천만 보여야하는데 전체카드가 보임.
그이유는 놀이방 귀는 놀이방만 보고 판단.
체크 해제 됐으니 전부 모여라 실행됨.

14. 이름붙인 funcion , &&

- 이름 붙인 function
이름을 붙여서 여러곳에서 부를 수 있게 만든다 이때 funtion뒤에 용어는 지어낸거임..
-&& = 그리고 를 뜻함 

양쪽 조건이 둘다 맞아야 통과. (||와는 반대임 이건 하나라도,)

AI 대화 내역 링크:

(링크 생성 방법)

클로드: https://claude.ai/share/a195690f-4515-4811-b68d-ea8672415f53

오늘 잘한 점: 본업이 요즘 바빳는데ㅠㅠ그래도 밀린부분을 열심히 하고있습니다.js 시작했습니다.

오늘 부족했던 점: css랑 조금 비슷하긴하네요.. 그런데 js부터는 확실히 좀 헷갈리더라구요
일단그래도 찬찬히 들여다 보고 제것으로 만들겠습니다.ㅠㅠ 지금은 멘토님이 말씀하신데로 코딩도 언어이다 라고 하셨는데 얼추 이해하다보니 좀 읽히고있습니다. 그렇게 제가 알고있는지를 확인 하고있습니다. 그렇게 하면될까요? 그리고 오늘한것도 또 간단하게 훑어야 되겠습니다

오늘 총평: 이렇게 하면되는건가 싶습니다. 잘하고있는걸까요?ㅠㅠ 멘토님이 방향을 잡아주신데로 제가 잘 쫓아가고있는건가 싶습니당 ㅠㅠ 클로드한테 궁금한걸 물어보고 오늘 해야할 목표랑 그런부분을 정하고 있는데 또 주도권이 빼앗긴건 아닌가 생각이 들었습니다 ㅠㅠ 클로드가 설명은 잘해주는데 js를 어디까지 하면되는지 클로드가 하라는데로 만큼 하면되는건지 싶어서 멘토님께 카톡으로 여쭤봤었습니당ㅠㅠ 헷갈리거나 할때 멘토님께여쭤보도록 하겠습니다 답변해주셔서 감사합니당!