화성갈끄니까아

JSX란? 리엑트에서 사용하는 문법으로써 자바스크립트의 확장 문법이다. 리엑트로 웹 개발하기 위해서는 JSX에 익숙해지자! JSX 기본 문법 JSX를 작성하는 경우에는 반드시 하나의 요소로 감싸주어야 한다. div를 만들어 부모태그를 생성할 수 있지만 div태그가 무분별하게 생성되면 시멘틱 웹으로써의 의미가 떨어지기 때문에 or 를 사용하여 부모태그를 대신해주자. (최상단에 부모태그가 존재할 경우 굳이 사용할 필요는 없다.) 셀프 클로징(self-closing) HTML을 사용하였을 때는 input, br ,img와 같이 닫는 태그가 없는 태그들이 있지만 JSX에서는 반드시 닫아줘야한다. 이를 셀프 클로징이라고 부른다. 속성명 카멜 케이스(Camel Case) 표기법으로 작성 HTML 속성들인 oncli..

리엑트(React)란 무엇일까? Facebook에서 개발한 라이브러리로써 리엑트를 쉽게 표현하자면 자바스크립트의 라이브러리의 하나로서 UI를 제작하기 위해 사용되는 싱글 페이지 어플리케이션(SPA)이다. 왜 리엑트를 사용할까? 기술이 발전할수록 웹이 점점 복잡해지면서 사용자의 요구 또한 많아지고 높아짐에 따라서 자바스크립트의 한계점을 보안하기 위하여 새로운 프레임워크인 앵귤러(Angular), 뷰(Vue), 리엑트(React)가 탄생하였다. 자바스크립트의 한계점을 보완한 라이브러리이기에 리엑트는 자바스크립트의 문법을 그대로 활용하는 특성을 지니고 있다. 따라서 앵귤러, 뷰 보다는 상대적으로 배우기에 쉽다. 리엑트 특징 선언적 개발이 가능하다. 선언적 개발은 흔히 명령적 개발이라는 프로그래밍 기법과 대조되..

이벤트는 무엇일까? 웹에서 이벤트란 쉽게 말해서 사용자가 버튼을 클릭하였을 때 그에 맞는 반응이 일어나는 현상을 이벤트라고 한다. 일반적으로 자바스크립트에서 함수를 통하여 이벤트를 연결하며 이벤트를 제어하는 함수를 이벤트 핸들러(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..

CSS에서 요소들을 배치하는 방법에는 float, relative, absolute 등 다양한 방법들이 있다. 그 중 최근에 많이 사용되는 flex 속성에 대해서 알아보자! ☞ display 값으로 flex를 설정하고 요소를 움직일 수 있다. 3개의 div태그를 이용하여 요소를 만들었다. flex 속성을 사용하기 위하여 부모요소를 div태그를 통하여 만들고 작성하였다. 다음은 어떠한 속성도 적용하지 않고 display: flex만 적용한 예시이다. div태그는 block요소로써 한줄에 하나씩만 접근하지만 flex를 통해서 가로정렬이 된 모습을 확인할 수 있다. 따라서 flex는 가로정렬하는데 유용하게 쓰인다는 것을 알 수 있다! 이제 속성을 이용해보자!! ☞ justify-content 속성은 x축을 담..