작업중인 브랜치에 새로운 커밋이 되었을 경우 새로운 커밋이 되었다는 것은 업데이트가 필요하게 된 경우를 뜻한다. 하지만 작업중인 내용이 있을 때 업데이트를 하면 충돌이 일어나거나 작업내용이 사라질 수 있기 때문에 git stash 라는 명령어를 사용해서 마무리하지 않은 작업을 잠시 스택에 저장하는게 제일 먼저다!! 해당 내용은 참고한 블로그에 이해하기 쉽게 적혀있다! 알게된 점 변경사항이 있는데, pull을 해와야 하는 상황이 발생했을 경우 혹시 몰라서 백업파일을 만들어 놓고, git pull을 실행했었다. 하지만 git stash를 이용하면 좀 더 간단한 방법으로 문제를 해결할 수 있음을 알게 되었다. git stash pop은 적용과 동시에 해당 stash를 삭제하는 명령어다. 삭제하지 않고 가져오는..
CSS grid header { background-color: black; padding: 20px; transition: background-color 0.5s ease-in-out; height: 700px; display: grid; grid-template-columns: 700px 1fr; grid-template-rows: 80px 1fr 200px 1fr; } 제일 먼저 display : gird를 설정하고 grid-template-colums와 grid-template-rows로 열과 행을 원하는 모양으로 잡아줄 수 있다. 위의 코드는 2열 4행으로 만든 코드다! 첫번째 열의 크기는 700px로 고정이고, 두번째 열의 크기는 1fr로 설정해서 남는 크기만큼 생성하도록 했다. 첫번째 행의 ..
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..
