작성한 코드를 팀원이 읽어보는 과정에서 이상한 점이 발견되었다해당 공간에 내용(객체 20개)이 들어있다 그 공간에 appendChild를 했는데 칸을 비우거나, 기존 내용을 삭제하는 코드가 없다하지만 기존 공간에 노드가 존재하면서 새로운 노드가 추가되는 것이 아니라 대체가 된다 그것도 아무런 에러 메시지 없이..! 코드 설명아래 코드는 클릭한 radio 버튼의 id에 따라 정렬된 카드를 화면에 추가하는 역할을 한다 (카드에는 영화 데이터가 들어있다) tempArr1에는 인수로 전달되는 문자열을 기준으로 정렬한 카드(노드) 배열에 들어있다이 배열을 돌면서 $main_cards에 appendChild로 추가한다($main_cards는 정렬된 카드가 들어갈 자리로, 필터링 결과 적용 전 현재 화면에 보이는 ..
window.location웹 브라우저의 현재 URL에 대한 정보를 제공하는 JavaScript의 내장 객체이다해당 객체는 현재 URL을 나타내는 여러 속성과 메소드를 가지고 있다 href현재 url 주소를 가져오기전체 url을 문자열로 반환한다 이때 프로토콜, 호스트 경로, 포트, 쿼리 스트링 등 모든 부분이 포함된다console.log(window.location.href);해당 주소로 이동window.location.href = "http://example.com"; protocol / host / hostname / port아래 코드를 가지고 설명하면http://example.com/page.html?q=123protocol http:, https:host : 호스트(도메인) + 포트 exampl..
1. 영화 데이터 가져오는 JS 코드 리팩토링첫번째 과제에서는 데이터를 가져와서 화면에 보여주기만해서 데이터를 가져오는 동작(fetch)와 카드를 만드는 동작(createMovieCard)을 한 곳에 두었다 함수가 데이터를 가져오고, 카드를 만드는 2가지 역할을 하면서나중에 고쳐야지 생각했는데 마침 이번에는 메인페이지의 카드, 헤더, 상세페이지에 개별 영화가 들어가면서 코드를 분리하는게 좋겠다고 생각했다그리고 async/await로 도전해봤다 수정 결과1. fetchMovies먼저 영화 데이터를 가져오는 함수를 만들었다 해당 함수는 fetch한 결과를 가져와 json으로 변환 후, 사용할 results를 구조분해 할당으로 담았다results안에는 영화(객체)를 담은 배열이 들어있다앗 아래 export는 ..
커밋 컨벤션(commit convention)이란?프로젝트 참여자들이 일관적인 커밋 메시지를 작성하기 위한 규칙, 가이드라인을 의미한다관습적으로 통용되는 가이드라인 외에도 팀에 맞게 수정하며 적용하다 결론적으로 아래와 같은 목적으로 사용한다1. 가독성 향상으로 작업 내용 파악하기 쉬움 (커뮤니케이션 효율 증대)2. 변경 이력 추적 용이 Conventional CommitsA specification for adding human and machine readable meaning to commit messageswww.conventionalcommits.org위 사이트에서는 커밋 메세지를 구성하는 방법을 아래와 같이 요약하고 있다: [optional body][optional footer] 1. 변경..
개념 공부를 할 때 가장 헷갈리는 비동기여태 눈치껏 사용하다가 제대로 사용해 보고 싶어서 시작한다,, 가보자고,,🔥Promise이해하고 보니 명쾌한 정의!비동기 작업을 처리하는 객체, 비동기 작업을 실행했지만, 결과를 반환하지 않은 객체 ( 왜냐? resolve, reject를 호출하지 않으면 영원히 pending 상태) const promise = new Promise((resolve, reject) => { if (작업이 성공적으로 완료됨) { resolve(결과값); // 성공적으로 완료되었으므로 resolve 호출 } else { reject(에러); // 작업이 실패했으므로 reject 호출 }});//딴짓//딴짓중.. //계속 다른 작업중.. promise .t..
문제카드를 여러개 만들면서 따로 설정을 하지 않아서 긴 content의 길이에 맞춰 높이가 결정되고,그 card를 기준으로 다음 카드의 높이가 결정된다 그래서 카드가 같은 높이를 가지고, 카드를 벗어나는 글들은 ... (줄임) 표시를 하도록 수정하려한다text-overflow면 해결될 줄 알았는데 안됨! ㅠ아래는 위 화면의 html, css이다 Dune 설명글....movieContent { overflow: hidden; text-overflow: ellipsis; // 작동 안함 🥲} 말 줄임표 사용 방법을 2가지 찾았다1. text-overflow: ellipsis텍스트가 요소의 너비를 초과할 때 말 줄임표(...)를 사용한다 text-overflow: ellipsi..