remote: Permission to 저장소 주소 denied to id(xxx). fatal: unable to access '저장소 전체 주소' The requested URL returned error: 403 a라는 github 아이디로 '최초' 글로벌 유저를 등록 후 b라는 github 아이디로 글로벌 유저를 등록 후 git push를 하게 되면 기존에 최초 등록한 a아이디를 바라보고 있기에 에러를 발생시키는 것이었습니다. 컴퓨터 내 git 사용자 정보 변경 Mac OS 기준 1. spolight 검색을 통해 keychain Access.app 또는 키체인 접근을 실행합니다. 2. 오른쪽 상단에 검색창에 github.com 을 검색합니다. 3. 리스트에 보이는 github.com 더블클릭 후 ..

async await을 활용하여 반복문에서 비동기 처리를 위해 비동기 완료될 때까지 기다리고 다음 코드로 실행되는 과정입니다. const delay = () => { const randomDelay = Math.floor(Math.random() * 4) * 100 return new Promise(resolve => setTimeout(resolve, randomDelay)) } const list = [1, 2, 3, 4, 5] list.foreach(async data => { await delay().then(() => console.log(data)) }) forEach는 반복문 전체가 종료되는 것에 대한 결과를 기다려주지 않습니다. callback이 동기적으로 실행되면 좋겠지만 forEach는..

video 기능 감지 function supports_video() { return !!document.crealeElement('video').canPlayType; } 비디오 포맷은 Boolean으로 return하지 않고 다음과 같은 문자열을 return 합니다. "probably" : 브라우저는 이 포맷을 재생할 수 있다고 거의 확신합니다. "maybe" : 브라우저는 아마도 이 포맷을 재생할 수 있다고 생각됩니다. " ": 브라우저는 이 포맷을 재생할 수 없다고 확신합니다. 크롬에서 Video태그에 바로 m3u8 포맷이 재생되지 않는 경우가 발생될 수 있습니다. 원인은 크롬 및 기타 디바이스 환경에서 HLS를 완전히 지원하지 않기 때문에 발생합니다. 이 경우 HLS를 지원하는 iOS, Safari..

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있습니다. 화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용해 보자. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아닙니다. 스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 합니다. /* 접근성에 문제가 있음 */ .blind { display: none; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */ } .blind { visibility: hidden; /* 화면에 보이지 않고, 스크린 리..

CSS 선택자(Selector) 중에 :nth-child와 :nth-last-child를 이용하면 자식 형제 요소의 갯수에 따라 스타일을 다르게 지정할 수 있습니다. 이 선택자는 IE9부터 지원 가능합니다. li:nth-child(1):nth-last-child(2), li:nth-child(1):nth-last-child(2) ~ li { width: 50%; } li:nth-child(1):nth-last-child(3), li:nth-child(1):nth-last-child(3) ~ li { width: 33.333%; } li:nth-child(1):nth-last-child(4), li:nth-child(1):nth-last-child(4) ~ li { width: 25%; } li:nth-c..

간혹 윈도우 업데이트 후 터미널에서 npm 명령어를 입력했을 때, 이미 모듈이 설치가 되어 있음에도 불구하고 npm 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 또는 gulp 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라고 오류가 뜨게 됩니다. 이 때 해결 할 수 있는 방법입니다. 내 PC에서 오른쪽 클릭 -> 속성 -> 고급 시스템 설정 환경 변수에 들어가서 시스템 변수 중 PATH 변수를 찾아서 아래 경로를 추가해주면 됩니다. C:\Users\USERNAME\AppData\Roaming\npm\ 여기서 USERNAME에 본인의 사용자 이름으로 바꿔서 입력해주면 됩니다. 이제 다시 해당 명령어를 사용할 수 있게 됩니다.

Youtube 같은 웹사이트는 사용자가 웹페이지를 최소화했거나 다른 탭을 보고 있는지를 체크한 후 재생 중인 동영상의 화질을 낮추거나, 화면은 내보내지 않고 음성만 재생하거나, 자동 재생이 되지 않도록 막아 데이터 전송량을 줄이는 동작을 합니다. visibilitychange 이벤트에 리스너로 등록된 함수는 웹페이지의 visibility 상태가 변하면, 즉 사용자가 탭을 다른 탭으로 변경하거나 원래 탭으로 복귀하는 등의 행동을 취하면 실행되게 됩니다. Page Visibility API는 웹페이지가 visible 또는 hidden 상태를 확인하는 기능을 제공합니다. function handleVisibilityChange() { if(document.hidden) { // the page is hidde..

배열 메서드 중 reduce가 있는데 이는 다른 메서드 보다 더 까다로워서 따로 작성을 하였다. reduce 란? map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형한다. reduce라는 이름은 이 메서드가 보통 배열을 값 하나로 줄이는 데 쓰이기 때문에 붙었다. MDN 으로 reduce 더 자세히 알아보기 reduce를 시각적으로 확인해 보기 array.reduce( callback( accumulator, currentValue [, index [, array ] ])[, initialValue ] ) 현재값 : currentValue (cur , val) 누적값 : acc 현재 인덱스 : inx 원본 배열 : src 대표적으로 아래 코드의 동작을 보다 편리하게 작성하기 위해서 re..

기본 1. 상수 표기법 상수는 const로 선언된 변수이며, 대문자와 _ 로만 나타낸다. 2. null과 undefined의 차이 null은 값이 할당되지 않았거나 알 수 없는 상태 undefined은 값이 할당되지 않은 상태 값이 할당되지 않았을 때는 명시적으로 null 사용한다. 3. 자료형 원시 자료형: 한 가지만 표현 가능한 것 (int, string) 객체: 데이터들의 집합 심볼: 객체의 고유 식별자 4. 형변환 문자형으로 형변환: String 숫자형으로 형변환: Number 5. 동등연산자와 일치연산자 동등연산자(==): 값만 일치하면 된다. (0 == false ==> true) 일치연산자(===): 값과 자료형이 일치해야 한다. (0 === false ==> false) 6. 논리연산자의 ..

script script 태그엔 자바스크립트 코드가 들어간다. 브라우저는 이 태그를 만나면 안의 코드를 자동을 처리한다. 외부 스크립트 자바스크립트 코드의 양이 많을댄, 소분하여 저장할 수 있음 스크립트가 길어지면 별개의 분리된 파일을 만들어 저장하는 것이 좋다. --> 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문. --> 새로 다운받지 않고 캐시에서 가져와 사용함. 트래픽 절약 및 웹 페이지 속도 상승!!! src 속성이 있으면 태그 내부의 코드는 무시된다. 따로 사용하고 싶다면 스크립트 두 개로 분리시켜야 정상적으로 실행된다. 변수(variable) let 과 var 만들어진지 오래 된 스크립트에서는 let 대신 var라는 키워드를 통해서 변수를 설정한다. var 은 let 과 거..

변수와 상수는 무엇일까? 변수는 변할수 있는 수이다. 영어로는 variable 즉, 값이 언제든지 변할 수 있다. var v = 1; 이렇게 v = 1 이라는 수를 정해주었지만 나중에 v=2 혹은 3 다른 원하는 수로 바꿀 수 있다. var v = 1; var v = 2; console.log(v); #2 var를 사용할 때 문제는 무엇일까? var는 변할 수 있다는 점이 장점이자 단점이다. 어떤 변하면 안되는 값 x가 있다고 가정하자 그뒤에 코드가 너무길고 복잡해 프로그래머가 x를 변경한다면 프로그램이 제대로 작동하지 않을 것이다 또한 오류도 나지 않는다. 이를위해 한번정해두면 변하지 않는 값이 필요해졌다. const const는 constant의 약자이며 상수라고 부른다. 상수의 상은 항상상자이다. ..

Git이란 무엇일까? Git에 대한 내용과 자주 쓰이는 명령어에 대해 정리해보았다. 📢 Git이란? Git은 버전관리시스템이다. Git을 이용하면 언제든지 저장 시점으로 되돌아갈 수 있다. 📢 Git의 특징과 설치방법 Git의 특징과 장점 Git은 빠르며, 분산형 저장소를 지원한다. -> 때문에 여러 명이 동시에 수정하는 환경에 적합하다. 수천개의 동시 다발적인 branch가 가능하다. 속도나 데이터 크기 면에서, 대형 프로젝트에 유용하다. Git 설치하기 windows는 git-scm.com 에서 다운받고 설치하면 된다. 설치 후에는 user.name과 user.email의 설정을 해야한다. 이는 commit시 author과 committer의 메타데이터로 사용되기 때문이다. git config --g..

1.DOM이란? DOM(Document Object Model)은 노드(Node) 들이 트리 형태로 구조화 된 데이터 표현이다. 그럼 어떻게 생겼느냐? 이런 트리 구조로 형성이 되어있는데... 1-1 Node 우선 node가 무엇인가? tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 표현한다. head, body, title, script, p, h1, div 등등 태그뿐아니라 태그안의 속성이나 텍스트도 모두 node에 속한다 1-2 Tree 자료구조 그럼 tree라는 자료구조를 이해할 필요가 있다. 하나의 root node에서 시작하며 루트 노드(최상위 노드)에서 아래로 퍼져나가는 형태이다. 트리에서 최상위 노드를 root node 즉, 가장 최상위에 있는 node이기에 par..

자료구조란 데이터에 편리하게 접근하고, 변경하기 위해서 데이터를 저장하거나 조작하는 방법을 말한다. 만약에 사과를 담는 용기가 필요하다고 생각해보자. 사과를 멀리 가지고 가려는 목적이라면 바퀴가 달려있는 수레 같은게 필요할 수 있다. 자주자주 꺼내 먹기 위한 용기가 필요하다면 손을넣어 꺼낼수있는 백이나 바구니 같은 형태가 적합하다고 할수있겠다. 어떤 자료구조를 선택하느냐에 따라 퍼포먼스가 달라진다. 일반적으로 자주 사용되는 구조들 Array(List) 배열 데이터가 순차적으로 있는것 그 이유는 메모리상에 물리적으로 순차적으로 저장되기 때문이다. 인덱스가 있기 때문에 조회가 가능하다. (인덱스로 조회가 가능하다) 순차적인 데이터를 다루기 적절하다. 단점은 할당된 메모리가 다 사용되면 리사이징하기 때문에 그..

iframe 이란? HTML의 iframe은 인라인 프레임을 나타냅니다. 인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함시키는 데 사용됩니다. 'src'속성은 iframe을 차지하는 문서의 URL을 지정하는 데 사용됩니다. 이처럼 iframe은 내 페이지에 다른 페이지를 삽입하는 tag입니다. iframe tag를 사용하여 삽입할 수 있습니다. 속성으로써 width, height등을 줄 수 있습니다. document내에 다른 html document를 삽입하는데 그치지 않고 그 둘을 상호작용하게 할 수는 없을까? 이 둘사이에 정보를 주고 받을 수 있는 루트가 존재합니다 . 그것이 postMessage() 입니다. const handleReviewCount = () => { window.pare..

call과 apply는 함수 호출시 this 가 가르켜야할 주체를 명시 할 수 있습니다. const foo= { value:1, addValue:function(n1,n2){ this.value += (n1+n2) } } const bar = { value:10 } person.addAge.apply(bar, [1,3]); // 14 person.addAge.call(bar,10) // 20 위와 같이 foo 객체에 소속된 addAge를 사용할때 this.에 해당하는 주체를 bar로 변경시켜준것입니다. call과 apply의 차이점은 두번째 인수로 arguments 배열을 넘겨준다는 것이다. 가변인수를 사용할때 사용하면 됩니다. bind는 함수를 객체에 바인딩 할 때 씁니다. const monkey={ ..

window.onpopstate 같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다. history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의한다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. 그리고 그 이벤트는 같은 document에서 두 히스토리 엔트..

이번 포스트에서는 전개 연산자(spread operator)를 이용해서 간편하게 객체를 복사하는 방법에 대해 알아보겠습니다. 배열의 복사는 [...arr]를 이용하면 됩니다. const arr = [1, 2, 3]; const cp = [...arr]; cp.push(4); console.log(arr); // [1, 2, 3] console.log(cp); // [1, 2, 3, 4] 객체의 복사는 {...obj}를 이용하면 됩니다. const obj = { a: 1, b: { c: 2 } }; const cp = {...obj}; cp.a = 2; cp.b.c = 3; console.log(obj); // {a: 1, b:{c: 3}} console.log(cp); // {a: 2, b:{c: 3}}..

자바스크립트에서 비디오 요소가 현재 재생 중인지 여부를 확인할 수 있는 방법입니다. var video = $('#myVideo').get(0); if (video.paused) { video.play(); } else { video.pause(); } 자바스크립트로 할 때는 var video = document.getElementById('myVideo'); if (video.paused) { video.play(); } else { video.pause(); }

var divs = $('div > div'); for(var i = 0; i < divs.length; i+=3) { divs.slice(i, i + 3).wrapAll(''); }

무음인 경우 항상 자동 재생이 가능 video요소에 muted 속성을 추가 하거나, muted 값을 true 로 설정한 경우는 자동 재생이 가능합니다. 비디오 파일에 오디오 트랙이 없는 경우 일부 브라우저(Safari, Firefox)는 muted 여부와 별개로 자동 재생이 가능합니다. 무음 자동 재생 중에 스크롤 등으로 인해 비디오가 뷰포트 밖으로 나가는 경우, 일시 정지됩니다. 저전력 모드가 켜져있는 경우 유/무음 자동 재생 불가. (iPhone)

ES6 Defaults / Overrides Pattern Object.assign() 함수는 첫 번째 Object에 그다음 Object(들)을 병합해 주는 것으로서, 아래 코드를 아래와 같은 방법으로 작성할 수 있습니다. // Object.assign(target, ...sources) Object.assign([target 객체], [여러개의 객체] ) 첫 번째 인자는 target sources 오브젝트는 target 오브젝트에 병합 리턴값으로 target 오브젝트 반환 var defaults = { bar: 'no', baz: 'works!' }; function foo (options) { var settings = Object.assign({}, defaults, options), bar = s..

/* 3, 6, 9, 12 번째(3의배수) 배경변경 */ li:nth-child(3n){ background: red; } /* 10번째 부터 이후 모든 리스트 컬러변경 */ li:nth-child(n+10) { color: blue; } /* 1번째 부터 5번째 까지 배경변경 */ li:nth-child(-n+5) { background: green; } /* 15번째 부터 20번째 까지 배경변경 */ li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } /* 끝에서 부터 3번째 */ li:nth-last-child(3) { background: gold; } /* 홀수 */ li:nth-child(odd) { color: red; } /* 짝수 ..

삼항 연산자 사용 function Link({ href, target, children }) { return ( {children} ); } Spread 연산자 사용 const props = { title: 'bar' }; function Link({ href, target, children }) { if (target === '_blank') { props.rel = 'noopener'; } return {children}; } 객체 속성 조건문 function Link({ href, target, children }) { const condition = target === '_blank'; const props = { href, // using the ternary operator: ...( cond..

삼항 연산자 조건문 function App() { const [mood] = React.useState("happy"); const greet = () => alert("Hi there! :)"); return ( Say hi ); } if문 function App() { let disabled = true; const [mood] = React.useState("happy"); const greet = () => alert("Hi there! :)"); if ("happy" === mood) { disabled = undefined; } return ( Say hi ); } Spread 연산자 function App() { let required = false; let type = "password";..

Create React App(CRA) 에서 이모션 사용 시 아래와 같이 매번 jsx pragma 선언이 필요합니다. 이 코드를 제거하기 위해서는 바벨 설정이 필요합니다. /** @jsx */ import { css } from '@emotion/react' 하지만 기본적으로 CRA는 바벨 사용자 설정을 막아놓았습니다. 다음의 명령어를 수행하게 되면 숨겨져 있던 모든 설정들(All configurations, webpack, babel 설정 파일 등)과 패키지들이 가지는 의존성을 볼 수 있습니다. yarn eject 주의할 점은, 한번 eject를 수행하게 되면 이전 상태로 되돌아 갈 수 없습니다. craco는 Create React App Configuration Override의 약자로 eject를 ..

안드로이드 크롬에서 더보기 버튼으로 비동기로 데이터 추가 시 더보기 버튼을 누르면 스크롤 위치가 페이지 하단으로 이동되어 새로 추가된 아이템 목록 끝으로 보이는 스크롤 위치 이슈가 있었습니다. 또 다른 예로, sticky된 가로 스크롤 메뉴 -> 다른 메뉴 클릭 -> 아이템 리셋 후 비동기로 새로운 데이터 추가 시 이전에 보고 있던 스크롤 위치가 그대로 유지되어 처음 아이템 부터 보이지 않는 이슈 입니다. Chrome 56 부터 scroll anchoring 기능을 추가했으며, 이는 뷰포트에서 스크롤 위치를 고정시키고 뷰포트 외부의 콘텐츠가 계속 로드 되더라도 사용자가 동일한 위치를 볼 수 있도록 도와줍니다. 웹의 다양한 상황으로 인하여 scroll anchoring이 오작동 하는 경우가 발생할 수 있으..

position: sticky 값을 사용하면 스크롤 시 특정 지점에 도달하면 요소(element)를 고정 할 수 있습니다. sticky가 제대로 고정 되지 않을 경우 아래 2가지 값을 확인해야 합니다. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right) 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우 부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다. 이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다. .container { displa..

웹접근성의 개념에 대해서 널리 알려지지 않았을 때 간혹 디자이너분의 요청으로 포커스 라인을 제거하기 위해 아래와 같이 :focus의 outline을 지워버리는 방식을 사용합니다. a, input, button { outline: 0; } :focus { outline: none; } 이제 포커스가 더이상 화면에 표시되지 않지만, 키보드만으로 브라우저를 조작해야 하는 사람의 경우 현재 초점을 알 수 없기 때문에 문제가 됩니다. 절대 아무런 대체재 없이 외곽선을 지워버리면 안됩니다. 시각장애나 신체장애를 가진 사용자는 키보드만 이용해 웹사이트를 이용 할 경우 키보드로 선택한 현재 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focuis-visible이란 가상 클래스(pseudo cla..

!!연산자를 사용하여 boolean 변환 function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // true var emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false +연산자를 사용하여 숫자 변환 function toNumber(strNumber) { return +strNumber; } console.l..