JavaScript (26) 썸네일형 리스트형 WEB APIs란? APIs란?Application Programming interfaces (애플리케이션 프로그래밍 인터페이스)의 약자 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 예를 들어 생각해보자.만약 내가 어느 정도 투자금을 들여 곳곳에 음료 자판기를 설치하기러 했다고 치자. 나는 물론 자판기가 내부적으로 어떻게 작동하는지 전혀 모른다. 하지만 음료를 채워넣을 수 있고, 가격을 설정해서 사람들이 음료를 사 먹을 수 있게 할 수 있다. 마찬가지로 Windows에서 동작하는 어플리케이션을 만들고 싶은데 Windows가 어떻게 동작하는지 알지 못하더라도 .. Browser 구조 분석 구성 Window는 화면 그 자체고, Document는 우리가 HTML에서 작성한 요소들이 표기되어 지는 부분이다. Navigator는 사용자 눈에는 안보이지만 브라우저 자체와 관련 된 정보가 담긴다 window 오브젝트 console.log(window)를 출력하면 윈도우와 관련 된 다양한 함수와 오브젝트, API를 확인할 수가 있다. 다시 한번 얘기하지만 window는 최고의 Object다! Global Object이다! console.log(this); 출력했을 때도 window와 관련 된 내용이 출력된다. 윈도우 안에 alert라는 API가 있는데... window.alert('hello')라고 쓰지 않아도, 그저 alert('hello')만 써도 작동이 된다. 글로벌 오브젝트이기 때문에 자동적으.. 11. 합성 vs 상속 합성과 상속이란? 객체지향에서 기능 재사용을 위해 사용하는 대표적인 기법이다. 상속(Inheritance)? 부모클래스가 구현해둔 무언가를 자식클래스가 상속(extends)해서 무언가를 구현 하는 방법으로 객체 지향 프로그래밍(OOP)에서 많이 사용하며, 자식클래스는 부모 클래스에 정의해둔 field나 method를 그대로 받아서 사용할 수 있다. 내용을 추가(혹은 확장)해서 사용하는 것도 가능하다. class Vehicle{ constructor(name, type){ this.name = name; this.type = type; } getName(){ return this.name; } getType(){ return this.type; } } class Car extends Vehicle{ con.. 6. 이벤트 처리 React 이벤트 처리 React의 이벤트 처리방식은 Vanila JS의 이벤트 처리 방식과 거의 유사하다. 몇 가지 차이만 알고 있으면 된다. 차이 1] 기본 문법 React 이벤트는 소문자 대신 카멜 표기법(camelCase)를 사용한다 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다 HTML에서 작성 Active Lasers React에서 작성 Activate Lasers 이벤트 onclick대신 onClick으로.. 마치 낙타(camel) 혹 처럼 쓴다. " " 문자열 대신 { } 을 사용하여 JSX로 전달한다. 차이 2] 이벤트 기본 동작 방지 React는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 호출해야한다. 비교를 위해 새 페이지.. 5.1 State 올바르게 사용하기 직접 State를 수정하지 않기setState를 쓰지 않고 직접 State를 수정한다면? React가 state가 변경된 걸 인지하지 않는다. 그러면 render()를 호출하지 않을거고, 아무런 변화가 없음.ㅜㅜ 직접 state를 지정할 수 있는 건 constructor에서 this.state로 초기 값을 줄 때 뿐... State 업데이트는 비동기적일 수 있다React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리하기도 한다. this.props와 this.state가 비동기적으로 업데이트 될 수 있기 때문에 state 계산 시 값에 주의해야 한다.//실패 예 this.setState({ counter: this.state.counter + this.props.increm.. 5. State와 생명주기 State란? React 컴포넌트에서 다루는 데이터는 Props와 State 두 가지로 나뉜다. Props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것으로 "읽기 전용"이다. 자식 컴포넌트는 값을 받기만 하고 직접 수정할 수 없다. 이 점을 이용해서 변경되지 말아야 할 데이터를 효율적으로 관리할 수 있다. State는 컴포넌트 자기 자신이 갖고 있는 값이다. 내부에서 선언하고 내부에서 변경할 수 있다. props와 비교해서 "쓰기 전용"이라고 볼 수 있다. React doc 예시 React 공홈에 나와있는 문서 내용을 따라가보자! 3. 엘리먼트 렌더링에서 만든 시계 예제를 살펴보자. function tick(){ const element=( Hello, World! It is {new .. JQuery 사용설정 JQuery 설정 : JQuery는 javascript 라이브러리이다. JQuery는 함수로 이루어져있다.Javascript는 속성으로 이것저것있었는데 JQuery는 함수로 이것저것 구현해놨다 JQuery홈페이지 접속, 다운로드 메뉴에서Download the compressed production JQuery 3.5.1을(zip 추천) 다운로드 한다. 요상한 화면이 뜨는데 우클릭해서 다른이름으로 저장하면 된다.그리고 가져올 수 있는 폴더에 넣는다.HTML에서 Uploaded by Notion2Tistory v1.1.0 Vue 라우터 및 BootstrapVue 설치 방법 이번에는 Vue.js를 사용할 수 있도록 베이스를 구성해보려고 한다. 1) Vue 라우터 설치 뷰에서 라우팅 기능을 쓸 수 있도록 지원해주는 공식 라이브러리가 있음 라우팅(Routing)은 쉽게 말하면 웹페이지 간 이동하는 방법에 대한 건데 @@자세한 건 다음에 공부해서 포스팅하기로..@@ 그렇다면 왜 라우터를 설치해서 쓰느냐? 바로 SPA(Single Page Application)을 잘 사용하기 위해서이다. SPA의 장점은 앞선 포스팅에서도 밝혔듯이 => 페이지 변환도 빠르고, 트래픽 양도 줄어드니 개이득 Visual Studio Code TERMINAL에서 npm install vue-router --save으로 설치 2 ) BootstrapVue * BootstrapVue 설치 bootstrap-.. 이전 1 2 3 4 다음 목록 더보기
