Font Awesome 사이트 Git 명령어 강제로 git reset --hard origin/master 강제로 push git push origin feature/subin --force api 데이터 언어변경 language=ko&page=1 grid 반응형 grid-template-columns: repeat(auto-fill, minmax(300px, 400px)); auto-fill 사용시 화면 크기에 따라 colum이 자동으로 만들어짐!! Event 버블링 //수정 버튼 function editBtn(event) { console.log(event.target.className); const parent = event.target.parentNode; if (event.target.match..
3주차는 바닐라 자바스크립트 개인 프로젝트 진행 주차였다..!! 2주차 동안에 학습했던 JS강의를 기반으로 진행되었고, Open API에서 영화정보를 가져와서 페이지에 띄우고, 검색기능을 만드는 내용의 과제였다. 어려웠던 점 / 알게된 점 1. fetch (async/await) 강의를 들으면서 학습한 내용이었지만, 제대로 이해하지 못해서 사용하는데 어려움이 있었다. 하지만 setTimeOut 으로 console에 확인해본다던가 aysnc/await를 작성하는 등의 방법으로 promise pending 문제를 해결할 수 있음을 알게 되었다. 2. JS에서 DOM 접근하기 getElement나 querySelector 등으로 DOM에 접근할 수 있는 방법이 많은데, 각각 반환하는 결과가 일반 배열의 형태가..
Git 효율적으로 사용하기 브랜치 전략 git flow 커밋 컨벤션 Git Pull Request https://wayhome25.github.io/git/2017/07/08/git-first-pull-request-story/ git 초보를 위한 풀리퀘스트(pull request) 방법 · 초보몽키의 개발공부로그 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생긴다. 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 wayhome25.github.io 위의 블로그에서는 Pull request 할 원본 주소를 fork를 한 후에 fork한 내 깃에다가 push를 하는 방법을 알려준다. 그래서 순서대로 다 진행을 해봤으나! 문..
DOM에 접근하기 HTMLCollection을 배열로 바꾸기 let title = document.getElementsByClassName('card-title'); console.log(title); title = Array.from(title); console.log(title); getElememtByClassName으로 요소를 가져오면 HTMLCollection으로 가져와짐 length가 있는 유사배열이기 때문에 Array.from()을 사용해서 배열로 바꿀수 있음! 하지만 어떤 이유에서인지 빈 배열만 출력되는 현상 발생 결국 for ... of 를 사용해서 배열로 바꾸는 방식으로 진행함 setTimeout 사용해서 DOM요소 가져오기 let title = []; setTimeout(functio..
NodeList와 HTMLCollection let card = document.querySelectorAll('.movie-list'); console.log(card); card.forEach((a) => { console.log(a); }); 문제 발생 NodeList는 NodeList 고유의 메소드인 forEach 사용 가능 HTMLCollection은 배열 메소드 사용 불가 알게된 점 아무래도 NodeList는 정적 HTMLCollection은 동적인 유사 배열이라 배열 메소드를 사용하지 못한다인줄 알았으나 NodeList에는 고유한 메소드가 있어서 forEach가 사용됐던 것이었다! HTMLCollection vs NodeList 둘의 차이를 알고 있나요? HTML의 구조나 내용 또는 스타일 ..
Element.setAttribute() 사용방법 : setAttribute(name, value) const temp = document.createElement('div'); temp.setAttribute('class', 'movie-list'); temp.setAttribute('id', `${index}`); 자바스크립트 상에서 HTML 태그에 id나 class 값을 만들어 줄 수 있다. Element.setAttribute() - Web API | MDN 지정된 요소의 속성 값을 설정합니다. 속성이 이미 있으면 값은 업데이트됩니다. 속성이 없다면 지정된 이름과 값으로 새 속성이 추가됩니다. developer.mozilla.org 유사배열 HTML 아래의 블로그를 보고 참고 했다! [JavaSc..
영화 api를 받아서 영화 검색 사이트를 만드는 프로젝트 프로젝트 진행 순서 1. 간단한 와이어 프레임 2. html에 input, button태그와 영화 카드창 생성하기 3. javascript로 기능 구현 : 검색 기능, 홈화면에 모든 영화 정보 띄우는 기능 4. css로 레이아웃 수정하기 3. javascript로 기능 구현 : 검색 기능, 홈화면에 모든 영화 정보 띄우는 기능 홈화면에 모든 영화 정보 띄우는 기능 function movieList(rows) { rows.map((a) => { const temp = document.createElement('div'); temp.innerHTML = ` ${a['title']} ${a['overview']} ${a['vote_average']} `..
JS 문법 종합반 5주차 : Class 클래스는 객체를 생성하기 위한 일종의 템플릿 아래의 예제처럼 클래스 사용 constructor 라는 생성자 함수를 사용하여 객체 생성 this 사용하여 인스턴스(실제 객체)에 접근 클래스 안에 메소드를 정의할 수 있음 new 클래스명( )으로 객체 생성 가능 class Car { constructor (modelName, modelYear, type, price) { this.modelName = modelName this.modelYear = modelYear this.type = type this.price = price } makeNoise () { console.log(`${this.modelName} 빵빵!`) } } let car1 = new Car( '..
