🥞 오늘 한 일
- JavaScript 팀 과제
- 찜 버튼 클릭 시 localStorage 등록 및 버튼 색 변경
- 재클릭 시 localStorage에서 삭제 및 버튼 색 원상복구
- 상세 페이지에서 찜한 영화 찜 목록 페이지에서 나오도록 구현
- 알고리즘 코드카타
- 이상한 문자 만들기
- 삼총사
- 크기가 작은 부분 문자열
- 최소직사각형
- 직사각형 별찍기
- 최대공약수와 최소공배수
- 시저 암호
🍽️ 문제 해결
찜 목록 기능 구현
사실 API만 가져와지면 만들 수 있는 코드였다.
이미 로컬 스토리지에 들어가있는 영화 id값으로 영화 정보를 가져와, 새로운 배열에 넣고 해당 배열 내 영화 정보들을 forEach() 메서드를 사용하여 전부 찜 목록 페이지에 넣어주는 기능을 제작했다.
import { ApiFetch, handleMovieItemClick } from "./movie.js";
let hearts = JSON.parse(localStorage.getItem("hearts"));
function displayHeartedMovies(heartedList) {
const pickMovie = document.querySelector(".pick_movie");
heartedList.forEach((e) => {
const movieItem = document.createElement("div");
movieItem.classList.add("movie");
movieItem.dataset.movieId = e.id;
movieItem.innerHTML = `
<img src="https://image.tmdb.org/t/p/w500${e.poster_path}" alt="${e.id}">
<div class="hover">
<h3 class="title bold">${e.title}</h3>
<p>${e.overview}</p>
<span>평점: ${e.vote_average}</span>
</div>
`;
movieItem.addEventListener("click", handleMovieItemClick);
pickMovie.appendChild(movieItem);
});
}
const getMovies = async (hearts) => {
let heartedList = [];
for (let i = 0; i < hearts.length; i++) {
heartedList.push(
await ApiFetch(`/3/movie/${hearts[i]}?original_language="eu" `)
);
}
displayHeartedMovies(heartedList);
};
(function init() {
getMovies(hearts);
})();
Git Pull
내 브랜치에서 다른 브랜치를 pull해오기 위해, git pull origin dev 로 적어주었는데 이런 식으로 오류는 아닌 것 같지만 오류가 났다(?).
알아보니, git pull을 별도 옵션 없이 하게 되면, 원하지 않는 방향으로 merge될 수 있다는 경고였다.
git pull을 하는 방식은 세가지가 있다.
- git config pull.rebase false #merge (the default strategy)
- 가장 기본적인 설정. ff가 아니면 그냥 merge commit 만들면서 병합하고, ff이면 merge commit 없이 병합한다.
- git config pull.rebase true #rebase
- merge가 아닌 commit 자체를 복사해온다.
- git config pull.ff only #fast-forward only
- ff가 아니면 에러 내면서 병합 자체를 refuse한다. ff일 때만 merge commit 없이 병합한다.
--ff-only를 추천한다는 말도 있어서 해보려 했지만, 사실 협업을 할 때 저 방식으로 하면 pull을 받아오는게 너무 불편해질 것 같아서, 일단 디폴트 값인 git config pull.rebase false을 선택했다. 내용이 생각보다 깊어서 아주 자세히 파고들진 않았고 감만 잡았지만, 일단 터미널에 이런 화면이 떴을 때 겁먹지 않고 뭘 하라는건지 알 수 있게 됐다는 점에서 성장했다고 생각한다.
알고리즘 코드카타
최대공약수와 최소공배수
문제
두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다.
문제점
사실 코드적인 부분보다 수학적인 지식이 부족해서 막막했던 게 컸다. 그래서 최대공약수와 최소공배수 자체를 어떻게 구하는지를 찾아보았고, 같은 숫자로 나눴을 때 나머지가 0인 숫자 중 제일 큰 숫자가 최대공약수, 두 숫자를 곱한 값을 최대공약수로 나눠주면 최소공배수라는 것을 알게 되었다. 해당 사실을 가지고 문제를 풀었다.
내 풀이
function solution(n, m) {
let num1 = 0;
for (let i = 1; i <= Math.min(n,m); i++){
if (n%i===0 && m%i===0){
num1 = i;
}
}
let num2 = (n*m) / num1;
return [num1, num2];
}코딩을 잘 하려면 역시 수학적인 지식도 어느 정도는 필요하겠구나~ 싶었다. 갈 길이 멀다.
🍪 배운 것
TMDB API 가져오기
팀원분이 직접 시연하면서 가르쳐주신 방법... 사실 JS는 지금까지 해야했던 것들 중에는 이해가 안 되는 건 많이 없었는데, API 가져오는 걸 잘 모르겠다. 이 또한 공부할 부분. 진짜 공부해야할 게 너무 많다...!
import { ApiFetch } from './movie.js'; // api 가져오는 코드를 import한다.
const a = async (url) => {
let api = await ApiFetch(`/3/movie/${url}?original_language="eu" `); // 미리 import해준 ApiFetch를 사용한다.
console.log(api); // 해당 아이디를 가진 영화의 정보가 뜬다.
};
(function init() {
a(1094844); // a 매개변수로 임의의 영화 아이디를 넣어준다.
})(); // 즉시 실행이 부분까진 이해가 됐기 때문에 가져왔고, 사실 여기에 적지 않은 ApiFetch 함수는 안 가져왔다. 아직 해당 부분을 이해했다고 보기는 너무 어려워서! 더 열심히 하자!
Git
- git fetch origin : 모든 원격 브랜치를 가져오는 명령어
🍴 느낀 점
- 역시, 너무 혼자서 해결하지말고 도움을 청하는것도 아주 좋은 방법이라는 걸 느낀 날이다. 튜터님께 찾아가니 정말 고민이던 부분을 쉽게 해결할 수 있었고, 같은 팀의 팀원분도 도움을 청하니 궁금했던 코드를 잘 알려주셨다. 같이 간다는 것의 의미를 알아가는 것 같다. 특히, 튜터님께 잘 찾아가지 않는 습관(?)이 있었는데 앞으로는 적극적으로 찾아갈 생각이다!
🍳 내일 할 일
- 노션 더 열심히 적기
- JavaScript 팀 과제
- 찜 목록 페이지 관련 html, css, js 전체적인 완성도 높이기
