2024.01.16 TIL #includes( ) #hasOwnProperty( ) #Object.keys( ) / Object.values( )

첫 번째 팀 프로젝트가 드디어 끝났다.

팀플을 할 때 배웠던 것을 작성해보자.

1. 함수, 변수를 따로따로 빼서 코드를 깔쌈하게, 다른 곳에서 오류없이 사용할 수 있도록 하자.

나는 detail.js 파일로 movie.js 파일에서 선언한 fetchMovies라는 함수를 import 해 오고 싶었다.

그래서 import 해왔는데 자꾸 에러가 나는 것이다.

- 이유는 뭐였냐면, movie.js 에서 fetchMovies를 정의할 때 그 블록 안에 makeMovieCard 함수와 hideMovies 함수도 같이 실행되도록 정의를 해뒀었다.

- 그래서 detail.js파일로 fetchMovies를 import 해 왔을 때, fetchMovies 함수만 써야하는 게 아니라 fetchMovies 안에 있는 makeMovieCard 함수와 hideMoives 도 detail.js에서 사용해야 온전히 import가 되는 것이었다.

- 하지만 난 detail.js 파일에서는 makeMovieCard 함수와 hideMovies 함수는 필요가 없는 걸?

=> fetchMovies / makeMovieCard / hideMovies 함수를 각각 따로 나누어서 정의하고

=> 호출할 땐 renderMovies라는 더 큰 함수 주머니에 넣어서 호출하자!

그러고 난 뒤 movie.js 파일에서는 renderMovies 함수를 실행시키고, 

detail.js 파일에서는 fetchMovies만 가져오면 되는 일 이었다.

이렇게 함수를 정의할 때는 웬만하면 따로따로 정의해주는 것이 코드 가독성도 좋고, 다른 곳에서 차용했을 때 오류가 날 확률이 줄어든다.

 

2. includes( ) 메서드

- "배열"의 요소 중 특정 값이 포함되어 있는지 확인해주는 메서드

 includes 메서드에 대해서 대충은 알고 있었지만 정확하게는 몰랐었다. 그래서 언뜻 아는 상태로
여러 개의 "객체"를 담은 storedPairList 라는 배열의 특정 요소를 찾기 위해

storedPairList.find((pair) => pair.includes ~~ ) 

이렇게 코드를 짰는데 (당연히) 안 됐다.

- includes는 "배열"에 쓸 수 있는 메서드라서, storedReviews라는 배열의 요소 하나하나인 pair이라는 객체에는 사용할 수 없던 메서드이기 때문이다.

보통은 이렇게 사용한다.

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));  // 배열에 바로 실행

 

3. hasOwnProperty( )

그럼 나는 pair라는 객체에서 특성 속성을 찾고자 할 때, 도대체 어떻게 해야하는가!
hasOwnProperty 메서드는 객체가 특정 속성을 가지고 있는지를 Boolean 값으로(true or false) 반환해준다.

예를 들면, 

let person = {name : 'bob', age:30 }

person.hasOwnProperty('name');                // true

이런 식으로 쓰인다. 

 

하지만 이건 불린 값을 반환하기에 내가 정말 원하던 정확한 속성 값이 나오는 결과는 아니었다.

 

4. Object.keys( ) / Object.values( )

그럼 어떻게 해야할까?? 

한참 고민하던 중 Object.keys / values 라는 메서드를 알게 되었다.

- 객체의 특정 속성을 "배열"로 반환해준다.

예를 들면

let person = { name: "bob", age: 30 };

console.log(Object.keys("person")); // [ '0', '1', '2', '3', '4', '5' ]

console.log(Object.keys(person)); // [ 'name', 'age' ]

console.log(Object.values(person)); // [ 'bob', 30 ]

이렇게 사용된다.

- 여기서 주의해야할 점은! Object.keys 또는 values의 인자로 객체의 속성 자체(person)를 전달해야 한다.

  그렇지 않고 첫 번째 처럼 속성을 문자열로 전달하면, 문자열은 유사 배열 객체로 취급되어, 결과적으로는 그 문자열에
  대한 인덱스 값이 반환된다.

---

느낀 점

드디어 첫 번째 팀프로젝트가 끝이 났다.

우리 팀의 팀장님이 주말 새에 갑자기 잠수를 타시는 바람에.. 원래 4명이었던 팀원이 3명으로 줄었고, 3명이서 프로젝트를 완료하기란 쉽지 만은 않았다. 

팀장님이 부재한 바람에 그냥 내가 발표를 하겠다고 했다. 

열심히 발표했고 다른 팀들의 발표도 귀 기울여 들었다.

우리보다 훨씬 기능 구현도 많이하고 CSS 도 정성스럽게 꾸민 팀들이 많아서 놀라웠고 부러웠다.

나는 원래 배우는 속도가 좀 느리고 완전히 이해가 되어야 넘어가는 스타일이라 이 정도의 기능구현도 빡셌는데, 나로서는 생각지도 못한 기능들을 구현한 다른 팀들의 프로젝트가 참 인상깊었다.

그래서 이번 팀프로젝트의 한줄평은 "좀 아쉽다" 정도일 것 같다.

그치만 일주일 동안 9시부터 거의 매일 밤 12시까지 했다보니, 이젠 머리가 좀 지쳐서 시간을 더 줬어도 할 수 있었을까 싶다ㅋㅋ 

그래도 팀프로젝트를 하기 전보다는 코딩실력이 좀 늘은 것 같지만, 똑같은 기능을 다시 구현하라면 막힘 없이 할 수 있을까? 라는 질문엔 또 음... 하게 된다.

뭐.. 언젠간 되겠지ㅎ