티스토리

MoonSupport

검색하기

블로그 홈

MoonSupport

moonsupport.tistory.com/m

문서폿 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

타입 스크립트 시작하기(with Next) 여태까지 필요성을 크게 못 느껴서 사용은 커녕 뭐하는 건지도 몰랐는데, 사용 방법이 어렵지 않아서 이번 기회에 정리 하고 자주 사용해보려고 한다. Typescript란 1 2 3 4 5 6 7 8 9 10 11 const areYouCool: boolean = true; const answer: number = 42; const typescript: string = "great"; const greetings: string = ` Hello, Readers! Welcome to TypeScript. `; const hasType: Object = { TypeScript: true, JavaScript: false }; 위와 같이 변수:타입 과 같은 방식으로 변수에 타입을 지정해줄 수 있다. 이로써 기존의.. 공감수 0 댓글수 0 2019. 8. 19.
Javascript로 Hash 처리하기 c++이나 자바 파이썬의 map, Hashmap, dictionary과 같이 Hash처리하기 위해 마땅히 좋은 방법이 없는거 같다. 아니면 내가 모르는 거겠지... 오랜만에 한 번 사용해봤는데 너무 미숙해서 정리를 하고자 한다. 1 var a = [1,2,3,1,2,2,2,3,1,4,6]; // 실험 배열 해당 배열을 중복 처리, 객체 정렬등을 해보도록 한다. 중복값의 누적 다른 언어를 사용하다가 자바스크립트를 사용할 때 가장 헷갈리는 부분이다. 자바스크립트는 객체의 키를 배열처럼 접근 할 수 있다. 1 2 3 4 5 6 7 obj = {} obj[1] = 1; obj // { 1: 1} obj[1] = ++obj[1]; obj // { 1: 2} obj[2] = 1; obj // { 1: 2, 2 : .. 공감수 1 댓글수 0 2019. 7. 6.
비동기(Promise, Axios, Redux-thunk,async/await) 비동기 전체 로직 중 A로직의 처리를 기다리지 않고 처리 하다가 A로직이 처리를 완료 하면 A로직을 완료하는 기법이다. 웹에서 사용시에는 보통 데이터 처리는 화면의 렌더링보다 느리니, 화면의 렌더링을 일단 처리하고 데이터 처리는 요청이 완료 되었을 때, 화면에 뿌려주는 형식으로 사용된다. 그런데 단지 비동기를 그냥 처리만 할 경우에는 다음과 같은 문제점이 생긴다. 1 2 3 4 5 6 7 function a(){ let greet; setTimeout(function(){greet="hello"},1000); console.log(greet); } a() //undefined a() 의 콘솔 결과는 undefined이다. setTimeout은 비동기적으로 작동하는데 greet를 선언하고 setTimout.. 공감수 0 댓글수 0 2019. 7. 5.
[Javascirpt]함수형 자바스크립트 강의 정리(2) 1에서 만든 함수를 가지고 값이나 배열을 받는 개량된 함수를 만든다. map으로 만드는 values 배열 안에 있는 배열, 혹은 객체를 순회하며 모든 값 or 키값을 받아 배열에 담아 리턴한다. function _identity(val) { return val;}var _values = _map(_identity); 해당 코드는 다음과 같은데_identity는 값을 받아 그대로 그 값을 리턴하는 함수이다. 그리고 이 함수를 _map에 파라미터로 넣었다. 일단 이를 이해하기 위해서_map함수를 다시 보자 function _map(list, mapper) { const new_list = []; _each(list, function(val) { new_list.push(mapper(val)); }); ret.. 공감수 0 댓글수 0 2019. 2. 13.
[Javascirpt]함수형 자바스크립트 강의 정리 함수형 자바스크립트 뿐만 아니라자바스크립트 문법에 대해서도 다시 재정립 할 필요를 느꼈다. 함수형 자바스크립트는 true나 false값도 if문이 아니라 함수로 만들어서 완전히 값들을분해하고 조립하는 식으로 짜여진다. function _is_object(obj) { return typeof obj == "object" && !!obj;} 객체인지 확인하는 코드 역시 함수로 만들었다. 자바스크립트에선 배열 역시 object 타입이다. 고로 배열과 객체는 True를 반환함 function _keys(obj) { return _is_object(obj) ? Object.keys(obj) : [];} 다음은 객체의 키를 반환하는 함수이다. 객체 일시 Object.keys메소드를 이용하여 파라미터의 키들을 배열로.. 공감수 0 댓글수 0 2019. 2. 11.
[ES6]Destructuring assignment Destructuring assignment구조 분해 할당이라고 번역 되어진다. 예시를 보자 var colors = ["red", "white", "orange"];var first = colors[0];var second = colors[1];var third = colors[2];console.log(first, second, third); 기존에 배열마다 변수를 선언 하기 위해선 다음과 같은 방식을 이용해야 했다. 이를 es6에서는 var colors = ["red", "white", "orange"];const [first, second, third] = colors;console.log(first, second, third); 이와 같이 사용 될 수 있다. 객체도 구조 분해 할당을 할 수 있다... 공감수 0 댓글수 0 2019. 2. 8.
[ES6]default parameter 함수에서 파라미터를 다룰 때 사용 할 수 있는 기술을 알아보자 default parameter const f1 = function(x, y, z) { console.log(x, y, z);}; 이러한 함수가 있다고 가정할 때 f1(0, null); 이러한 값을 불러온다고 치자 x는 0을 불러왔기 때문에 0을 리턴할 것이고y는 null을 불러왔기 때문에 null을 리턴할 것이고z 는 아무것도 불러오지 않았기 때문에 undefinded가 리턴 될 것이다. 그런데 아무것도 불러오지 않았을 때의 기본값을 주고 싶다면 다음과 같이 만들 수 있 을것이다., const f2 = function(x, y, z) { x = x ? x : 4; y = y || 5; if (!z) { z = 6; } console.log(.. 공감수 0 댓글수 0 2019. 2. 8.
[Tool]Webpack 구성하기 각각 무슨 역할을 하는지 정도는 알고 가야 할 것 같다. 설치는 webpack과webpack-cli webpack-cli은 터미널에서 웹팩을 사용할 수 있게 도와주는 도구 예시로scss와 모던js를 전환해주는 설정을 보자 const path = require("path");const autoprefixer = require("autoprefixer");const ExtractCSS = require("extract-text-webpack-plugin"); const MODE = process.env.WEBPACK_ENV;const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");const OUTPUT_DIR = path.join(__dir.. 공감수 0 댓글수 0 2019. 1. 26.
[ES6]CallBack,Promise,Async/Await 비동기함수 출처 : https://medium.com/@constell99 동기(지금) VS 비동기(나중)동기와 비동기의 구분은 요청받고 응답받는 시간대의 차이라고 생각합니다 요청하고-응답받는 시간을 하나의 박스(box)라로 정의한다면, 동기는 박스 안에서 움직이고, 비동기는 박스를 벗어나 작동되는 원리 라고 생각합니다.동기 : 요청과 응답이 같은 시간대 “안에” 고정되어 있어, 요청에 대해 응답이 완료되기까지 프로그램이 정지합니다. 응답을 받고나서야 비로소 다시 진행되는 특성을 가집니다.비동기 : 요청-응답 간 결합이 자유로워 프로그램이 응답 받기 위해 대기하지 않고 쿨하게?! 자기 갈길?! 가는 특성입니다. 언젠간 응답을 받을테고 다음 로직을 수행 합니다.동기(synchronous)요청을 하는 시기와 응답을 받.. 공감수 0 댓글수 0 2019. 1. 25.
[Babel]바벨 기본시작 여태까지 아무 생각없이 사용해왔는데, 기본적인것은 정리 하는게 좋을꺼 같아서.. https://babeljs.io/ nodejs에서 바벨을 사용하기 위해서 다음과 같이 설치 한다. npm install --save-dev @babel/core @babel/node 바벨을 기본적으로 사용하려면 core와 node의 설치가 필요하고 그 이외에 버전을 설치하여야 하는데 여기서는 presets버전을 설치 했다(최신버전이면서 실험적이지는 않은..) npm install @babel/preset-env 그리고 이를 관리하기 위해 .babelrc라는 폴더를 만들어 관리 한다. .babelrec{ "presets" : ["@babel/preset-env"]} node로 실행시킬 때 바벨을 거쳐가고 싶어서 package.. 공감수 0 댓글수 0 2019. 1. 24.
[JS] getter/setter 출처 : http://mygumi.tistory.com/161 처음에는 get()과 set()의 용도 자체를 이해하지 못했고언젠가부터는 get() set()을 왜 사용하는지 이해를 못했는데이제서야 이해가 되는 것 같다. 그중에서 위 블로그가 가장 설명을 잘 해주시는 것 같다. 사용하는 이유들로는 1. 캡슐화2. 사용성 두가지 인것 같다. MVVM패턴을 설명하기 위해 강사님이 설명한 코드이다. 결론만 보면 1. set()을 통해서 model(data)를 바꿀 때,어떤 경우라도 val(변수)를 받아 바뀐다viewModel.model = val같은 식으로 변수를 전달했다면 viewModel.model = "break"와 같이아예 기능을 마비시켰을지도 모르는 일을 방지했다. 2. get() set() 이라는 함.. 공감수 0 댓글수 0 2019. 1. 10.
[ES6]Map과Set 책을 읽다가 Map과 Set에 대해 나왔는데여태까지 한번도 써본 적도 없고왜 써야 되는지 이해가 안되서여기저기 찾아보고 읽어보다 책과 똑같은 예제로 포스팅 하신분이 계서서 가져왔다.(https://shin-ae.github.io/)MAPES6이전에는 키와 값을 연결하려면 객체를 사용해야 했음. 하지만 객체를 이런 목적으로 사용하면 여러가지 단점이 생김프로토타입 체인 때문에 의도하지 않은 연결이 생길 수 있음객체 안 연결된 키와 값이 몇 개나 되는지 쉽게 알아낼 방법이 없음키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 써서 값과 연결할 수 없음객체는 프로퍼티 순서를 전혀 보장하지 않음map은 키와 값을 연결할 목적이라면 객체보다 나은 선택라고 하는데... 나는 get() has() size()와 같.. 공감수 0 댓글수 0 2019. 1. 3.
[ES6]객체와 객체지향프로그래밍 용어(Terminology)섹션Class객체의 특성을 정의ObjectClass의 인스턴스Property객체의 특성(예: 색깔)Method객체의 능력(예: 걷기)Constructor인스턴스화 되는 시점에서 호출되는 메서드Inheritance클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.Encapsulation클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)Abstraction복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.Polymorphism다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.객체지향 프로그래밍에 대한 보다 확장된 설명은 Object-oriented pro.. 공감수 0 댓글수 0 2019. 1. 3.
[ES6]for문(for of문 다시보기) for문 종류가 너무 많다. 책을 읽다가 정리해야 겠다고 생각해서 작성 foreach 반복문foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.var items = ['item1', 'item2', 'item3']; items.forEach(function(item) { console.log(item); }); // 출력 결과: item, item2, item3foreac.. 공감수 1 댓글수 0 2019. 1. 2.
[ES6]Array Method 오랜만에 배열 메소드를 볼려니 헷갈려서 이번 기회에 확실하게 정리하자 1. push pop shift unshift배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기 2. concat배열의 끝에 여러 요소 추가하여 사본 반환하기(arr는 바뀌지 않음) 3. slice배열 일부 가져오기 첫번째 매개변수는 시작점두번째 매개변수는 끝점 음수는 뒤에서 세고 양수일때 end는 인덱스 전까지음수일때는 start가 인덱스 전까지선택됨4. splice임의의 위치에 요소 추가하거나 제거하기 첫번째 매개변수는 시작점두번째 매개변수는 시작점에서 몇개나 지워나갈지세번째 매개변수부터는 추가해나갈 아이템들4. copyWithin배열 안에서 요소 교체하기 첫번째 매개변수는 복사한 요소를 붙혀넣을 위치두번째는 복사를 시작할 시작.. 공감수 0 댓글수 0 2019. 1. 1.
[Javascript]Map(iterator) 이전부터 map메소드를 사용하긴 했는데, 이런 식으로 어떤 내용을 반복해서 불러오는 방법을 iterator(반복자)라고 하는가 보다. 예시로 위의 코드를 살펴보자 array.map을 하게 되면 function map이 리턴되어진다 맵은 펑션을 받나보다. 다음과 같이 리턴하게 되면 값을 출력하게 되고 함수의 첫번째 파람비터는 array의 모든 값들 인가보다. 자 이를 이용해서 비디오 리액트 리스트를 추가해 보자 import React from "react";import VideoListItem from "./video_list_item"; const VideoList = (props) => { const VideoItems = props.videos.map((video) => { return }) retu.. 공감수 0 댓글수 0 2018. 12. 30.
[Javascript] Modern Javascript Tooling ES6가 어떤 순서로 실행되는지이다. Our project파일에서 ES6로 여러가지의 컴포넌트를 생성하고 그것을 webpack과 babel을 이용하여 ES5(혹은 웹이 이해할 수 있은 문법)로 전환 한 후에 하나의 자바스크립트로 만든다(ex. applicaiton.js) 이것을 index에서 불러오고 실행하는 순서이다. 공감수 0 댓글수 0 2018. 12. 29.
[JavaScript] JSON(2) 자 그럼 JSON을 왜 사용하는가에 대해서 느껴보자. 위의 코드를 살펴보면 timezones이라는 객체에 행렬을 담았다. 첫번째 값은 Asia/Seoul 두번째 값은 America/New_York 그리고 이 값을 출력하는데 이때 implode메소드를 이용하여 각 행렬 사이에 ,를 추가 시켰다. 결과 적으로 Asia/Seoul,America/New_York가 문자열로 리턴된다. 다음 html코드는time.php를 리턴받는데 if문 이하부터 살펴보면 tzs객체에 xhr에 php가 echo로 출력하는 값을 리턴받는다.그리고 그 값을 split메소드로 ,를 기준으로 행렬로 만든다. 그리고 빈 문자열을 _str에 담고 반복문을 통하여 행렬들을 _str에 하나씩 담고 마지막에 ul태그도 담아서 Aisa/SeoulA.. 공감수 0 댓글수 0 2018. 9. 8.
[JavaScript] JSON(1) JSON(Javascript Object Notation)의 약자로 자바스크립트에서 객체를 만들 때 사용하는 표현식. 다음은 그 예시인데 일단 첫번째 단락은 info라는 자바스크립트 객체를 만드는 것이다. 그런데 이것은 제이슨 객체로 만드는게 적합하지 않다. 그래서 두번째 단락 처럼 저것들을 문자열로 바꾼다. 이때 역슬래쉬들은 단락을 나누는(엔터를 인식)것을 인식하기 위함이다. 이후에 JSON이라는 자바스크립트 객체의 메소드 parese라는 것을 이용하면 자바스크립트 객체 infoobj에 제이슨 형식의 객체로 만들어진다. 이후에 값들을 불러 오거나 할 수 있다. 그리고 맨 마지막 단락의 stringify를 이용하면 객체화 되어있는 문법들이 문자열로 출력이 된다. 이것이 필요한 이유는 ajax와 함께 사용.. 공감수 0 댓글수 0 2018. 9. 8.
[Javascript]Ajax Asynchronous JavaScript and XML 비동기적 자바스크립트 비동기적 - 따로따로 일한다? 웹 페이지에 필요할 때만 로드 되는 부분들을 그냥 두었다가 로드가 필요할 때 불러낼 수 있게 하여 문서를 불러올 때의 부담을 줄여줌. 위의 코드는 사용 예시이다. 변수xhr httprequest객체를 넣고 그 객체를 open메소드를 이용해서 여는데 첫번 째 파라미터는 방식 두번째 파라미터는 여는 대상이다. 이는 각각 form의 method와 action과 같은 역할을 한다. 그러고 나면 onreadystatechange를 이용하여 함수를 열고 readyState === 4(준비를 완료했는가?) 와 xhr.status ===200(성공적으로 수행했는가?, 실패는 404)가 만족하면 xhr객체의 내용.. 공감수 0 댓글수 0 2018. 9. 8.
[Javascript] 마우스 이벤트 이벤트 타입웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.click 클릭했을 때 발생하는 이벤트. dblclick 더블클릭을 했을 때 발생하는 이벤트mousedown 마우스를 누를 때 발생mouseup 마우스버튼을 땔 때 발생mousemove 마우스를 움직일 때mouseover 마우스가 엘리먼트에 진입할 때 발생mouseout 마우스가 엘리먼트에서 빠져나갈 때 발생contextmenu 컨텍스트 메뉴가 실행될 때 발생키보드 조합마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.event.shiftKeyevent.altKeyevent.ctrlKey마우스 포인터 위치마우스 .. 공감수 0 댓글수 0 2018. 9. 8.
[Javascript]문서 로딩 위 코드의 콘솔 결과값은 NULL이다. 그 이유는 태그가 나오기도 이전에 엘리먼트 값을 얻으려고 하기 때문이다.즉 순서의 문제이다. 이 경우에 보통에는 바디태그 아래 혹은 모든 엘리먼트들이 다 입력 된 후 마지막에 script를 입력하면 된다. 하지만 onload메소드를 이용하면 이 문제를 위치 변경 없이 해결 할 수 있다. 다음과 같이 window객체의 속성인 onload를 이용하여 엘리먼트를 불러 들였다. 다음은 이벤트 리스너 방식 위의 두 예시의 문제점은 onload , load는 모든 HTML문서의 작업이 끝나고 나서야 실행된다는 것인데, 이는 이미지 다운로드와 같은 오래 걸리는 동작까지 기다려야 한다는 점이다. 그럴 때 DOMContentLoaded를 이용하면 쉽게 문제를 해결 할 수 있다. 이.. 공감수 0 댓글수 0 2018. 9. 8.
[Javascript] Form Form 은 사용자가 입력한 정보를 서버로 전송하게 해주는 HTML태그 이벤트 1. submit 입력한 값을 제출 하는 이벤트를 가진다. 위의 예시는 입력한 값이 없을 때 제출하게 되면 경고창이 뜨게 하는 코드이다. 일단 폼 태그의 엘리먼트를 t라는 객체로 확보하고 t에 이벤트 리스너 메소드를 이용한다. ( 폼의 이벤트 리스너 속성) 그리고 첫번째 인자는 폼태그의 속성값중 하나인 submit 두번째 인자는 함수를 입력한다. 조건문을 이용하여 value 프로퍼티의 길이가 0인지 확인 하여 처리한다. event.prventDefault는 이벤트의 작동을 중지시키는것! 2. change 만약 input의 값이 변화했을때 발생하는 메소드 form태그 하위 태그인 input태그 엘리먼트를 변수 t에 저장하고 이벤.. 공감수 0 댓글수 0 2018. 9. 8.
[JavaScript] 브라우저 이벤트 기본동작의 취소 웹 브라우저의 구성요소들은 각각 기본적인 동작방법을 가지고 있다. 예를 들면 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력되고 폼에서 submit 버튼을 누르면 데이터가 전송되며 a 태그를 클릭하면 href 속성의 URL로 이동한다. 방법은 다음과 같다.체크 박스가 True라면리턴값을 false값을 준다. 이는 태그의 이벤트를 마비시키는 역할을 한다. 이벤트 연습해보자 프로퍼티 리스너프로퍼티 리스너 방식. 특이점은 없다. 이벤트 리스너특이한거 있다. return false가 아닌event.preventDefault(); 이벤트 객체에 preventDefault()를 호출한다. 공감수 0 댓글수 0 2018. 9. 5.
[JavaScirpt]버블링과 캡처링 만약 input태그 fieldset태그 body태그 html태그에 eventListener를 부여했다고 하자. 그럴때 input의 event를 실행시키게 되면 event의 영역인 fieldsetfieldset의 영역인 bodybody의 영역인 html이각각 실행 될 것이다. 이것이 위에서 아래로 진행된다면 캡쳐링 아래에서 위로 진행된다면 버블링이다. 1. 캡처링다음은 캡처링의 예제이다. 결과는 위 코드와 같은데 콘솔부분만 설명해보자면event.target.nodeName은 그 이벤트(마우스클릭)의 타겟이된 객체의 노드네임을 호출하고this.nodeName은 이벤트(핸들링?리스너?)가 실행된 노드네임을 호출한다. 그리고 결과값으로 다음과 같이 나오는데여기서 HTML BODY FIELDSET INPUT순으로.. 공감수 0 댓글수 0 2018. 9. 5.
[JavaScirpt]이벤트 등록(addEventListener) 1. addEventListener사용방식은 위의 코드와 같다.1.이벤트리스너를 달아줄 객체 = t그리고 괄호는 순서대로(이벤트, 리스너)이다. 해석해보면객체t에 이벤트리스너를더하는데(클릭이벤트를통해서이고, 경고문을 출력하는 기능이다.)이다. 2. 이벤트 리스너를 쓰는 이유 위의 코드는 프로퍼티 리스너이다.이 프로퍼티 리스너는 한 객체의 이벤트에 하나의 리스너밖에 가질 수 없다. 고로 클릭이벤트 발생시에 alert(2)만 출력 될 것이다. 그래서 위의 코드와 같이 이벤트 리스너를 쓰는것을 권장한다. 클릭이벤트 발생시에alert(1)과 alert(2)가 동시에 실행된다. 3. 하나의 리스너로 여러 이벤트리스너 실행하기. t1과 t2 다른 객체이지만하나의 리스너를 사용하고 있다. 공감수 0 댓글수 0 2018. 9. 5.
[JavaScirpt]이벤트 등록 1. inline방식 태그에 이벤트를 설치하는 방식 예시 onclick="alert('Hello world') 그런데 아래 4번째 라인을 살펴보자 this.value를 호출하라고 되어있는데 여기서 this란 함수가 속해있는 객체를 의미한다. 고로 4번째 라인은 alert함수가 속해있는 태그 엘리먼트, 객체의 value값을 출력하게 되어진다. 2.프로퍼티 리스너 해석 t라는 변수에 target이라는 id를 가진 태그를 리턴하고 그 t라는 객체에 onclick이라는 약속된 자바스크립트 객체 속성에 함수를 지정해서 그 함수를 실행시킨다. 다음 빨간 박스가 이벤트핸들러이다. 그리고 이 이벤트핸들러는 첫번째 파라미터로 이벤트 객체라는 것을 전달 받기로 약속되어 있음. 이 이벤트 객체는 프로퍼티로 타겟이라는것을 가.. 공감수 0 댓글수 0 2018. 9. 4.
[JavaScript] 이벤트 용어 용어 정리 event : 무언가 행위가 발생할 때, 실행되는 행위 eventTarget : 이벤트가 일어날 행위의 대상 (예를 들어 버튼) eventType : ~했을 때(onclick, onchange와 같은 것) eventHandler : ~했을 때 일어나는 행위(alert와 같은것) 공감수 0 댓글수 0 2018. 9. 4.
[JavaScript]Element의 위치 및 크기 알아내기 var t = document.getElementById('target');console.log(t.getBoundingClientRect()); 위 코드에서 getBoundingClientRect()메소드는 콘솔에 이런 값을 리턴하는데 이는 위치와 크기에 관한 리턴값이다. 위의 사각형이 target엘리먼트의 형태인데 top과 bottom left right는 각각 BODY태그에서 얼마나 떨어져 있는지 width와 height는 엘리먼트의 텍스트 노드 + 패딩값 + 보더값을 나타낸다. 만약 엘리먼트가 중첩되어 있다면 어떻게 될까?위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBoundingClientRect를 호출해보자. 뭐 결과는 같다. 예외가 있다면 t.. 공감수 0 댓글수 0 2018. 9. 3.
[Javascript] Text API 총 네가지 API를 살펴보자 첫번째 버튼은 callAppendData()라는 함수를 호출한다. callAppendData는 target엘리먼트에 appendData 메소드를 실행한다. appendData는 data.value를 파라미터로 두는데 이는 첫번째 input박스의 value값이다. 결론적으로 Cording everybody!(target엘리먼트) 뒤에 value값이 추가된다. 두번째 버튼은 callDeleteData()라는 함수를 호출한다. target엘리먼트에 deleteData 메소드를 실행한다. deleteData메소드는 첫번째 값 두번째 값 모두 정수를 파라미터로 받으며, 순서를 뜻한다. 만약 target.deleteData(5,5);라면 Cording everybody!에서 다섯번째 인.. 공감수 0 댓글수 0 2018. 9. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.