공부 기록일지📚

들어가기 전에 리액트와 JSX가 궁금하다면 공식 홈페이지를 통해서 이해해보도록 합시다. 한글도 지원해서 읽어보는 게 좋을 거 같네요. https://reactjs.org/docs/introducing-jsx.html Introducing JSX – React A JavaScript library for building user interfaces reactjs.org 이전에 안 쓰이는 방법으로 React.createElement() 를 배웠습니다. 이것을 대체하려는 이유는 개발자들이 JSX라는 좀 더 편리한 도구를 사용하기 위해서 입니다. about JSX JSX(Syntax extension to JavaScript)란? - JavaScript를 확장한 문법 생긴게 HTML과 비슷해서, JSX로 Rea..

리액트를 실행하기 위해서 2가지 import하는 것이 필요하다. 위치: 여기에 임포트(body태그 뒤에) React // React JS는 어플리케이션을 interactive하도록 만들어주는 library, 엔진같은 존재 react-dom // react-dom은 library 또는 package, React elemnet를 가져다가 HTML로 바꾸는 역할 ▶아래는 리액트 임포트 예시 javaScript와 React JS를 사용하여 element 를 생성할 때는 React JS가 element를 생성한다. 즉, React JS는 업데이트가 필요한 element 를 업데이트한다. 바로 React JS가 결과물인 HTML을 업데이트할 수 있다는 것이다. -> React JS는 유저에게 보여질 내용을 컨트롤할..

jQuery를 이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중 하나가 크로스브라우징 이슈를 jQuery가알아서 해결해주는 것이다. jQuery를 이용해서 Ajax 통신을 하는 법을 알아보자. jQuery는 Ajax와 관련해서 많은 API를 제공한다. http://api.jquery.com/category/ajax/ Ajax | jQuery API Documentation Register a handler to be called when Ajax requests complete. This is an AjaxEvent. Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. A..

JSON이란? JavaScript Object Notation의 약자로 JS에서 객체를 만들 때 사용하는 표현식을 의미 JSON is a text format for storing and transporting data(ref: W3C) 다른 언어에서도 배열은 배열로, 객체는 객체로 전송할 수 있으며 일종의 데이터 표준 인간과 기계 둘 다 이해하기 쉽고 데이터의 용량이 작다. -> XML의 대체제로 JSON을 사용, 설정의 저장이나 데이터 전송 등에 많이 사용됨 JSON은 JS의 모든 데이터 타입을 제공하는 것은 아니다. JS의 부분적인 데이터 타입만을 지원하기 때문에 공식문서에 나온 내용을 참고하자. http://www.json.org/json-ko.html JSON API *ECMAScript5에는 ..

자바스크립트를 이용해서 웹브라우저의 통신 기능을 사용하는 방법을 알아본다. Ajax(Asynchronous JavaScript and XML) *Asynchronous adj.비동기의 : 서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있다. 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 한다. JS를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 말한다. 이때 사용하는 API가 XMLHttpRequest 객체이다. ->꼭 XML을 사용해서 통신해야 하는 것은 아니며 XML보단 JSON을 더 많이 사용한다. XMLHttpRequest XMLHttpRequest (XHR) objects are used to inter..

jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 이벤트 프로그래밍: jQuery와 none jQuery의 비교 -> jQuery는 크로스 브라우징을 알아서 처리해주고 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. jQuery : on API 사용해보기 ▶기본 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자. .on( events [, selector ] [, data ], handler(eventObject) ) *jQuery 문법에서 []대괄호의 경우는 생략이 가능한 인자 뜻이다. event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의..

이벤트 타입이란 이벤트의 종류라고 할 수 있다. 웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 주요 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는 지 알아보자. 폼(form)에 관련된 이벤트 타입 ▶submit 이벤트 : 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다. name ▶change 이벤트 input(text,radio,checkbox),textarea,select 태그에 적용된다. //입력창에 텍스트를 입력했다가 다시 지워서 원상복귀하면 change이벤트가 작동하지 않는다. ▶blur, focus 이벤트 focus는 엘리먼트에 포커스가 생겼을 때, blur는 포커스가 사라졌을 때 발생하는 이벤트이다. -> 다음 태그를 제외한 모든 태그에서 발생한다..

웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline 방식의 경우 이벤트의 리턴값이 false이면 기본 동작이 취소된다. prevent event on opentutorials 위의 코드는 체크박스의 체크 여부에 따라서 a태그와 form태그의 기본동작을 막는 기능을 한다. 참고로 onclick 내부의 JS코드 중 ~.checked 부분은 체크박스의 상태가 true인 것과 같은 뜻이다...