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..

먼저 INSERT 는 테이블에 정보를 삽입하는데 쓰인다. 위 사진과 같은 명령을 내리면 테이블에 데이터가 삽입 된다. 삽입 된 정보가 무엇인지 확인하고 싶다면 $SELECT *FROM (테이블명) 라고 명령 프롬프트 창에 치면 된다. 해당 컬럼의 데이터 유형이 CHAR 이거나 VARCHAR2 등 문자 유형일 경우 ' ' 로 입력할 값을 입력한다. 숫자일 경우 숫자만 입력한다. 방식은 입력할 데이터의 컬럼명과 입력되어야 하는 값을 1:1로 매핑하여 입력하면 된다. 테이블 명 뒤에 () 안에 입력할 테이블의 컬럼을 정의하며, 컬럼의 순서는 테이블의 실제 컬럼 순서와 매치할 필요는 없다. 여기에 정의하지 않은 컬럼은 데이터 INSERT 시에 Default로 NULL이 입력된다. 단, Primary Key 나 ..

SQL은 Structured Query Language 의 약자로 관계형 데이터베이스 관리 시스템이다. SQL 서버에 접속 하기 위해서는 SQL이 설치된 파일 안으로 들어가야 하는데 SQL을 설치할때 표시되어있던 경로를 명령프롬프트창에 입력해서 들어가면 된다. 접속을 완료하고 명령프롬프트창에 이와 같은 명령을 내리게 되면 비밀번호를 입력 하라고 뜨면서 SQL서버에 접속 될 것이다. 사진에 보이는 "mysql>"가 SQL서버에 접속 했다는 증거이다. 이제 database 를 생성 후 해당 데이터베이스를 사용하겠다고 컴퓨터에 명령을 내리면 되는데 Query OK ...라고 뜨면 데이터베이스 생성에 성공한것이다. 위 사진은 사용자인 내가 특정 데이터베이스를 사용하갰다고 컴퓨터에 명령을 내리는 것이다. 이제 데..

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 의 animate()메서드는 사용자 지정 애니메이션을 만드는 데 사용됩니다. 아래의 코드는 jQuery 애니메이션 메소드를 사용한 대표적인 예시이다. $(selector).animator({params},speed,callback); speed매개변수는 효과의 지속 시간을 지정한다. 선택적 콜백 매개 변수는 애니메이션이 완료된 후에 실행되는 함수이다.또 jQuery animator()은 여러속성을 조작 할 수 있는데 그와 관련된 예시도 함께 살펴보도록 하자. 아래의 코드는 동시에 여러 속성을 애니메이션으로 만든 것이다. $("button").click(function(){ $("div").animate({ left: '250px', ..

이벤트란 웹페이지가 응답 할 수 있는 모든 다른 방문자의 동작을 일컫는다. 만약 페이지의 모든 단락에 클릭 이벤트를 할당하고 싶다면 아래의 코드와 같은 형식을 쓰도록하자. $("p").click(function(){ // action goes here!! }); 다음 단계는 이벤트가 발생할 때 발생할 일을 정의 하는 것이다. 발생할 일은 함수 안에 적어 전달하면 된다. 이제 일반적으로 사용되는 jQuery 이벤트 메소드에 대해 살펴 보도록 하자. 1. $(document).ready() :이 메소드를 사용하면 문서가 완전히 로드 될 때 함수를 실행 할 수 있다. 2.dblclick() :이 함수는 사용자가 HTML요소를 두 번 클릭 할 때 실행된다. 3.mouseenter() :HTML 요소에 대한 이벤..

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