화성갈끄니까아

🤷🏻‍♀️ 시작하기 전에 앞서... ✏️ 우리는 일상생활 뿐만 아니라 코드를 짜면서 같은 자료형들을 그루핑(grouping)하는 작업을 많이 하고 있을 것이다. 프로그래밍적으로 그루핑할 경우에는 배열이라는 것을 흔히 많이 들으면서 사용해 왔다. 배열뿐만아니라 리스트라는 단어도 듣는데 그때마다 배열이라는 것이 있는데 리스트라는 단어를 왜 사용할까? 어떠한 차이점이 있지? 에 대한 호기심이 커졌다. 따라서 배열과 리스트에는 어떠한 차이점이 존재하는지, 각자 어떠한 것을 정의하길래 다른 것인지 한번 알아보도록 하자! 💁🏻‍♂️ 배열(Array)이란? ✏️ 위키백과에서 '배열이란 인덱스와 번호에 대응하는 데이터들로 이루어진 자료구조를 나타낸다.'라고 설명하고 있다. 솔직히 이것만 봐서는 어떤 것을 의미하는지 이..

요리 🥘 ✏️ 요리사가 요리를 하고 있다. 요리를 하면서 조리대에 요리 재료들과 식기들을 놓고 진행 중이다. 계속해서 재료들과 식기들이 추가되다 보면 얹을 공간이 없어질 것이다. 요리사는 더 이상 요리가 진행되기 힘들다고 판단을 한다. 그러자 옆에 있는 조수가 사용하지 않거나 사용이 완료된 재료들을 치우면서 공간을 넓혀주는 장면을 기억해보자. 메모리 💾 ✏️ 메모리를 쉽게 이해하기 위해서 요리하는 과정을 앞서 설명하였다. 컴퓨터 또한 요리하는 과정과 마찬가지로 처리할 작업들을 올려놓을 공간이 필요하다. 요리에 필요한 재료들과 식기 구들을 놓는 조리대를 메모리라고 생각해 보자. 조리대 공간이 넓으면 넓을수록 더 많은 요리가 동시에 가능할 것이다. 이는 우리가 컴퓨터를 구매할 때 램의 GB를 체크하는 이유이..

개발자로써 프로그래밍 언어에 대한 동작원리를 파악하는게 왜 중요할까?? 좋은 코드를 잘 짜고 싶으면 문법외에도 동작원리에 대한 개념 이해가 반드시 필요하기 때문이다. 좋은 코드란? 가독성이 좋고 성능 향상 및 테스트 하기 좋은 코드를 의미한다. 브라우저에 대한 이해도가 필요한 이유??? 자바스크립트로 작성한 코드를 브라우저가 실행시키기 때문이다. 브라우저는 자바스크립트를 실행해주는 엔진인 셈이다. About Javascript 💁🏻‍♂️ 자바스크립트는 한번에 코드 하나 밖에 실행하지 못하는 특징을 가지고 있다. 이를 싱글 쓰레드(Single Threaded)라고 부른다. 따라서 원래 병렬처리가 불가능한 언어이다. 더 쉽게 이해하자! alert창을 띄워놓으면 닫기 전까지 어떠한 동작도 하지 못한다는 것을 ..

이벤트는 무엇일까? 웹에서 이벤트란 쉽게 말해서 사용자가 버튼을 클릭하였을 때 그에 맞는 반응이 일어나는 현상을 이벤트라고 한다. 일반적으로 자바스크립트에서 함수를 통하여 이벤트를 연결하며 이벤트를 제어하는 함수를 이벤트 핸들러(Event Handler)라고 한다. 대표적인 이벤트 종류 UI Event scroll = 사용자가 페이지를 스크롤할 경우 select = 텍스트를 선택하였을 경우 resize = 사용자가 페이지의 크기를 조절하는 경우 Keyboard Event keydown = 키를 누르고 있는 경우 keyup = 키에서 손을 뗐을 경우 keypress = 키를 눌렀을 경우 keyCode = 키 코드값 Mouse Event click = 클릭하였을 경우 dbclick = 더블 클릭하였을 경우 ..

자바스크립트를 활용하여 여러 프로퍼티에 접근하여 스타일, 클래스 명, 클래스 추가 및 삭제에 대해 알아보자! const today = document.querySelector('.today') 예시를 위해 today 변수에 today 클래스 명을 할당하였다. 1. style 프로퍼티 자바스크립트를 사용하여 style값을 수정할 수 있는데 그 방법에 대해서 알아보자 today.children[0].style.textDecoration = 'line-through' 변수.style.style값 = "값"의 형태로 작성해주면 된다. style값은 css와 선언하는 방식이 동일하다. 주의할 점은 css에서는 케밥 표기법을 사용하였지만 자바스크립트에서는 반드시 카멜 표기법으로 사용해야 한다. 2. classNam..

요소노드 생성/삭제/이동, 자식 및 부모 요드로의 접근에 대해 알아보자! 1. 노드 여행하기 다양한 방식으로 자식 노드, 부모 노드, 형제 노드 등에 접근할 수 있다. const myTag = document.querySelector('.content'); myTag라는 변수에 content 클래스 명을 가진 요소를 할당하고 예시를 보자 1.1 자식 요소 노드 접근 myTag.children // 자식 요소에 접근 myTag.children[1] // 두 번째 자식 요소에 접근 myTag.firstElementChild // 첫 번째 자식 요소에 접근 myTag.lastElementChild // 마지막 자식 요소에 접근 1.2 부모 요소 노드 접근 myTag.parentElement // 부모 요소에 ..

About Dom!? DOM, Document Object Model 문서 객체 모델의 개념이다. 돔은 계층형 구조로써 부모노드, 자식노드, 형제노드가 존재하는 형태이다. 노드의 종류에는 코멘트 노드, 요소 노드, 문서 노드, 텍스트 노드 등 12개의 노드가 존재하는데 대부분 요소노드와 텍스트 노드 2가지를 자주 사용하게 된다. 요소 노드 (Element node) 태그 노드를 뜻하며 자식 노드가 존재할 수 있다. 텍스트 노드 (Text node) 문자를 표현하는 노드로써 자식 노드가 존재할 수 없다. 자바스크립트에서 태그 선택 id 속성 또는 class 속성을 통하여 태그를 선택하는 등 여러가지 방법으로 자바스크립트를 통해서 태그를 호출하고 변수에 할당하는 방법에 대해서 알아보자!! 1. getElem..