async function fetchMovies(url, options) {
try {
const response = await fetch(url, options);
// 서버 응답 확인
if (!response.ok) {
throw new Error("네트워크 상태가 좋지 않습니다.");
}
const data = await response.json();
// 가져온 데이터 출력
console.log(data);
...(생략)
SOLD에서 단일 책임 원칙(SRP)에 따라 하나의 함수는 하나의 기능을 가지는 것이 가독성 및 유지보수에도 도움이 됩니다. fetchMovie 함수는 영화 데이터를 가져오는 역할만 수행하도록 하고
UI 업데이트 및 영화 카드 작성 과 이벤트 처리는 별도의 함수로 분리하면 좋습니다.
예)
// 영화 데이터 받기
async function fetchMovie(search, page = 1) {
let url;
if (search === "") {
url = "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=" + page;
} else {
url = "https://api.themoviedb.org/3/search/movie?query=" + search + "&include_adult=false&language=en-US&page=" + page;
}
const response = await fetch(url, options);
if (!response.ok) {
throw new Error("네트워크 상태가 좋지 않습니다.");
}
const data = await response.json();
return data;
}
// UI 업데이트 함수 작성
function updateUI(data, page = 1) {
// UI 업데이트 내용 작성
//기존 movieContent 내용이 있다면 삭제
let movieContent = document.getElementById("movieContent");
while (movieContent.firstChild) {
movieContent.removeChild(movieContent.firstChild);
}
...(생략)
data["results"].forEach((element) => {
createMovieCard(element);
});
}
// 영화 카드 작성 함수
function createMovieCard(element) {
// 새로운 div 요소 생성
let movieCard = document.createElement("div");
movieCard.classList.add("movieCard");
movieCard.id = element["id"];
...(생략)
}
async function fetchAndUpdateUI() {
try {
const data = await fetchMovie("searchTerm", 1);
updateUI(data);
} catch (error) {
//오류 처리
console.error("Fetch 오류:", error);
alert("Fetch 오류: " + error.message);
}
}
fetchAndUpdateUI();
pagination 변수는 한 번 할당된 후에 다시 할당되지 않기 때문에 이 변수는 const 키워드를 사용하여 선언하는 것이 더 적절합니다.
const 키워드를 사용하면 변수의 재할당을 방지하여 코드의 안정성을 높일 수 있습니다.
코드에서 pagination처럼 재할당되지 않는 변수들을 찾아서 const 로 변경해주세요.
첫 번째 과제 하느라고 고생 많으셨습니다.
코드마다 주석 잘 작성해 주셨고 select 태그를 이용해서 pagination 기능처럼 구현을 잘 해주었습니다. 아래는 코드 피드백입니다.
1. 파일 분리
기능에 따라 파일을 분리하여서 유지 보수 및 코드의 재사용성을 높입니다.
예)
2. Async/Await 사용
https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L41-L60 async/await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 코드를 더욱 명확하고 이해하기 쉽습니다.
예)
3. 기능 분리에 대한 SOLID 원칙 적용 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L72-L87
SOLD에서 단일 책임 원칙(SRP)에 따라 하나의 함수는 하나의 기능을 가지는 것이 가독성 및 유지보수에도 도움이 됩니다.
fetchMovie 함수는 영화 데이터를 가져오는 역할
만 수행하도록 하고UI 업데이트
및영화 카드 작성 과 이벤트 처리
는별도의 함수로 분리
하면 좋습니다.예)
4.점표기법 사용
https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L89 자바스크립트에는 점 표기법과 괄호 표기법이 있습니다. 가독성면에서는 점 표기법이 좋기때문에 객체의 프로퍼티에 변수를 활용하여 접근하지 않는 이상은 점 표기법을 사용하는것이 추천 드립니다.
예)
5. 재할당되지 않는 변수는 const 키워드 사용 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L23 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L32
pagination 변수는 한 번 할당된 후에 다시 할당되지 않기 때문에 이 변수는 const 키워드를 사용하여 선언하는 것이 더 적절합니다. const 키워드를 사용하면 변수의 재할당을 방지하여 코드의 안정성을 높일 수 있습니다. 코드에서 pagination처럼 재할당되지 않는 변수들을 찾아서 const 로 변경해주세요.
6. console.log 삭제 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L64
개발 과정에서 사용된 console.log는 production에서는 사용하지 않기 때문에 github에 올릴 때도 삭제해서 올려주시면 좋습니다.