CSR vs SSR vs SSG    Client Side Rendering (CSR)CSR은 웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링하는 방식을 말합니다.👍장점▪️ 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임 없이 부드럽게 페이지가 바뀝니다.▪️ 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생합니다.👎단점▪️ SPA(Single Page Application)의 경우 처음 페이지 접근시 서버로부터 전체 페이지에 대한 자바스크립트 번들파일, CSS 파일을 받아야 하므로 페이지를 만들고 유저가 사용하기 까지 시간이 SSR에 비해 오래 걸립니다.▪️ 검색엔진에서 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는데, CSR은 자바스크립트를..

JavaScript Event Handler 모음    onabort이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)onactivate개체가 활성화될 때 발생(태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)onafterprint문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생onafterupdate데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가  업데이트 되었을 때 발생(데이터 개체부분 참조)onbeforeactivate개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고)onbeforecopy선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생onbeforec..

배열 메서드 - (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..