QA 가 끝난 프로젝트를 Master에 배포하고나면, 그동안 작업을 위해 생성했던 브랜치들을 정리 그러면 개인 로컬 Source Tree 에서도 Remote Origin 의 상황을 똑같이 갱신해줘야 하는데.. 서버 Remote 에서는 branch 를 삭제했는데 SourceTree 에서는 삭제된 branch 가 그대로 노출되고있다. 2. Menu > Repository > Fetch... 3. Check "Prune tracking branches no longer present on remote(s)" 4. Click "OK" 체크 한 다음 OK 하면 remote에 있는 브랜치들 갱신 본인이 직접 자신의 pc 에서 원격 Repository 를 삭제한 경우는 상관없으나 같은 원격 Repo를 바라보고있는 다..

iframe 내에서 alert, confirm, prompt 띄울 경우 오류가 발생 오류 내용: A different origin subframe tried to create a JavaScript dialog. This is no longer allowed and was blocked. See https://www.chromestatus.com/feature/5148698084376576 for more details. 현재 크롬 같은 버전이라도 서브 버전에 따라 누구는 재현되고 안되고 할 수 있음 하지만 기능 제거는 확정된 사안인 만큼 가급적 선행 조치 필요함 Remove alert(), confirm(), and prompt for cross origin iframes - Chrome Platfor..

grid는 그리드 기반의 레이아웃을 위한 강력한 css 모듈 중 하나입니다. flexbox와 마찬가지로 그리드 항목의 소스 순서는 중요하지 않습니다. 미디어쿼리를 사용하여 그리드를 쉽게 재정렬할 수 있습니다. 크게 그리드 컨테이너 속성과 자식 요소인 그리드 아이템 속성으로 구분할 수 있습니다. 그리드 컨테이너 속성 display 엘리먼트를 그리드 컨테이너로 지정하고, 새로운 그리드 형식 컨텍스트로 설정합니다. grid: 블록 레벨의 그리드를 생성합니다. inline-grid: 인라인 레벨의 그리드를 생성합니다. .container { display: grid | inline-grid; } grid-template-columns, grid-template-rows 공백으로 구분된 값 목록으로 그리드의 열과..

HTML 이란? HyperText Markup Language의 약자입니다. 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어입니다. HTML DTD 웹 기술의 진보에 따라 HTML도 변화 되는데, 변화에 따라 브라우져가 HTML을 해석하는 방식도 변화했어요. 이를 극복하기 위해서 브라우져에게 해당 HTML이 어떤 표준에 따른 것인지를 알려주는 것을 DTD(Document Type Definition)이라고 합니다. DTD는 문서의 제일 위에 위치해요. Hello, HTML5! HTML 보일러 플레이트 보일러 플레이트는 프로그래밍에서 어떤 일을 하기 위해 꼭 작성해야하는 코드를 말합니다. 최상위 태그로 을 사용해요. 그 하위에 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미..

구분해야 하는 이유 HTML의 태그는 크게 블록 요소(block element)와 인라인 요소(inline element)로 나누어 집니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 "왜 적용이 되지 않지?" 라는 상황이 발생할 수 있습니다. 예를 들면, 인라인 요소는 height가 적용되지 않는다. 인라인 요소는 width가 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록 요소는 text-align이 적용되지 않는다. 블록 요소 HTML5의 블록 요소 종류는 다음과 같습니다. address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption..

URI는 리소스를 식별하기 위해 문자열 전반을 나타내는데 비해, URL은 리소스의 장소(네트워크 상의 위치)를 나타냅니다. 즉 URL은 URI의 서브셋입니다. URI(Uniform Resource Identifiers) 리소스 식별자 https://www.google.co.kr URL(Uniform Resource Locator) 웹 주소 ftp://ftp.is.co.za/rfc/rfc1808.txt http://www.ietf.org/rfc/rfc2396.txt Idap://[2001:db8::7]/c=GB?objectClass?one mailto:John.Doe@example.com news:comp.infosystems.www.servers.unix tel:+1-816-555-1212 telnet:..

Code files 일반적으로 3가지의 파일 형식으로 구성됩니다. 1. HTML 웹사이트의 구조를 나타냅니다. 집짓기와 비교해본다면, 벽돌, 화장실, 창문 같은 것들입니다. 웹사이트로는 버튼, 텍스트, 이미지 등이 됩니다. 2. CSS 웹사이트의 스타일을 나타냅니다. 집짓기와 비교해본다면, 가구의 배치, 벽지의 모양 등의 인테리어라고 생각해주세요. 버튼의 색상, 크기, 텍스트의 폰트 등이 됩니다. 3. JS 웹사이트의 기능을 나타냅니다. 집짓기와 비교해본다면, 배수관을 통해 물이 흐르고, 스위치를 켜겨나 플러그를 꽂으면 전기를 사용할 수 있게 하는 것입니다. 버튼을 눌렀을 때 실제 동작하게 만드는 일을 하죠. 웹사이트에 생명을 불어넣어줍니다. 브라우저 URL 입력 후 이루어지는 일들 URL parsing..

제이쿼리에서 엘리먼트에 정의된 이벤트를 확인 할 수 있습니다. var events = $._data(element, 'events'); 아래 코드를 실행하면 해당 버튼에 어떤 이벤트가 있는지 확인할 수 있습니다. This is demo text $("#demo").click(function() { console.log("Does event exists? - " + hasEvents); }); var events = $._data($("#demo")[0], "events"); var hasEvents = (events != null);

기본 윈도우 캡쳐 기능은 웹페이지의 스크롤 아래 부분은 캡쳐 할 수 없어서 별도의 캡쳐도구를 사용하거나 크롬 확장프로그램을 설치해야 했는데 크롬 브라우저에서 별도의 캡쳐 프로그램 설치 없이 전체화면을 캡쳐 해주는 유용한 기능이 있습니다. 사용방법은 아래와 같습니다. 크롬 브라우저에서 전체 페이지를 캡쳐 할 사이트에 접속 후, 개발자 도구를 활성화 시킵니다. 개발자도구 단축키 - F12 또는 윈도우 단축키 : Ctrl + Shift + I 맥 단축키 : Command + Option + I 개발자 도구에서 우측 상단에 확장메뉴 버튼을 클릭한 후, Run Command를 실행합니다. Command 창이 실행이 되면 입력창에 Screenshot을 입력하면 아래와 같은 옵션을 볼 수 있습니다. 웹페이지 전체화면..

E:not(S) - S가 아닌 E 요소를 선택 E:first-of-type - E 요소 중 첫 번째 E를 선택 (E 요소의 순서만 계산에 포함됨) E:last-of-type - E 요소 중 마지막 E를 선택 (E 요소의 순서만 계산에 포함됨) 첫번째 자식 요소를 제외한 나머지 요소에 컬러값을 적용합니다. ul li:not(:first-of-type) { color: red; } 마지막 자식 요소를 제외한 나머지 요소에 아래에 여백을 적용합니다. ul li:not(:last-of-type) { margin-bottom: 20px; }

자바스크립트를 사용하여 특정 요소가 DOM에 있는지 확인하는 방법입니다. querySelector는 특정 요소를 찾을 수 없을 때 null값을 리턴 합니다. var noElem = document.querySelector('.elem'); console.log(elem); // Logs "null" // 해당하는 요소가 페이지에 있으면 if (document.querySelector('.elem') !== null) { console.log('The element exists'); } else { console.log('The element does not exists'); } querySelectorAll은 일치하는 모든 요소의 NodeList를 반환합니다. NodeList는 배엵 객체이므로, 반환된 ..

HTML5에서는 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있습니다. 이를 커스텀 데이터 속성(custom data attributes) 이라고 부릅니다. data-* 를 앞에 붙여서 속성명을 지정하고 값을 부여하면 됩니다. Microsoft Google Facebook 자바스크립트에서 커스텀 데이터 접근하기 dataset 객체를 통해 data 속성 값을 가져오기 위해서는 속성 이름의 data-뒷 부분을 사용합니다. var elements = document.querySelectorAll('ul > li'); elements.forEach(function(elem) { console.log(elem.dataset.company); }); jQuery에서 접근하기 jQuery에서는 data()..

자바스크립트에서 배열의 요소 앞에 추가(Prepend)하거나 뒤에 추가(Append)하는 방법입니다. 대부분 배열 마지막에 요소를 추가하는 방법을 알고 있지만 처음에 요소를 추가하는 방법을 잘 모릅니다. 또 한 번에 여러 요소를 추가하는 방법을 알아 봅시다. const fruits = ["🍎", "🍌", "🍒"]; // push로 요소를 마지막에 추가 fruits.push("🍉"); console.log(fruits); // ["🍎", "🍌", "🍒", "🍉"]; // unshift로 요소를 처음에 추가 fruits.unshift("🍆"); console.log(fruits); // ["🍆", "🍎", "🍌", "🍒", "🍉"]; // 한 번에 여러 항목을 추가 fruits.push("🍍", "🍊"); ..

javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다. 그러나 숫자는 생각대로 정렬되지 않습니다. 자바스크립트에서 배열을 정렬 할 때 기본적으로 요소를 문자열로 변환합니다. 그런 다음 UTF-16 코드 포인트를 비교하여 요소를 정렬합니다. 숫자의 경우 예기치 않은 순서가 발생할 수 있습니다. 따라서 기본 동작을 변경하고 Array.sort메서드에 함수를 전달합니다. 항상 한 번에 두 요소를 비교하여 작동합니다. 결과가 0보다 작으면 a먼저 표시됩니다. 결과가 0보다 크면 b먼저 표시됩니다. 원본 배열인 numbers가 정렬이 되고, 리턴하는 값 또한 원본 배열인 numbers을 가리키고 있음에 유의하세요. const numbers = [15, 52, 23, 11, 9]; // 오..

자바스크립트에서 최소 또는 최대 값을 찾아야하는 경우 아마도 Math.min및 Math.max을 사용할 수 있습니다. 전개연산자 spread operator(...)를 이용하면 전체 배열에서 최소값과 최대 값을 쉽게 확인할 수 있습니다. const priceHistory = [450, 500, 330, 600, 910]; // 최소값 const minimumPrice = Math.min(...priceHistory); console.log(minimumPrice); // 330 // 최대값 const maximumPrice = Math.max(...priceHistory); console.log(maximumPrice); // 910

every, some 메서드는 배열을 순회하면서 배열의 요소들이 특정 조건을 만족하는지 검사하는 메서드입니다. every, some 메서드는 반환 값이 결정되면 배열 순회를 중단 합니다. Array.some - 특정 조건과 일치하는 요소 Array.every - 모든 요소가 있는지 확인 every, some 메서드의 차이는 every는 배열의 모든 값이 조건을 만족해야, some은 일부만 만족해도 true를 return 합니다. every() callback함수가 false을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 callback 함수 실행 해당하는 요소를 발견한 경우 every는 즉시 false를 반환 빈 배열에서 호출하면 true 반환 let data = [1, 3, 5] ..

객체 { 'a': 1, 'b':2 } 있을 때 key-value를 뒤집어서 { 1: 'a', 2: 'b' } 이렇게 반대로 만드는 방법 입니다. let cities = { Lyon: 'France', Berlin: 'Germany', Paris: 'France' }; let countries = Object.keys(cities).reduce((acc, k) => { let country = cities[k]; acc[country] = [...(acc[country] || []), k]; return acc; }, {}); // 한줄로 // let countries = Object.keys(cities).reduce((acc, k) => (acc[cities[k]] = [...(acc[cities[k]..

자바스크립트 데이터를 다룰 때 객체에서 키에 해당하는 값이 몇 개 있는지 빈도수 확인하여 새로운 객체로 반환합니다. 아래의 경우 사용자들의 연령때가 어떻게 되는지 확인 할 수 있는 코드 입니다. let users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let groupByAge = users.reduce((acc, it) => ({ ...acc, [it.age]..

배열 합집합 전개연산자 spread operator(...)와 Set을 사용하여 두 배열을 병합하고 모든 중복된 요소를 제거 합니다. let arrA = [1, 4, 3, 2]; let arrB = [5, 2, 6, 7, 1]; [...new Set([...arrA, ...arrB])]; // returns [1, 4, 3, 2, 5, 6, 7] 배열 교집합 filter와 includes을 사용하여 두 배열에 포함된 동일한 요소를 확인 할 수 있습니다. includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 boolean 값으로 반환합니다. let arrA = [1, 4, 3, 2]; let arrB = [5, 2, 6, 7, 1]; arrA.filter(it => arrB.includes(..

간단한 검색 (case-sensitive) filter() 함수는 인자로 제공되는 함수에 의해 test 를 통과한 모든 요소를 새로운 array로 만들어 줍니다. let users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let res = users.filter(it => it.name.includes('oli')); console.log(res); // [] l..

Set() 자바스크립트에서 Set 객체를 이용하면 간단하게 중복없는 데이터를 표현할 수 있습니다. 중복값이 있는 배열을 Set 객체로 만들어서 중복을 제거한 후, Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환합니다. let arr = [3, 1, 3, 5, 2, 4, 4, 4]; let uniqueValues = [...new Set(arr)]; console.log(uniqueValues); // [3, 1, 5, 2, 4] reduce() Array.includes(value) : value가 Array배열에 존재하는지 판단해 true, false를 반환합니다. let arr = [3, 1, 3, 5, 2, 4, 4, 4]; arr.reduce((acc,curr)..

css 변수란? 사용자 지정 변수로 CSS의 속성을 미리 정의해놓고, 여러 곳에서 사용할 수 있는 변수를 의미합니다. 웹사이트에서는 보통 많은 양의 CSS를 가지고 있습니다. color나 size 등의 많은 값이 반복적으로 사용이 됩니다. 이때, CSS변수를 사용해주면 반복되는 코드를 줄일 수 있습니다. 기본 문법 변수는 두개의 붙임표, (--)와 함께 사용 변수는 대소문자 구분, --my-bg-color와 --My-bg-color는 서로 다른 속성으로 처리 지정 element 해당 element에만 css 변수값을 적용할 거라면, 위와 같은 방법으로 사용해주시면 됩니다. element { --main-bg-color: red; } html 문서 전체 HTML 문서 전체에서 사용하려면 :root의 가상선..

matchMedia 자바스크립트에도 CSS의 미디어쿼리(Media Queries)와 같은 matchMedia 메서드가 존재합니다. CSS에서 사용하는 미디어쿼리 조건을 자바스크립트에서 그대로 사용할 수 있습니다. if (matchMedia("screen and (min-width: 1024px)").matches) { // 1024px 이상에서 사용할 스크립트 } else { // 1024px 미만에서 사용할 스크립트 } Breakpoint에 도달했을 때 처리 CSS처럼 사용자가 화면을 리사이징할 때 미디어 쿼리의 Breakpoint에 도달할 때 처리해야되는 경우가 있습니다. document view의 크기가 변경될 때 발생하는 resize 이벤트로 처리할수도 있겠지만 좀 더 우아한 방법으로 처리할 수 ..

브라우저의 현재 크기(width, height)를 구하고 싶은 경우 사용할 수 있는 방법들입니다. var size = { width: window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight }; screen 객체로 화면 크기 구하기 screen은 브라우저 정보를 가져오는 객체입니다. screen 객체의 속성은 아래와 같습니다. screen.width // 화면(모니터 해상도)의 너비 screen.availWidth // 모니터 화면의 작업 표시줄을 제외한 너비 screen.height // 화면(모니터 해상도)의 높이 screen.availHeight // 모니터 화면의 작..

아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다. Same-Domain Iframes 동일한 도메인 iframe의 경우 상위 페이지에서만 코드 변경이 필요합니다. iframe 페이지에는 코드 변경이 필요하지 않습니다. iframe이 로드된 후 contentDocument.body.scrollHeight 속성은 전체 높이를 가져 옵니다. contentDocument.body.scrollWidth 속성은 전체 넓이를 가져 옵니다. Cross-Domain Iframes 크로스 도메인 iframe의 경우 iframe과 상위 페이지 모두 코드를 수정 해야합니다. iframe이 로드된 후 사..

기본적으로 반응형웹을 적용하기 위해서 먼저 HTML head 부분에 meta viewport를 설정해주어야 합니다. width=device-width: 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 초기 화면 배율 4개의 반응형 분기점 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-widt..

json 형식으로 데이터를 불러왔다거나 혹은 직접 배열안의 객체 구조를 만들어 데이터화 하여 사용할 때 특정 값을 가진 객체를 찾아서 그 객체가 가진 다른 값을 가져올 때 사용합니다. var people = [ { "name": "bob", "dinner": "pizza" }, { "name": "john", "dinner": "sushi" }, { "name": "larry", "dinner": "hummus" } ]; 이런 식으로 배열안에 객체가 있다면 여기서 dinner가 sushi 인 사람의 이름을 가져올 때는 아래와 같습니다. var men = people.filter(function (person) { return person.dinner == "sushi" }); console.log(men..

다음과 같은 방법을 통해 자바스크립트로 문자열의 필요한 값을 추출할 수 있습니다. var myString1 = "Hello,World" 문자열의 특정위치를 찾기위한 Hello,World의 위치값을 표기하였습니다. 0H1e2l3l4o5,6W7o8r9l10d11 // 1. substring([시작위치], [종료위치]); var myString1 = "Hello,World" myString1 = myString1.substring(0,5); console.log(myString1); // output Hello // 2. substr([시작위치], [길이]); var myString1 = "Hello,World" myString1 = myString1.substr(6,5) console.log(myString..

아래 코드와 같이 정규식을 사용하면 마지막 쉼표와 그 뒤 공백을 제거 할 수 있습니다. var str = "This, is, test,"; str = str.replace(/,\s*$/, ""); // output "this, is , test" / 정규 표현식 시작과 끝 , 쉼표 일치 \s 공백문자 * 0 이상인 경우 $ 문자열의 끝을 의미 마지막 문자를 자르는 방법 var strNumber = "3623,3635,"; strNumber.substring(0, strNumber.length - 1); // slice strNumber.slice(0,-1); // map var arrData = strNumber.split(','); $.map(arrData, function(value, i) { ret..

요소에 추가 할 수 있는 속성은 version, xmlns, xmlns:xlink, viewbox, width, height 속성이 설정됩니다. ... 하지만 인라인 SVG 코드의 경우, 웹 브라우저에서 렌더링 하는데 다음 속성은 필요하지 않습니다. 불필요한 속성은 제거해 코드를 정리하세요. (DTD, version, xmlns, xmlns:xlink, xml:space) version xmlns xmlns:xlink 그러므로 인라인 SVG를 사용할 경우, 아래 코드처럼 간결하게 사용할 수 있습니다. ... SVG의 너비(width), 높이(height)를 설정하는 방법은 요소와 동일하며 viewBox 속성은 값으로 min-x, min-y, width, height숫자 배열 값을 전달 받습니다. 이 값은..