1. makeFib.js

문제 조건

makeFib 함수는 클로저의 형태로 작성되어야 하고, 리턴된 함수가 호출될 때마다 피보나치 수열을 순차적으로 출력한다.

 

예제

var fn = makeFib();
fn(); // 0
fn(); // 1
fn(); // 1
fn(); // 2
fn(); // 3
fn(); // 5

코드

function makeFib() {
  // your code here
  var count = 0;
  var fibo = [0,1];

  return function(){
    // 첫번째, 두번째 호출 일 때는 각각 0과 1을 반환한다
    if(count === 0 ){
      count++;
      return fibo[0];
    }else if(count === 1){
      count++;
      return fibo[1];
    }else{
      // 배열 fibo에 호출 될 때 마다 앞 두개의 값을 합친 값을 넣어준 뒤 반환한다
      fibo.push(fibo[fibo.length-1] + fibo[fibo.length-2]);
      return fibo[fibo.length-1];
    }
  };
}

어떻게 풀었나

클로저의 핵심은 함수가 함수를 리턴 한다는 것이다. 그리고 위 예제처럼 var fn = makeFib(); 선언해서 사용하는데, 이때 makeFib()함수 안에 var 키워드를 이용해 변수를 만들어 놓으면, 함수가 호출될 때 마다 해당 값을 이용할 수 있다. 이 문제에서는 fibo라는 배열을 먼저 선언해 놓은 뒤 함수가 호출될 때 마다 fibo에 값을 추가 하도록 하였다

 

 

2. transformEmployeeData.js

문제 조건

배열로서 주어진 사원들의 정보를 객체로 이루어진 배열의 형태로 변환하여 반환하는 함수 transformEmployeeData()를 작성한다. 이때, Array의 map 메소드와 reduce 메소드를 반드시 사용하여 문제를 해결해야 한다.

 

예제

// INPUT
[
  [['firstName', 'Joe'], ['lastName', 'Blow'], ['age', 42], ['role', 'clerk']],
  [['firstName', 'Mary'], ['lastName', 'Jenkins'], ['age', 36], ['role', 'manager']]
];

// OUTPUT
[
  { firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' },
  { firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager' }
];

코드

function transformEmployeeData(array) {
  // your code here
  let Data_before = Object.assign(array);

  // 1. Array.map()을 이용해 각각 사원에 접근한다
  let Data_after = Data_before.map(function(person, index){
    // array[0], array[1]... 은 각각 사원을 나타낸다 => reduce를 사용해 하나의 객체로 만들어주기
    // 2. Array.reduce()를 이용해 각각 사원의 데이터를 담은 배열을 하나의 객체로 바꿔준다
    return person.reduce(function(acc, data){
      acc[data[0]] = data[1];
      return acc;
    }, {});
  });

  return Data_after;
  
}

어떻게 풀었나

map과 reduce를 적절히 사용할 수 있는지 묻는 문제였다. 이 문제를 계기로 map과 reduce에 대해 정확히 알고 넘어갈 수 있게 되었다. 

map(function())은 주어진 배열의 모든 요소들에 대해서 인자로 받은 함수를 실행하고 그 결과들로 이루어진 새로운 배열을 반환한다.

reduce(function(acc,cur), initial)는 주어진 배열을 하나의 값 혹은 객체(배열)로 변환할 때 사용된다.

 

3. getObjectById.js

문제 조건

객체로 구성된 배열 안에서, 인자로 넘기는 특정 id값을 가진 객체를 리턴하는 함수를 작성한다. 이 때 객체는 children이라는 키 값에 자식 노드를 가질 수 있고, 부모 뿐만이 아닌 자식 노드 중에서도 id값을 가진 객체가 있는지를 찾아야 한다. 

 

예제

let output = getObjectById(TREE_DATA.items, '1'));
console.log(output); // --> { "id": "1", "name": "johnny" }

코드

let TREE_DATA = {
  "items": [
    {
      "id": "1",
      "name": "johnny"
    },
    {
      "id": "2",
      "name": "ingi",
      "children": [
        {
          "id": "3",
          "name": "johnson"
        },
        {
          "id": "4",
          "name": "katy"
        },
        {
          "id": "5",
          "name": "steve",
          "children": [
            {
              "id": "6",
              "name": "lisa"
            },
            {
              "id": "7",
              "name": "penny",
              "children": [
                {
                  "id": "8",
                  "name": "john"
                },
                {
                  "id": "9",
                  "name": "hoyong"
                }
              ]
            },
            {
              "id": "10"
            }
          ]
        },
        {
          "id": "11"
        },
        {
          "id": "12"
        }
      ]
    },
    {
      "id": "13"
    },
    {
      "id": "14"
    }
  ]
};
function getObjectById(json, id) {

  for(let i = 0 ; i < json.length ; i++){
    if(json[i]['id'] === id){
      // 찾는 id값을 가진 객체를 찾으면 바로 해당 객체를 반환
      return json[i];
    }else{
      if(Object.keys(json[i]).includes('children')){
        // 찾고자하는 id값을 가지고 있지 않고, 자식노드를 가지고 있다면 자식노드까지 탐색한다.
        return getObjectById(json[i]['children'], id);
      }
    }
  }
}

어떻게 풀었나

Recursion을 통해서 자식노드를 가지고 있는 객체라면 다시한번 함수를 호출하고, 그렇지 않다면 객체를 출력하거나 계속해서 탐색을 하도록 구현하는 문제이다. 일단 인자로 받아온 배열의 길이만큼 탐색을 한다. 깊이 1에 해당하는(json[i]) 객체가 찾는 id값을 가졌을 경우 바로 리턴한다. 해당 id값을 가지고 있지 않음과 동시에 children이라는 키워드를 가지고 있다면 getObjectById()에 해당 children 노드와 id값을 넘겨서 호출한다.

문제설명

...더보기

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

제한사항

...더보기
  • 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.
  • completion의 길이는 participant의 길이보다 1 작습니다.
  • 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.
  • 참가자 중에는 동명이인이 있을 수 있습니다.

입출력 예

...더보기
participant completion return
[leo, kiki, eden] [eden, kiki] leo
[marina, josipa, nikola, vinko, filipa] [josipa, filipa, marina, nikola] vinko
[mislav, stanko, mislav, ana] [stanko, ana, mislav] mislav

Solution

function solution(participant, completion) {
    var answer = '';
    // 해쉬테이블에 participant 입력 key: name, value: false
    // 해쉬테이블에 입력 key: name, value: true
    let hashTable = new HashTable();
    
    for(let i=0 ; i<participant.length ; i++){
        hashTable.set(participant[i],false);
    }
    // participant를 넣어서 false인 key값 찾기 get()이용
    for(let i=0 ; i<completion.length ; i++){
        hashTable.modify(completion[i],true);
    }
    for(let i=0 ; i<participant.length ; i++){
        if(!hashTable.get(participant[i])) answer = participant[i];
        // 동명이인에 대한 처리를 해줘야한다.
    }
    return answer;
}

class HashTable{
    constructor(size = 100000){
        this.buckets = new Array(size);
        this.size = size;
    }
    hash(key){
        let hashcode = 0;
        for(let i=0 ; i<key.length ; i++){
            hashcode += key.charCodeAt(i);
        }
        return hashcode % this.size;
    }
    set(key, value){
        let index = this.hash(key);
        // 없으면 만들고
        if(!this.buckets[index]){
            this.buckets[index]=[];
        }
        this.buckets[index].push([key, value]);
        return index;        
    }
    //이미 존재하는 값 수정
    modify(key, value){
        let index = this.hash(key);
        
        for(let buckets of this.buckets[index]){
            if(buckets[0] === key && !buckets[1]){
                buckets[1] = value;
                break;
            }
        }
    }
    
    get(key){
        let Namelist =[];
        let output=true;
        let index = this.hash(key);
        if(!this.buckets[index]) return null;
        
        for(let buckets of this.buckets[index]){    
            if(buckets[0] === key){
                Namelist.push(buckets[1]);
            }
        }
        Namelist.forEach(function(ele){
            if(ele===false) output = false;
        });
        
        return output;
    }
}

 

 

출처: 프로그래머스

'Algorithm' 카테고리의 다른 글

[HackerRank_javascript] 1. Array _ New Year Chaos  (0) 2019.08.06

이번주에는 비동기 & 동기 호출, Function Method 그리고 '자바스크립트로 할 수 있는 것'이라는 타이틀의 내용들을 학습했습니다. 하루는 이론적인 내용들을 다루었고, 나머지 하루는 강사님 말대로 Casual한 내용을 다루었습니다. 가장 인상 깊었던 부분은 Casual한 부분인 '자바스크립트로 할 수 있는 것'이었네요. 하지만 이론적인 내용 또한 중요하니 간단하게나마 정리해보겠습니다. 

 

Asynchronous & synchronous Call

비동기(Asynchronous)와 동기(Synchronous)를 설명하기에 앞서 자바스크립트(Javascript)가 가지는 특징에 대해서 알아보겠습니다. 자바스크립트는 기본적으로 싱글 스레드(Single Thread) 언어입니다. 다시 말해, 멀티 스레드(Multy Thread)를 지원하지 않는 언어인데요, 여기서 스레드(Thread)라는 것을 설명할 때 컴퓨터에 비유하면 좋을 것 같습니다. 흔히 RAM과 CPU를 비교할 때 CPU는 하나의 작업을 빠르게 처리할 수 있는 능력에 비유하고, RAM은 얼마나 많은 일을 동시에 진행할 수 있는지에 비유합니다. 스레드라는 것은 RAM에 비유할 수 있겠습니다.(물론 정확하지는 않지만) 멀티스레드는 두가지 이상의 작업을, 싱글스레드는 한가지 작업만을 처리할 수 있는 것을 의미합니다.

 

다시 본론으로 돌아가서, 동기와 비동기에 대해 수업시간에는 커피 주문하기에 비유했습니다.

 

동기 호출(좌측) 과 비동기 호출(우측)

동기 호출에 해당하는 좌측의 경우에는 작업1(손님1)이 끝나기 전에는 작업2(손님2)가 진행될 수 없습니다. 반면 비동기 호출(우측)의 경우에는 작업1과 작업2가 동시에 진행됩니다. 멀티스레드를 지원하지 않는 자바스크립트의 기본적인 동작은 좌측과 같기 때문에 특정 상황에서 문제가 발생할 수 있습니다. 예를 들면 사용자가 서버에서 이미지를 요청했을 때 이미지가 로드되기 까지 아무런 동작을 할 수 없는 상황말입니다.

 

자바스크립트에서 위와 같은 동기 처리의 문제점을 해결하기 위한 비동기 처리의 대표적인 예는 다음과 같습니다.

...더보기
  • DOM Element 의 이벤트 핸들러
    • 마우스, 키보드 입력 (click, keydown 등)
    • 페이지 로딩 (DOMContentLoaded 등)
  • 타이머
    • 타이머 API (setTimeout 등)
    • 애니매이션 API (requestAnimationFrame)
  • 서버에 자원 요청 및 응답
    • fetch API
    • AJAX (XHR)

 

 

Function Method
 - .apply(), .call(), .bind()

몇가지 함수 호출의 방법에 대해서 공부했습니다. 이 호출 방법들의 핵심은 this 키워드를 지정시켜 놓음으로써(bind) 싱글스레드라는 특성때문에 this 키워드가 가리키는 객체가 계속해서 바뀌는 문제를 해결하는 것입니다. 어느정도 비동기/동기에 대한 내용의 연장선이라고 볼 수 있겠는데요, 그 이유는 아래의 간단한 예제에서 찾을 수 있습니다.

function Box(w,h){
    this.width = w;
    this.height = h;
    
    this.getArea = function(){
        return this.width * this.height;
    }
    this.printArea = function(){
        console.log(this.getArea());
    }
}

let b = new Box(100,50);
b.printArea(); // 5000

setTimeout(b.printArea, 2000);
//VM766:9 Uncaught TypeError: this.getArea is not a function at Box.printArea (<anonymous>:9:26)
//Box.printArea @ VM766:9
//setTimeout (async) (anonymous) @ VM766:16

setTimeout()을 통해 2초 후에 b.printArea()를 실행하는 예제입니다. setTimeout구문으로 넘어오게 되면 Box내부의 this는 더이상 객체 b가 아닌 window를 가리키게 됨으로 Uncaught TypeError가 발생합니다. 이는 bind를 통해 this를 b객체로 지정한 체로 함수를 호출하여 해결할 수 있습니다. 

setTimeout(b.printArea.bind(b),2000); // 5000

 

또 한가지, bind()를 통해 커링(currying: '인자 여러개를 받는 함수'를 '인자를 하나를 받는 함수'로 바꾸는 방법)을 구현할 수 있습니다. 

function template(name, money){
    return '<h1>' + name + '</h1><span>' + money + '</span>';
}

let tmplSteve = template.bind(null, 'Steve');
tmplSteve(100);  // <h1>Steve</h1><span>100</span>

let tmplJohnny = template.bind(null, 'Johnny');
tmplJohnny(1000);  // <h1>Johnny</h1><span>1000</span>

 

 

자바스크립트로 할 수 있는 것들

 

...더보기
  1. Sever Application, CLI scripts
    • Node js
  2. OS independent Desktop / Mobile programs
    • 워드프로세서, 엑셀 같은 데스크탑 프로그램(electron js)
    • Skype, Visual Studio Code, Slack
    • 모바일 어플리케이션(PWA, React Native)
  3. Video & Audio App
    • video: WebRTC
    • Audio: Audion API
  4. Control Robotics and Iot devices
    • cylonjs, johnny five(아두이노, 라즈베리파이 같은 보드를 컨트롤할 수 있는 라이브러리
  5. Game
    • Slither: link
    • 3D (WebGL, WebVR, babylon js)
  6. Chat Bot
    • Visual Chat Bot
    • AI 스피커
  7. Browser Automation
    • Web Scrapping
    • Screenshotting
    • pupeteer
  8. Visualization
  9. Block Chain
    • DApp(탈중앙화 앱)
  10. Machine learning

'코드스테이츠' 카테고리의 다른 글

[프리코스] 7주차 까지의 기록  (0) 2019.09.16
Class 키워드 이용

class Person{
	constructor(first, last, age, gender, interests){
		this.name = {
			'first': first,
			'last' : last
		}
		this.age = age;
		this.gender = gender;
		this.interests = interests;
	}
    
	greeting(){
		console.log('Hi! I\'m ' + this.name.first + '.');
	}
}

class Teacher extends Person{
	constructor(first, last, age, gender, interests, subject, grade){
		super(first, last, age, gender, interests);
		this.subject = subject;
		this.grade = grade;
	}
}

 

Fuction 키워드 이용
function Person(first, last, age, gender, interests) {
	this.name = {
		'first': first,
		'last' : last
	};
	this.age = age;
	this.gender = gender;
	this.interests = interests;
}

// 메소드 정의
Person.prototype.greeting = function(){
	alert('Hi! I\'m ' + this.name.first + '.');
}

// Person을 상속받는 Teacher
function Teacher(first, last, age, gender, interests, subject){
	Person.call(this, first, last, age, gender, interests);
	this.subject = subject;
}


// 메소드 상속
Teacher.prototype = Object.create(Person.prototype);

// constructor 수정
Teacher.prototype.constructor = Teacher;

'Javascript' 카테고리의 다른 글

[문법] 객체 생성하기  (0) 2019.09.17
[문법] 변수의 전달  (0) 2019.09.16
[DOM 다루기] template 태그 이용  (0) 2019.09.06
1. 객체 리터럴 사용
function CreatePerson(name){
    var obj = {};
    obj.name = name;
    obj.greeting = function(){
    	console.log('I\'m '+this.name+'.');
    };
    return obj;
}

let Salva = CreatePerson('Salva');
2. 생성자 사용
function Person(name){
    this.name = name;
    this.greeting = function(){
    	console.log('I\'m '+this.name+'.');
    }
}
let Salva = new Person('Salva');
let Peter = new Person('Peter');
3. Object() 사용
let person1 = new Object({
    name: 'Chris',
    age: 28,
    greeting: function(){
    	console.log("Hi! My name is "+this.name+".");
    }
});
4. 내장함수 create() 사용
var person2 = Object.create(person1);

'Javascript' 카테고리의 다른 글

[문법] 객체 상속하기  (0) 2019.09.18
[문법] 변수의 전달  (0) 2019.09.16
[DOM 다루기] template 태그 이용  (0) 2019.09.06
Call by Reference vs Call by Value

 

한국말로 하면 참조값에 의한 전달과 값에 의한 전달이다. 참조값에 의한 전달은 메모리 주소를 전달한다. 값에 의한 전달은 주소가 아닌 값을 전달한다. 두 방법은 어떤 함수에 변수가 전달되고 함수 내에서 그 변수가 수정되었을 때, 각각 결과물이 다르다.

 

Call by Value

let str = 'I am call by value';

function transformer(param){
	param = 'I am transformer';
}

transformer(str);

console.log(str);
// 'I am call by value'

문자열(String), 숫자(number), 불리언(boolean), null, undefined 타입의 변수가 전달되었을 경우 값에 의한 참조로, 원래의 변수인 str의 값은 변하지 않는다.

 

Call by Reference

let obj = { greeting: 'I am call by reference'};

function transformer(param){
	param.greeting = 'I am transformer';
}

transformer(obj);

console.log(obj.greeting);
// 'I am transformer'

객체(Object), 배열(Array), 함수(function) 타입의 변수가 전달되었을 경우에는 변수에 할당된 메모리 주소가 전달된다. 그렇기 때문에 원래 변수인 obj의 정보가 수정된다.

'Javascript' 카테고리의 다른 글

[문법] 객체 상속하기  (0) 2019.09.18
[문법] 객체 생성하기  (0) 2019.09.17
[DOM 다루기] template 태그 이용  (0) 2019.09.06

코드스테이츠 프리코스를 시작한지 어느덧 7주가 지났습니다. 그동안 계속해서 글을 써보려고 의자에 앉아보기는 했습니다만, 워낙 글재주가 없으니 힘겨워서, 이 핑계 저 핑계를 들면서 지금까지 미뤄왔습니다. 이제는 꾸준히 제가 공부한 내용 혹은 요즘 드는 생각들을 기록해 보려고 합니다. 프리코스를 7주차까지 진행하면서 느낀 점과 어떤 것들을 했는지 간단하게 이야기를 하는 것으로 시작하면 좋을 것 같네요.

 

Week 1 & 2

1,2 주차에는 기본적인 문법을 공부했습니다. 변수와 타입, 조건문, 함수, 배열, 반복문, 객체. 어떤 언어를 사용하더라도 공통으로 포함되는 내용들입니다. 프로그래밍을 해본 사람이라면 쉽다는 느낌을 받을 수 있는 기간입니다. 다만, Javascript에서 변수를 취급하는 방법이 C나 Java보다 느슨(?)하다는 점이 새로웠네요. 하지만 이게 나중에 저를 더 힘들게 할지 편하게 할지는 아직 잘 모르겠습니다.

 

'배열 다루기' 파트에서는 배열에 관련된 메소드(Method)들을 배웠습니다. push/pop만 사용할 줄 알았던 저에게는 굉장히 새로웠습니다. 7주차까지 와서 보니 이때 배웠던 map, reduce, filter 등의 메소드들은 자바스크립트를 한다면 필수라고 할 수 있겠네요.

 

Week 3

처음으로 Pair programming을 해보았고, Git에 관해 공부했습니다. Pair programming을 처음 할 때 굉장히 어색했던 기억이 있네요. 보통 한 화면을 공유하고 그 화면의 주인이 타이핑을 합니다. 다른 사람은 네비게이터라고 해서 문제 해결을 담당하죠. 지금까지 페어를 하면서 느낀 장점은 문제에 접근하는 방법이 사람마다 다르다는 것을 알게 된 점. 단점은 혼자만의 문제일 수 있겠지만, 네비게이터 역할을 맡았을 때 오히려 키보드를 잡았을 때보다 생각을 깊이 하기 힘들다는 점 입니다.

 

Git은 정말 유용합니다. 개발자들만을 위한, 개발자들만에 의한 단순한 도구라고 생각했습니다. Git이 무엇인지 알게되고 Git-hub를 직접 사용해보기 전까지는요. 아직 100% 활용할 줄은 모릅니다만, 실제로 헌법 개정안 발의에 Git을 이용한 사례를 보면 제가 알지 못하는 사용처가 무궁무진 할 것 같습니다.

 

Week 4

숫자 다루기(Number/Math Methods), 변수의 전달(Call by reference/Call by value) 그리고 스코프(scope, 변수 유효 범위)에 대해 학습했습니다. 과제를 진행하다 보면 이쯤에서 값이 변해야 할 때 변하지 않거나 그 반대의 경우가 생기는데, 메모리 주소 값(reference)을 전달했느냐, 단순히 값(value)만을 전달했느냐를 고려하지 않았던 경우가 꽤 있었습니다.

 

스코프는 범위죠. 변수의 유효 범위입니다. 같은 이름의 변수를 선언하더라도 어떤 키워드(let, var, const)로 선언하느냐에 따라 코드가 정상적으로 작동될 수도, 아닐 수도 있습니다. 스코프에 관한 4가지 법칙을 학습했습니다. 

  • Local Scope vs Global Scope
  • Function Scope(var) vs Block Scope(let)
  • 전역변수와 Window 객체
  • 선언 없이 초기화된 변수는 전역 변수
Week 5

클로저(closure), 파라미터(parameter), 객체지향, this 키워드에 대해 배웠습니다. 클로저는 외부함수의 변수에 접근할 수 있는 내부함수로, 스코프 체인(Scope chain)이라고도 합니다. 외부에서 함수 안의 변수에 접근하지 못하게 하고, 해당 클로저 함수만을 이용해서 접근하게 할 수 있습니다. 객체지향 프로그래밍은 하나의 모델이 되는 클래스(class)를 만들고 클래스를 바탕으로 한 객체를 만드는 프로그래밍 패턴입니다. 이 모델을 이용하여 HTML 문서를 제어할 수 있습니다. this 키워드는 모든 함수 스코프 내에서 자동으로 설정되는 식별자입니다. C나 Java에서 this를 사용했었습니다. 자바스크립트에서의 this는 약간 다른데, 다른 글에서 좀 더 자세하게 기록해 볼 생각입니다.

 

Week 6 & 7

프로그래밍 보다는 실무에 가까운 도구들인 HTML, CSS, DOM를 배웠습니다. 과제 Twitter를 진행하면서 프론트앤드 개발 work flow를 간단하게 경험해볼 수 있었습니다. CSS를 이용해 레이아웃을 짜 보았고, CSS Selector를 이용해 문서 객체들을 어떻게 설계하면 좋을지 고민해보는 시간이었습니다.

 

 

'코드스테이츠' 카테고리의 다른 글

[프리코스] 8주차  (0) 2019.09.24

<template> 태그는

실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 사용자에게 보이지 않는 HTML 조각입니다. 마크업(HTML)과 구현(Javascript)의 구분이 좀 더 명확하다는 장점이 있습니다.

 

    <!-- html 코드 -->
    <template id = "will-be-rendered">
        <span>I am template tag</span>
    </template>

    <div id = "target">I am div tag</div>

    
    <script src="script.js"></script>
// Javascript 코드
let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');

//will-be-rendered 안쪽 내용을 복사합니다 (자식노드를 전부 포함해서)
let newContent = document.importNode(template.content,true);

target.innerHTML = '';
target.appendChild(newContent);

 

위의 html 파일을 로드하면 will-be-rendered 의 id를 가진 template 태그의 내용이 문서에 출력됩니다. 이는 script에서 template태그를 활성화(importNode)시켜주었기 때문입니다. Javascript코드를 실행하지 않고 순수히 html코드만을 로드한다면 template 태그의 내용은 화면에 보이지 않겠지만, importNode()를 통해 숨겨진 html코드를 화면 위로 끌어올렸다는 게 핵심이 되겠습니다.

 

 


메소드 정리

Document.importNode(externalNode, deep)

현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있게 해주는 메소드입니다. externalNode는 다른 문서에서 가져올 노드이고, deep은 boolean 타입을 가지는데 가져올 노드의 자식 요소들을 포함하여 가져올 것인지 여부를 나타냅니다.


궁금한 것

  • iframe(inline frame) 태그: html 웹 문서 안에 또 다른 웹 문서를 넣을 수도 있고 뮤디 등 동영상도 넣을 수 있다.
<iframe src = "URL"> 대체 내용 </iframe>

 

'Javascript' 카테고리의 다른 글

[문법] 객체 상속하기  (0) 2019.09.18
[문법] 객체 생성하기  (0) 2019.09.17
[문법] 변수의 전달  (0) 2019.09.16

+ Recent posts