같은 원소의 개수를 return 하는 문제인데 [같은 원소 = 중복된 값]으로 생각하여 set을 사용해 접근하는 방식을 선택했다.

mySet은 중복된 값을 제거한 배열을 만드는 함수로 스프레드 연산자를 사용해 값을 배열로 펼쳐서 받아줬다. return 값으로 받아온 s1, s2의 배열의 길이와 중복된 값을 제거한 새 배열인 mySet의 길이를 빼면 중복된 값의 갯수가 나온다.

set함수를 강의로 배우기만했지 직접 사용해서 문제를 풀어보니 확실히 이해가 잘 갔다. 중복된 값을 포함할 수 없으니 같은 원소의 개수를 구할 때 사용할 수 있겠다 라는 색다른 방식으로 접근해서 좋았다.

sort라는 메소드를 알고는 있었지만 이번에 제대로 이해하게 됐다.

array.sort((previous, current) => previous-current); // 오름차순
array.sort((previous, current) => current-previous); // 내림차순

배열을 오름차순으로 정렬 후, Math.floor 를 사용해 내림값으로 만들어 놓고
그 숫자 중 중앙값을 찾는데 배열의 길이(길이 조건은 홀수)를 2로 나누면 중앙에 있는 값을 찾을 수 있다.
>Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.  
배열 중 소수점이 있는 숫자가 있으면 다 버림 처리해서 비교할 수 있게끔 만든다.

api를 호출해서 스크립트 내부에서 html 요소를 생성하는 요구사항이 있었다.

템플릿 문자열을 활용하여 작성하려고 하였으나 genres 라는 요소는 배열 내부에 객체가 들어있는 형식이었기 때문에 html 문자열로 만들기 위해서는 추가적인 작업이 필요하였고 두 가지 방법이 떠올랐다.

1. n개의 span 을 만들어 주는 함수 작성 & 템플릿 문자열 내부에서 사용
2. 템플릿 문자열을 만든 뒤 for 문을 사용하여 genres 요소 생성 및 문자열 붙이기

이 두 가지 방법을 함께 사용하여 템플릿 문자열 내부에서 익명함수를 활용 한다면 짧은 코드를 작성할 수 있을 것 같았다.

코드 해설을 하자면 이렇다.

익명함수 내부에서 for문대신 map함수를 쓰고 res.genres 라는 매개변수를 받아 item을 순회하면서 새 배열을 만들었다. 새 배열 안에는 템플릿리터럴로 만든 span요소의 문자열이 있는데 그걸 그냥 쓰게되면 배열로 값이 나오게 된다. 그거를 문자열로만 만들기 위해 join 이라는 메소드를 사용하였다. join() 메서드만 사용할 경우 => , 가 기본적으로 붙어나오기 때문에 메서드 안에 ("")을 넣어서 구분자 없는 문자열을 만들었다. 값이 여러개 붙어서 나오게 하려면 div태그는 블록레벨이라 span태그로 옆에 붙도록 만들었다.

• MDN 공식문서 내용 --> [ DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다. ]

• 오탈자를 입력해도 에러가 발생하지 않으므로 주의해야한다.

개인과제를 하다가 찾아보게 된 이벤트인데 처음보는 메소드라 찾아보면서 사용했다.

// document load 후 동작

window.addEventListener("DOMContentLoaded", function () {
  getMovieListAndRender();
  // DOMContentLoaded 이벤트가 발생했을 때 매개변수로 지정한 콜백 함수(getMovieListAndRender())를 실행하라 라는 의미이다.
  this.document.getElementById("search-btn").addEventListener("click", () => {
    searchAndRender(
      this.document.getElementById("search-input").value,
      movieList
    );
  });

• DOMContentLoaded 이벤트는 DOM Tree 분석이 끝나면 발생한다. (load는 DOM Tree 외의 모든 자원이 다 받아져서 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에 발생한다.)
• -> 즉, DOM이 생성되기전 DOM을 조작하는 자바스크립트 코드가 실행되어 원하지 않는 결과를 내는 것을 막을 수 있다.

const container = document.querySelector("#movie-container");
// console.log(container);
container.addEventListener("click", (e) => {
  let movieCard;
  // console.log(movieCard);
  if (e.target.className === "movie-card") {
    movieCard = e.target;
  } else {
    movieCard = e.target.parentNode;
  }
  let _id = movieCard.getAttribute("id");
  alert(`movie_id: ${_id}`);
});

movieCard라는 변수를 선언하고 클릭 시 발생할 이벤트를 콜백함수로 넣어준다. 저 분기문은 클릭한 곳의 클래스명이 movie-card가 아니면 그 부모 요소를 포함하여 클릭 이벤트를 실행시켜준다. 클릭 이벤트는 alert창이 뜨면서 영화들의 고유id값이 불러와지게끔 만들었다.

이제 남은건 검색기능... 제일 큰 산이 남았다 ^)^

데이터 타입에는 두 가지가 있다. 이 데이터 타입을 구분하는 기준은 1) 값의 저장 방식, 2)불변성 여부 이다.

• 값의 저장 방식(복제방식) 기본형: 값이 담긴 주솟값을 바로 복제 참조형: 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제

• 불변성의 여부 기본형: 불변하다 참조형: 가변하다(불변성을 띄지않는다)

불변성의 여부는 메모리의 관점에서 봐야 정확히 알 수 있다.

메모리와 데이터

메모리는 비트, 바이트 단위로 나뉘는데 1바이트 = 8비트 로 만들어진다. 모든 데이터는 바이트 단위의 식별자인 메모리 주솟값을 가지고있다.

let a = 3
// let a는 식별자(변수명)
// 3은 변수(데이터)

변수 선언과 데이터 할당

// 선언과 할당을 풀어 쓴 방식(이해하기 편함)
let a; // 선언
a = 2 // 할당
// 선언과 할당을 붙여 쓴 방식
let a = 2

변수와 데이터에 값을 나눠서 넣는다

ex) 1002라는 주솟값에 a 라는 변수명을 넣고, 5002라는 주솟값에 2라는 데이터를 넣는다. 그럼 변수명 a에 할당된 데이터의 주솟값은 5002가된다. 만약 데이터가 3으로 변경됐다면, 5002에 있는 2라는 데이터를 변경하는게 아니라, 비어있는 5003의 주솟값에 3이라는 데이터를 넣고, a에 할당된 데이터의 주솟값을 5003으로 바꾸는 것이다. 그래서 2라는 값이 담긴 주솟값, 3이라는 값이 담긴 주솟값은 둘다 존재하되, 데이터 영역 메모리만 변경하여 값 자체는 불변하다 라고 할 수 있다. (나중에 5002의 주솟값은 가비지컬렉터 대상이 됨)

변수 영역에 값을 바로 할당하지 않고 한단계를 거치는 이유는 바로 데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위함이다.

데이터는 언제든 바뀔 수 있다. 데이터 변환하려할 때 훨씬 더 큰 데이터를 저장하려면 5003 이후부터 저장되어있는 모든 데이터를 다 미뤄야하는 일이 발생할 수 있다. (차지하는 주솟값이 많아질텐데 그 전에 이미 해당자리에 데이터가 저장되어 있을 수 있기 때문) 또한, 변수명이 데이터를 저장할때 직접 저장하지 않고 해당 주솟값에 할당되어 저장된다면, 중복된 데이터를 처리할 때도 효율성이 높아진다.

문자열 내 p와 y의 개수 - 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.

제한사항

• 문자열 s의 길이 : 50 이하의 자연수
• 문자열 s는 알파벳으로만 이루어져 있습니다.

입출력 예

• s: "pPoooyY" - answer: true
• s: "Pyy" - answer: false

  • 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.

나의 풀이

1. 대소문자 구별하지 않음 -> 하나로 통일(대문자를 선택)
2. for문을 통해 문자열의 요소를 하나씩 비교(p,y와 비교)
3. 갯수체크

function solution(s) {
  var answer = true;

  // 1.  대문자로 통일
  s = s.toUpperCase();
  // 2. for문을 통해 문자열의 요소를 하나씩 비교 (p,y와 비교)
  let num = 0;
  for (let i = 0; i < s.length; i++) {
    //  여기에서 비교
    if (s[i] === "P") {
      num++;
    }
    if (s[i] === "Y") {
      num--;
    }
  }
  // 3. 갯수체크
  if (num === 0) {
    answer = true;  // 위에서 이미 true로 기본값 설정되어있어서 굳이 안써도됨.
  } else {
    answer = false;
  }
  return answer;
}
// let str1 = "pPoooyY";
// let str2 = "Pyy";
// console.log(solution(str1));

코드가 아직.. 더럽지만 처음부터 코드정리는 나에게 어렵다ㅠ

음양 더하기 - 문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

제한사항

• absolutes의 길이는 1 이상 1,000 이하입니다.
  • absolutes의 모든 수는 각각 1 이상 1,000 이하입니다.
• signs의 길이는 absolutes의 길이와 같습니다.
• signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.

입출력 예

• absolutes [4,7,12] , [1,2,3]
• signs [true,false,true] , [false,false,true]
• result 9 , 0

나의 풀이

1. return해야 하는 answer생성
2. 두 배열을 비교하며 값을 더하거나 빼기(두 배열은 크기가 같음)

   function solution(absolutes, signs) {
   // 1. return해야 하는 answer 생성
   let answer = 0;
   // 2. 두 배열을 비교해 가면서 값을 더하거나 빼줄 것
   // 두 배열은 크기가 같음
   for (let i = 0; i < absolutes.length; i++) {
    // 부호(+, -)에 따른 처리
    if (signs[i] === true) {
      // 값이 true인 경우 (양수)
      answer += absolutes[i];
    } else if (signs[i] === false)
      // 값이 false인 경우 (음수)
      answer -= absolutes[i];
   }
   return answer;
   }

   // 삼항연산자 활용
   let answer = 0;
   for (let i = 0; i < absolutes.length; i++) {
    signs[i] ? (answer += absolutes[i]) : (answer -= absolutes[i]);
   }
   return answer;

   화이팅!