[본 캠프 14일차] 팀 프로젝트 2일차 + 걷기반 실습 4회차 + 알고리즘 특강

어제 팀 프로젝트 발제 후 대략적인 틀만 짜놓고 제대로 시작은 오늘부터 진행한다.

 

영화 검색 사이트에서 회원가입 로그인 로그아웃 기능 추가인데 firebase install 하고 sdk 설정하는 곳에서 부터 막혔다.

 

프로젝트 개요 - 설정 - sdk 설정 및 구성에서 npm 은 react 에 맞춰 경로 설정이 자동으로 돼 있는데, 나는 CDN 을 사용해야 하는데 폴더 경로 설정이 아예 안돼있어서 뭐가 문젠지 계속 찾으면서 얼탔다.

 

 

여기 from 뒤에 경로 설정이 안돼있어서 붙혀넣고 경로설정 찾아서 하기 귀찮아서 아래 CDN 에서 주소만 가져와서 붙혀넣기 했다.

 

 

이렇게 SDK 설정을 완료하고, auth 를 이용하여 기능 구현을 해줘야하는데..

 

여기서도 signUpButton 에 click 이벤트를 주고 console.log 로 찍어봤는데 오류가 뜨길래 구글링 해서 찾아보다가 이것저것 고쳐보고 안돼서 고수분께 여쭤봤더니 건든것도 없는데 그냥 됐다. 어이없음;;

 

<form> 태그는 서버에 정보를 제공하는 것이여서, 제공하는 순간 새로고침이 된다.

이걸 막아주려고 어떠한 event가 발생하던 일단 막아달라고 preventDefault(); 를 써줬다.

 

 

TypeError: Cannot read properties of null (reading 'addEventListener'or'onclick') 문제 해결

signUpButton.addEventListener("click", (event) => {

  event.preventDefault();

  console.log(1);

});

 

이 부분을 테스트 하려고 로컬을 보니 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at .... .js 오류가 계속 뜬다.

 

뭐 여기저기 블로그에선 브라우저가 파일들을 로드해 읽는 순서에서 비롯해 렌더링 순서상 문제가 생겼다나 뭐라나.

인터프리터 언어적 특성 뭐시기 이해하기도 힘듦.. body 밑에 script 문제가 있다는데 난 애초에 html css js 나눠서 작성중이라 전혀 상관없었고, html 에서 이것저것 만져보니까 input class="signUpButton" 여기에 id 값을 class 와 동일하게 추가했더니 에러가 해결됐는데 난 이게 뭔 이해도 못하겠고 나중에 찾아보자 새벽1시가 넘었다.

 

 

 

 

 

---

걷기반 4회차 실습

 

1. 논리 연산자 활용하기

 - 점수에 맞춰 등급을 계산해주세요.

 - 모든 과목이 80점 이상인지 확인하는 checkGrade 함수를 완성해주세요!

const grade = {
  국어: 90,
  영어: 80,
  수학: 100,
};

// 논리 연산자(&& 또는 ||)를 활용하여 아래의 조건을 만족하는 코드를 작성해주세요.
// 출력: true

// 국어, 영어, 수학 점수가 모두 80점 이상이면 true, 아니면 false를 반환해주세요.
function checkGrade(grade) {
  // 여기에 코드를 작성해주세요!
  if (grade.국어 >= 80 && grade.영어 >= 80 && grade.수학 >= 80) {
    return true;
  } else {
    return false;  }
}

console.log(checkGrade(grade));
// true

 

2. 배열 메서드 활용하기: sort()

 - 튜터님 이름이 담긴 배열을 가나다순(사전순)으로 정렬해주세요.

let tutorNames = ["최원장", "김르탄", "윤창식", "박가현", "김병연", "내배캠"];

// sort() 메서드를 활용하여 다음과 같은 결과가 나오도록 코드를 작성해 주세요.
// 결과: ['김병연', '김르탄', '내배캠', '박가현', '윤창식', '최원장']

// 튜터님 이름이 담긴 배열을 가나다순으로 정렬하는 코드를 작성해주세요.
// 이 아래에 코드를 작성해주세요!
tutorNames.sort();

// tutorNames.sort((a, b) => b.localeCompare(a));

// if ( a < b) return -1 // b - a = - 음수 b.localecompare(a); 내림차순

// if ( a > b) return 1 // a - b = + 양수 a.localecompare(b); 오름차순
이거맞음?

console.log(tutorNames);
[ '최원장', '윤창식', '박가현', '내배캠', '김병연', '김르탄' ]

 

3. 배열 메서드 활용하기: find()

 - 처음 만나는 짝수를 찾는 함수를 완성해주세요.

const numbers = [3, 7, 8, 5, 9, 12, 15];

// find() 메서드를 활용하여 첫 번째로 짝수를 찾는 함수를 구현합니다.
// 출력 결과: 8

// 힌트
// 1. find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
// 2. 즉, 숫자 배열에서 짝수를 찾아야 합니다.
// 3. find() 메서드는 콜백 함수를 인자로 받습니다.
// 4. 콜백 함수는 주어진 요소가 짝수인지 판별합니다.
// 5. 짝수를 찾으면 true를 반환합니다.
function findFirstEvenNumber(numbers) {
  // 함수 내부를 채워주세요!
return numbers.find((number) => number % 2 === 0);
}

console.log(findFirstEvenNumber(numbers));
// 8

 

 

4. 배열 메서드 활용하기(심화): find()

 - 조건에 맞는 튜터님 객체를 출력해주세요.

// 주의) 실제 근무 시간과 다릅니다!
const tutors = [
  {
    이름: "최원장",
    출근시간: 9,
    퇴근시간: 18,
  },
  {
    이름: "윤창식",
    출근시간: 9,
    퇴근시간: 21,
  },
  {
    이름: "박가현",
    출근시간: 13,
    퇴근시간: 18,
  },
  {
    이름: "김병연",
    출근시간: 13,
    퇴근시간: 21,
  },
];

// find() 메서드를 활용하여 출근시간이 9시이면서 퇴근시간이 21시인 튜터를 찾아주세요!

// 힌트
// 1. find() 메서드를 사용해 tutors 배열을 순회합니다.
// 2. 순회하면서 tutor 객체를 하나씩 가져옵니다.
// 3. tutor 객체의 출근시간과 퇴근시간을 동시에 비교하여 조건에 맞는 tutor를 찾습니다.

function find9to21Tutor(tutors) {
  // 함수 내용을 채워주세요!
   return tutors.find(function (tutors) {
      if (tutors.출근시간 === 9 && tutors.퇴근시간 === 21){
          return tutors;
      }
});
}

console.log(find9to21Tutor(tutors));
// 출력 결과: { 이름: "윤창식", 출근시간: 9, 퇴근시간: 21 }