Programming Storytelling

this는 함수 내에서 함수 호출 맥락을 의미한다.즉.함수를 어떻게 사용하느냐에 따라서 달라진다는 의미인데 함수와 객체의 관계가 느슨한 자바스크립트에서는 this가 이 둘을 연결 시켜주는 실질적인 역할을 한다. 함수에서의 this는 전역객체와 같은데 이를 설명하는 대표적인 예시코드를 살펴보도록 하자. function func(){ if(window === this) { document.write("window === this"); } } func(); this의 값은 전역객체인 window와 같다. 그럼이제 this의 메소드호출에 대해서 살펴보자. var b = { func : function() { if( b === this) { document.write("b === this"); } } } b.fu..

React 구성요소에는 클래스 구성 요소 만들기,함수 구성 요소 만들기가 있는데 먼저 클래스 구성요소를 만들기 위해서는 구성요소의 이름을 대문자로 시작하고 구성요소에 extend React.Component 문을 포함하여 React.Component에 대한 상속을 만든다. 이 과정은 React.Component 함수에 대한 엑세스 권한을 부여 하는 것이다. render()메서드의 사용도 잊지 말도록 하자. render()메서드를 사용함으로 메서드는 HTML을 반환한다. 아래의 코드는 React에서 클래스 구성요소를 만드는 예제이다. class Apple extends React.Component { render() { return hello,apple!!; } } React에서는 apple구성요소가 있는..

React를 시작하기 위해선 npm 과 node.js가 설치되어 있어야 한다. npm과 node.js가 정상적으로 pc에 다운로드 되어있다면 이런 결과가 나타날 것이다. node.js와 npm의 다운이 끝났다면 먼저 create-react-app을 설치하여 React애플리케이션을 생성한다. 먼저 터미널에서 아래와 같은 명령을 내리면 create-react-app이 설치가 된다. 이젠 첫 번째 react 애플리케이션을 만들 준비가 다 된것이다. 이제는 반작용 응용 프로그램을 실행하는 데 필요한 모든 기능을 설정 해야하는데 아래와 같은 명령을 os에 내려보도록 하자. 이제 해당 디렉토리로 이동한후 npm start 명령을 내리고 새 브라우저에 호스트 주소를 부여하면 위와 같은창이 뜰것이다.이제 React를 ..

jQuery란 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리이다. 웹페이지에 jQuery를 삽입하기 위해선 jQuery를 다운 해야 하는데 다운 할 수 있는 jQuery에는 두가지가 있는데 첫번째는 제작 버전이고 두번째는 개발 버전이다. 먼저 제작 버전은 압축 및 압축되어 있는 라이브 웹 사이트 용이다. 그리고 개발 버전은 테스트 및 개발 용이다.즉,압축되지 않고도 읽을 수 있는 코드라는 뜻이다. 두 버전 모두 jQuery.com 에서 다운로드 할 수 있다. ##웹 페이지에 jQiery를 삽입하기## jQuery라이브러리는 단일 자바스크립트 파일이며 HTML 태그로 태그를 참조한다. jQuery를 삽입하는 방법은 아래와 같다..

클로저(closure)는 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킨다.쉽게 말해 함수 안에 함수를 또 선언 하는것이다. 우리가 대표적으로 알고 있는 함수표현식은 클로저나 콜백함수로 사용하기 쉽다는 장점이 있다. 이번 포스팅에서 그러한 사실에 대해서 함께 알아 보도록 하자. function outter() { function inner() { var title = 'programming good'; alert(title); } inner(); } 이런식으로 함수안에 함수를 선언하면 그안에서만 특정함수를 사용 할 수 있다는 장점이 있다.즉, 내부함수가 외부함수에 접근을 할 수 있다는 뜻이다.그리고 클로저는 내부함수가 죵료된 뒤에도 외부함수를 통해 함수를 호출 할 수 있다는 큰 장점이 있다. 이..

JSON이란 javascript개체 구문을 기반으로 구조화 된 데이터를 나타내는 표준 텍스트 기반 형식입니다. JSON은 javascript객체 리터럴 구문과 매우 유사하지만 javascript와 독립적으로 사용할 수 있으며 많은 프로그래밍 환경에서 JSON을 읽고 생성 할 수 있다. JSON은 문자열로 존재하며 네트워크를 통해 데이터를 전송하고자 할 때 유용하다. JSON을 활용한 대표적인 코드를 살펴보며 JSON형식을 사용한 배열을 익혀보도록 하자. { "name": "HYUN JI", "age": 22, "secretIdentity": "DONE77", "powers": [ "ONE", "TWO", "THREE" ] } JSON를 활용한 코드는 이런식으로 속성:값의 형태를 많이 띄우며 이러한 JSO..

이벤트 는 프로그래밍중인 시스템에서 발생하는 동작 또는 사건입니다. 웹의 경우 브라우저 창 내부에서 이벤트가 발생하고 그 안에있는 특정 항목에 이벤트가 첨부됩니다 웹에서 발생하는 이벤트를 정리 해 보자면 -사용자가 특정 요소 위에서 마우스를 클릭하거나 특정 요소 위로 커서를 가져가는 경우 -사용자가 키보드의 키를 누르는 경우 -사용자가 브라우저 창 크기를 조정하거나 닫는 경우 -웹 페이지로드 완료 -양식 제출 중 -재생중인 동영상 또는 일시 중지 되었거나 재생중인 동영상 -오류가 발생 했다는 경우 위의 경우 말고도 자바스크립트에서는 수많은 이벤트들이 존재한다. #이벤트핸들러란? 사용 가능한 각 이벤트에 이벤트가 발생할 때 실행되는 코드 블록 (이벤트 리스너 또는 이벤트 처리기로도 불린다.) ##addEv..

##라는 형식으로 검색엔진에 대한 정보,저작권,사이트에 대한 정보를 찾아 볼 수 있다.## ​ 자,그렇다면 name의 속성을 알아보도록 하자. ​ 1.keyword:문서에 대한 핵심 키워드를 작성 함 2.description:문서에 대한 설명 3.author:저자 이름 4.generator:그 문서를 생성하기 위해 사용한 소프트웨어 5.application-name:문서를 표현하기위한 에플리케이션 이름 ​ 그리고 html5에서는 을 사용 하는 습관을 드리도록 하자. ​ ##link태그란 외부의 문서와 연결 시켜주는 태그 인데 link태그도 속성을 지닌다. 그 속성에 대해 알아보자.## ​ 의 형식인데 rel값에 ​ stylesheet가 들어가면 스타일 시트를 연결하고 alternet는 문서의 대안버전으로..