배열 메서드 - (6가지 요소 조작 메서드)   1. push배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];arr1.push(4);console.log(arr1); // [1, 2, 3, 4] 만약 이때, 여러개 요소를 추가 하고 싶다면 , 를 사용하면 됨let arr1 = [1, 2, 3];arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7] 하나 더! push 메서드는 요소들을 추가하고 난 다음에 변환된 배열의 길이를 반환함let arr1 = [1, 2, 3];let arrLength = arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7..

자바스크립트 이벤트 핸들러, 이벤트 리스너    1. 이벤트(Event)- 이벤트(event)는 무언가 일어났다는 신호입니다. 모든 DOM 노드는 이런 신호를 만들어 냅니다.   (이벤트는 DOM에만 한정되진 않습니다.)- 웹페이지에 있는 기능을 이용하기 위해서 마우스나 키보드를 조작하여 기능을 실행한다.- 바로 이러한 행위들을 이벤트라고 부릅니다. 2. 이벤트 종류1) 마우스 이벤트click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 이벤트 발생 contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 이벤트 발생mouseover와 mouseout – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 이벤트 발생mousedown과 mouseup – 요소 위에서 마우..

DOM이란? Virtual DOM이란? 사용하는 이유는?      Virtual DOM이란? 사용하는 이유는?Virtual DOM 공부하기 전에 DOM부터 알아보자. DOM DOM은 Document Object Model의 약자임. 한국어로는 문서 객체 모델. 간단하게 설명하면 웹 페이지에 나오는 HTML문서 전체를 객체로 표현한 것으로 생각하면 될것같음. 이때의 각 객체를 노드(Node)라는 용어로 표현하고 각 노드는 HTML 요소들과 연관되어 있고 DOM노드로 이루어진 트리를 만듬, 태그는 요소 노드, 문자는 텍스트 노드로 구분됨. DOM 트리   웹 페이지나 웹 앱에 있는 HTML 요소들의 계층 구조를 나무에 비유해서 DOM 트리라고 표현함. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현..

얕은 복사 Shallow Copy , 깊은 복사 Deep Copy 란?    자바스크립트에서 값은 원시값과 참조값이 있습니다. 원시값- Number- String- Boolean- Null- Undefined 참조값- Object- Symbol 원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2 하지만 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다. const a = {number: 1};let b = a;b.number = 2console.log(a); // {numb..

Git Flow 브랜치 전략   브랜치 우리는 왜 브랜치를 사용할까? 브랜치를 별도로 생성하지 않고 메인 브랜치에서만 작업하면 어떤 일이 벌어질까? 메인 브랜치는 출시되고 배포된 코드를 위한 브랜치이다. 이 곳에 기능을 하나씩 개발하며 커밋을 반영하게 될 것이다. 그런데, 하나의 기능을 개발하기 위해 여러개의 커밋을 했다면? 기능이 완성되기 전 까지 메인 브랜치의 소스코드는 불완전한 상태로 존재할 것이다. 협업을 하게 된다면 더 큰 문제가 발생할 것이다. 오직 메인 브랜치에서 수 많은 개발자들이 협업한다면, 내가 작업중인 파일을 누군가 건드릴 수 있게된다. 또한 여러 기능을 개발하면서 남겨진 커밋 히스토리가 메인 브랜치에 뒤죽박죽 섞이게 될 것이다. 커밋 히스토리가 뒤죽박죽 섞였기에, 기획 변경으로 개발..

Git에서 branch와 merge  1. Branch 개념1) Branch란?- 협업 시, 각자 맡은 것을 작업하는 것- 브랜치를 나누지 않으면, 여러 사람이 commit 할 경우에 충돌이 날 수 있다. 또한 서로 작업한 commit 내역을 내 로컬 repo에도 반영해줘야 하는 번거로움 발생 2) Branch 나누기main 브랜치가 있다면, 본인의 branch를 파서 내 작업만 진행하고, 나중에 main에 합쳐주면 된다!  2. Branch 생성1) 브랜치 생성git branch : 현재 등록된 브랜치 확인git branch -v : 등록된 브랜치의 상세한 정보 확인git branch git branch -v  2) 브랜치 리스트 확인- 리스트 확인하고 q 눌러서 빠져나오기git branch 3) 브랜..

CSS 배경(background) 속성정리   background 속성  https://developer.mozilla.org/ko/docs/Web/CSS/background background - CSS: Cascading Style Sheets | MDNCSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.developer.mozilla.org  background는 아래 다양한 속성을 가집니다.background-color배경 색background-image배경 이미지background-repeat배경 이미지 반복 여부background-position배경 이미지 위치background-size배경 이미지 크기background-ori..

display속성 block, inline, inline-block 정리  1. display: block;: block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다.블록 속성을 가지고 있는 태그는 기본적으로 너비 100% 속성을 가지고 있습니다.화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 된다.따라서 display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 완전히 차지합니다.예를 들어서 p, li, div, h1 등이 모두 block 요소에 해당하는 태그들입니다.  inline 요소와 다르게 margin, pedding, w..

[CSS] Position 속성   https://developer.mozilla.org/en-US/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDNThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.developer.mozilla.org    CSS position 속성 : CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.position 속성은..