드리프트의 코-자-경

지금 쯤 깨달았을지 모르지만, 우리의 DOM은 거대한 나무처럼 보입니다. 위험하게 나뭇가지에 매달려 있고 뾰족한 것들을 피하려고 노력하는 거대한 나무입니다. 좀 더 기술적으로 이해하기 위해 DOM의 요소는 브라우저에서 최종적으로 보게 될 내용을 정의하는 계층 구조로 배열됩니다. 이 계층은 HTML 요소를 구성하는 데 사용됩니다. 또한 CSS 스타일 규칙이 어떤 스타일에 어떤 스타일을 적용할지 이해하는데도 사용됩니다. 자바 스크립트 관점에서 이 계층 구조는 약간의 복잡성을 추가합니다. DOM에서 현재 우리가 어디에 있고 어디에 있어야 하는지 알아내기 위해 상당한 시간을 할애해 공부해 보겠습니다. 주변에서 길 찾기 요소를 찾아서 멋진 작업을 수행하기 전에 먼저 요소가 있는 위치에 도달해야합니다. 이 주제를 ..

콘텐츠의 스타일을 지정할 때 가장 일반적인 방법은 스타일 규칙을 만들고 해당 selector가 그 요소를 대상으로 지정하는 방법입니다. 일반적인 스타일 규칙은 다음과 같습니다. .batman { width: 100px; height: 100px; background-color: #333; } 위 스타일 규칙을 적용받는 HTML 요소는 다음과 같이 지정합니다. 어떤 웹 페이지에서든 우리가 보는 모든 것을 스타일링하기 위한 스타일 규칙을 한개에서 여러 개까지 볼 수 있습니다. 하지만 위와 같은 방법이 CSS를 사용하여 콘텐츠 스타일을 지정하는 데 사용할 수 있는 유일한 방법은 아닙니다. 같은 작업을 수행하는 여러 가지 방법이 없다면 HTML이 아닙니다! 인라인 스타일을 차치하고 볼때, CSS 스타일링을 컨트..

이번 강좌에서는 지금까지 배운 지식을 바탕으로 JavaScript를 사용하여 DOM 요소에 액세스하고 수정하는 기본적인 방법에 대해 알아볼 예정입니다. 이 시점에서 여러분은 DOM이 무엇인지 알 것입니다. querySelector 및 querySelectorAll을 사용하여 요소를 찾는 방법도 살펴 보았습니다. 다음은 찾은 DOM 요소를 수정하는 방법을 배우는 것입니다. 앞으로는 JavaScript를 사용하여 일부 요소의 텍스트를 변경하거나, 이미지를 다른 것으로 교체하거나, 문서의 한 부분에서 다른 부분으로 요소를 이동하거나, 인라인 스타일을 설정하거나 등의 DOM 수정에 대해 배우겠습니다. DOM 요소는 객체입니다 JavaScript를 사용하여 브라우저에 표시되는 내용을 수정하는 기능은 하나의 주요 ..

이전 강좌에서 봤듯이 DOM은 HTML 문서에 존재하는 모든 요소로 구성된 트리와 같은 구조 일뿐입니다. 세부 사항은 중요하지 않습니다. 중요한 것은 데이터에 액세스하고 데이터를 읽거나 수정하려는 모든 HTML 요소가 주변에 떠 있다는 것입니다. HTML 요소를 찾는 방법에는 여러 가지가 있습니다. 단순한 방법은 바로 나무와 같은 구조로 배열되어 있어 간단히 말해 위아래로 움직여 무언가를 찾는 방법입니다. 이번 강좌에서는 모든 DOM 검색 요구의 95 %를 충족시키는 querySelector 와 querySelectorAll이라는 두 가지 내장 함수를 사용하는 방법을 배우게됩니다. querySelector 맛보기 querySelector 및 querySelectorAll의 기능을 설명하려면 다음 HTML..

안녕하세요? 지난시간에 라즈베리파이로 서버 구축하는 방법에 대해 알아 봤는데요. https://cpro95.tistory.com/135 라즈베리파이로 NAS 서버 만들기 안녕하세요? 라즈베리파이로 여러 가지를 만들 수 있는데 그중 가장 쉬운 게 아마 서버 구축일 겁니다. 보통 집에 왜 라즈베리파이 서버를 구축하려고 하냐면 여러 가지 이유가 있겠지만 외부에 cpro95.tistory.com 2편에서는 서버의 가장 기본인 FTP에 대해 알아 보겠습니다. 일단 우리가 구축한 서버는 모니터와 키보드를 연결 안한 상태로 전원케이블만 연결해 놓고 어디 안보이는 곳에 나둬도 됩니다. 서버니까 랜선은 연결해놔야 겠죠. 저는 라우터 옆에 안보이는 곳에 나둡니다. 1편에서 SSH 서버를 구축했기 때문에 SSH로 본인 컴퓨..

안녕하세요? 라즈베리파이로 여러 가지를 만들 수 있는데 그중 가장 쉬운 게 아마 서버 구축일 겁니다. 보통 집에 왜 라즈베리파이 서버를 구축하려고 하냐면 여러 가지 이유가 있겠지만 외부에서 나만의 FTP 서버로 자료를 업, 다운할 수 있으며, 스마트 TV랑 연동해서 라즈베이파이에 물린 외장하드에 있는 동영상이나 음악을 스마트 TV로 재생하기도 합니다. 또한, 간단한 NodeJS 서버를 구축해서 테스트해 볼 수 있고, 할 수 있는 일은 무궁 무궁합니다. 저의 집안 인터넷 흐름도를 먼저 살펴보면 먼저, 저는 KT 인터넷을 쓰고 있으며(인터넷은 KT가 제일 빠릅니다. SK 브로드밴드는 해외망 속도가 영!) Wifi는 ASUS RT-AC68U 을 쓰고 있습니다. 전체적인 구조는 KT 인터넷이 아파트 외부단자에서..

지금까지 우리는 자바스크립트만 따로 살펴보았습니다. 기본 기능에 대해 많은 것을 배웠지만 HTML, CSS 없이 순전히 코드만 작성했는데요, 실제 웹 개발에서는 전혀 딴 세상입니다. 다음 섹션에서는 DOM(Document Object Model)으로 알려진 신비한 데이터 구조 및 프로그래밍 인터페이스에 대해 알아봅시다. 이것이 무엇인지, 왜 유용한 지, 그리고 향후 튜토리얼에서 수행할 모든 작업과 어떻게 연결되는지 배우게 됩니다. HTML, CSS, Javascript 가 하는 일 DOM이 무엇인지 알아보기 전에 이미 알고 있는 몇 가지를 빠르게 살펴 보겠습니다. 우선, HTML 문서에 넣는 내용은 HTML, CSS 및 JavaScript를 중심으로 구성됩니다. 브라우저에 표시되는 내용을 구축하는 데 있..

이번 시간에는 세트(Set)에 대해 알아 보겠습니다. 여러 데이터를 저장할 때 아마 배열이 가장 먼저 떠오를 것입니다. 배열은 꽤 오랫동안 사용되어져 왔고 또한 매우 유연하며 사용하기 쉽게 만드는 많은 특성이 있습니다. 지난 몇 년 동안 JavaScript는 데이터 모음을 저장하는 또 다른 방법을 얻었습니다. 그 방법은 세트(Set)로 알려진 배열 모양의 방법을 통하는 것입니다. 표면적으로 배열과 세트는 매우 비슷해 보입니다. 그러나 세트는 배열과 다르게 보이는 많은 특성을 가지고 있습니다. 가장 큰 특징은 중복 값의 저장 허용 여부입니다. 세트에는 유니크한 아이템만 저장할 수 있습니다. 우리가 원하는 것을 저장하기 위해 세트를 사용할 수 있습니다. 그러나 배열과는 달리 우리는 그 항목을 한 번만 저장할..

데이터 저장, 검색 또는 전송과 관련하여 사용할 수 있는 파일 형식과 데이터 구조가 많이 있습니다. 처리하는 다양한 종류의 데이터를 처리하기 위해 텍스트 파일, Word 문서, Excel 스프레드 시트, zip 파일 등을 사용했을 것입니다. 웹 세계에는 다른 모든 것보다 우위를 차지하는 하나의 형식이 있습니다. 이 형식은 JSON (JavaScript Object Notation의 약자)으로 알려져 있습니다. 이번 편에서는 JSON 객체를 만드는 모든 방법에 대해 알아볼 것입니다. 우리는 그 안에 무엇이 들어가는지, 그리고 값을 읽는 방법에 대해 자세히 살펴볼 예정입니다. JSON 이란? JavaScript에서는 "객체 리터럴 문법"을 사용하여 객체를 정의하는 방법이 있습니다. let funnyGuy =..

누군가는 세계의 미스터리 중 하나가 바로 자바스크립트에서 null과 undefined를 이해하는 것이라고 했습니다. 지금까지의 예제에서 보듯이 null과 undefined는 코드 여러 곳에 나타났었고 아마 우리는 실행도 해봤을 겁니다. null 및 undefined를 이해하는 것은 기괴하지 않고 다만 지루할 뿐입니다. 그래도 조금만 참고 이해 볼까요? Null null부터 알아 보겠습니다. null 키워드는 JavaScript 세계에서 특별한 역할을 합니다. null은 "값이 없다"는 명시적인 정의입니다. 다른 사람들이 작성한 코드를 살펴본 적이 있다면 null이 꽤 많이 나타나는 것을 볼 수 있습니다. null의 장점은 확실성에 있기 때문에 꽤 유용합니다. 변수에 오래된 값이나 정의되지 않은 값을 저장..