프로그래밍 공부하기

태그 안의 내용에 접근하는 사용하는 속성은 innerHTML, innerText, textContent가 있다. See the Pen Load innerText/textContent by ImHyeLim1209 (@imhyelim1209) on CodePen. 1. innerHTML innerHTML은 태그를 포함한 내용이다. 태그를 포함한 내용을 가져오거나 아래와 같이 태그가 포함된 내용으로 바꿀 때 사용한다. textContent에 비해 느리고 보안 위협이 있다. $0.innerHTML = 'link' 2. innerText 렌더링된 텍스트를 보여준다. 즉, 태그가 제외된 문자열만 보여준다. 태그는 인식되며, 숨겨진 요소(display:none)는 보여주지 않는다. 잘 사용하지 않는 속성이다. 3. ..

1. CDN이란 CDN(Content Delivery Network)이란 콘텐츠를 효율적으로 전달하기 위해 분산된 서버에 데이터를 저장해 사용자에게 전달하는 시스템이다. 예를 들어 집에서 유튜브 영상을 시청한다 생각해보자. 미국 본사에 있는 서버에서 동영상 데이터를 가져오는 것보다는 우리나라에 서버에서 영상 데이터를 가져오는 것이 더 빠르다. 이렇듯 같은 데이터를 가진 서버를 여러 장소에 분산시키고 데이터 요청이 왔을 때 요청 위치로부터 가장 가까운 서버에서 데이터를 전송해주는 것이다. 이를 통해 데이터를 효율적으로 제공할 수 있으며 한꺼번에 많은 사용자가 몰림으로 인한 병목현상도 방지할 수 있다. 2. Javascript Library와 CDN 프로그래밍에서 Library란 이미 구현된 코드모음이다. ..

1. DocumentFragment DocumentFragment 인터페이스는 부모가 없는 아주 작고 경량화된 document 객체이다. DocumentFragment에 문서 구조의 일부를 저장하여 사용한다. document와 다른 점은 활성화된 문서 트리 구조의 일부가 아니기 때문에 DocumentFragment를 변경해도 문서에는 영향을 미치지 않으며 성능에도 영향이 없다. template 태그의 HTMLTemplateElement.content 속성에도 DocumentFragment가 포함되어 있다. 2. DocumentFragment 속성과 메소드 DocumentFragment는 부모인 Node와 ParentNode의 속성과 메소드를 상속받고있다. 따라서 children, querySelector..

1. DOM의 정의 DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 Interface이다. DOM은 문서를 프로그래밍 언어로 접근하고 조작가능하게 하는 모델이다. JavaScript DOM을 통해 HTML요소에 접근하고 조작할 수 있다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 2. DOM과 웹 브라우저 DOM은 작성한 HTML가 웹 브라우저에 의해 파싱된 것이다. 즉, 웹 브라우저에 DOM이 포함되어있는 것이다. 따라서 DOM은 웹 브라우저의 최상위 객체인 window의 하위 객체이며 window.document로도 HTML에 접근 가능하다. Javascript에서 window 객체를 사용한다는..

1. filter filter는 말 그대로 배열의 요소들을 걸러주는 역할을 한다. filter의 경우 내부함수의 인자로 사용 방법은 다음과 같다. arr = [10, 11, 12, 13, 14]; arr.filter(function(element){ return element > 12; //값이 12초과인 요소만 }); //[13, 14] arr.filter(function(element, index){ return index % 2 === 0; //index가 짝수인 요소만 }); //[10, 12, 14] arr.filter(function(...params){ return params[2][2] > params[0]; //arr[2]보다 작은 값인 요소만 }); //[10, 11] filter의 인..

seesparkbox.com/foundry/naming_css_stuff_is_really_hard CSS Class Names to Prevent Refactoring Limit gross refactoring tomorrow by picking class names that are less likely to change. Ethan shares three naming options to help cushion the blow of future design changes. seesparkbox.com 코딩을 하면서 가장 어려운 것 중 하나는 이름짓기이다. C#, Java, Javascript 등의 언어의 변수, 함수 등의 이름짓기는 어느정도 아는 지식이 있지만 CSS의 class와 id는 무엇을 기준으..

1. //연산 //은 나눈 값을 정수로 돌려주는 연산자이다. 처음에는 /연산을 한 후 integer으로 형변환(소수점 이하 버림)하여 반환하는 줄 알았다. 그러나 Python에서 //연산은 나눈 값에 내림을 취하므로 예상과는 다른 결과가 나온다. -5 / -4 #-1.25 int(-5 / -4) #-1 예상결과 -5 // -4 #-2 실제결과 2. %연산 나눗셈을 연산으로 공식으로 일반화하면 다음과 같다.(a: 잿수, d:피젯수, q: 몫, r:나머지) a/d = q...r a = qd + r %연산을 위한 몫을 계산할 때 Python의 경우 값에 내림을 취하고, C++, Javascript 등은 버림(≒형변환)을 취하므로 음수 %연산은 python의 결과와 C++, javascript 등의 언어의 결과..

1. 구글 폰트 사이트에서 원하는 폰트를 찾는다. fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 폰트를 선택한 후 Select this style을 선택한다. 3. 상단 우측의 사각형 버튼(View your selected familes)을 눌러 우측에 Selected Family 메뉴가 보이게 한다. 4. Use on the web의 링크와 CSS를 복사하고 링크는 html 파일에, CSS는 css파일에 넣어 사용한다.

오늘 CSS 작업을 하던 중 last-child가 생각대로 작동하지 않는 상황을 발견하였다. 해당 요소가 문제가 있나 싶어서 nth-child()로 선택을 했더니 이건 또 선택이 됐다. 이를 검색해보니 다음과 같은 결론을 얻었다. "마지막 자식 아래에 또다른 요소가 존재한다면 last-child는 사용할 수 없다." 이 상황을 코드로 나타내면 다음과 같다. See the Pen yLaXMRK by ImHyeLim1209 (@imhyelim1209) on CodePen. a:last-child는 a 태그의 마지막 자식 즉 Last Tag 부분이 #00ff00 색으로 바뀔 줄 알았지만 실제로는 동작하지 않았다. a 태그 아래에 div 태그가 존재하기 때문이다! a태그의 마지막 부분을 선택하기 위한 해결방법은..

호이스팅은 Javascript의 특징으로 함수선언 혹은 변수선언을 위로 끌어올린다는 의미이다. 즉, 코드가 내 의도와 다르게 실행될 수 있다는 의미이므로 호이스팅이 되는 코드를 작성하는 것은 지양해야 한다. 1. 변수 호이스팅 function foo() { console.log(a); // undefined var a = 100; console.log(a); // 100 } foo(); 위의 코드에서 변수 a는 첫 번째 콘솔로그 출력 때 선언되어있지 않으므로 오류가 나야한다. 그러나 호이스팅으로 인해 console.log(a) 위에 var a; 라는 변수 선언문이 있는 것처럼 실행이 되어 결과는 undefined가 나온다. function foo2() { console.log(a); // Referenc..