본문 바로가기
반응형

JavaScript97

Javascript ES6+ block scoped variables block scoped variables let var달리 재선언이 불가능하지만 재할당은 가능하다. 블록 스코프로 적용되어 외부에서 접근할 수 없다. let a = 1 a = 2 console.log(a) let은 재할당이 가능하다. let 블록 범위 let a = 1 function f () { console.log(a, b, c) // TZD 존이므로 에러가 발생한다. let b = 2 console.log(a, b, c) // 이미 선언된 let b로 인해 b는 2가 호출되지만 a또한 내부에 있지 않지만 // 외부에 선언되어있어 호출된다. 하지만 c는 아직 선언조차 되지 않았다. if (true) { let c = 3 console.log(a, b, c)// a도 호출되고 let c로 인해 c 또한.. 2020. 12. 7.
Node.js - 홈페이지 구현 홈페이지 구현 조건문을 활용해서 홈페이지를 표현하는 방법이 존재한다. 위의 웹의 본문의 WEB의 링크에는 아직 쿼리 스트링의 값이 정의가 되지 않아서 WEB 링크를 클릭하면 정의되지 않았다는 undefined가 변환되어버린다. 그래서 만약 쿼리 스트링 값이 정의되지 않으면 발동되는 조건문을 추가한다면 undefined 표시를 안뜨게 변환 할 수 있다. ↓ var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function(request,response){ var _url = request.url; var queryData = url.parse(_url, true).qu.. 2020. 12. 5.
Node.js - 콘솔에서의 입력값 콘솔에서의 입력값 콘솔 환경에서 앱을 실행할 때 입력 값을 전달하는 방법이 있다. 예를 들면 배열을 노드에 넣어주는 방법이 있다. 아래 코드는 Argument 즉 배열을 노드에 넣어 실행 할 수 있는 자바스크립트 코드이 var args = process.argv; console.log(args); 노드에서 실행 결과 위와 같이 배열이 노드에 들어 간 것을 확인할 수 있다. 위에서 볼 수 있듯이 규칙적인 것인 노드에 넣어진 배열의 0번과 1번은 노드라는 프로그램과 노드에 배열을 넣게 하는 자바스크립트 코드가 담긴 js파일이 고정적으로 정해져 있어 실질적으로 쓰는 것은 2번 부터 이다. 그래서 js 파일 실행 명령어 오른쪽 끝에 jinseok과 kim이라는 값을 적어 배열 값을 주었는데 배열 2번과 3번에 .. 2020. 12. 5.
Node.js - 파일 읽기 파일 읽기 var fs = require('fs'); fs.readFile('TEST.txt', 'utf8', function(err, data){ console.log(data); }); 위의 코드는 외부 파일을 불러오는 노드에서 실행 할 수 있는 자바스크립트 코드이다. TEST.txt라는 텍스트가 적혀있는 텍스트 파일을 만든다. 그리고 js 파일에 노드에서 실행 할 수 있는 자바스크립트 코드를 적는다. readFile이라는 메소드의 첫 번째 인자가 외부에서 불러올 텍스트 파일 TEXT.txt이다. node fileread.js을 명령 프롬프트에 입력하여 실행하면 TEST.txt 텍스트 파일의 내용이 도출되는 것을 확인 할 수 있다. 응용 data 라는 이름으로 폴더를 만들고 그 안에 순수 텍스트 파일.. 2020. 12. 5.
Node.js - URL와 query string URL 위의 설명은 URL의 기본 구조이다. 여기서 중요한 것은 query string이다. 쿼리 스트링에 따라서 데이터를 출력하고 또 그 데이터들을 바꿀수 있다는 사실을 알아야 한다. query string의 성질 알아보기 예제 실험 var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function(request,response){ var _url = request.url; // 쿼리 데이터를 추출하게끔 3행에서 url이라는 모듈을 사용한다고 변수를 선언해주고 //8,9행의 코드를 추가시켰다. var queryData = url.parse(_url, true).qu.. 2020. 12. 5.
Node.js - javascript 기본 언어 실행 javascript 기본문법 실행 간단한 자바스크립트 언어를 적어 보았다. 숫자 연산, 변수, 문자으로 구성해보았다. js 파일 이름은 node1.js으로 설정하였다. 위의 언어들 말고도 비교연산자 boolean 제어문 조건문 등등 모든 자바스크립트 언어 적용 가능하다. 명령 프롬프트를 켜고 node -v을 입력하여 노드를 실행시키고 코드 파일이 들어있는 폴더와 디렉토리를 연동시킨 후 dir/w을 입력하여 명령한다. (윈도우 기준이다.) 그리고 node node1.js을 입력하면 자바스크립트 언어를 코드로 저장한 js파일에 연결된다. 위와 같이 node1.js 파일의 자바스크립트 코드의 결과들이 나오는 것을 확인 할 수있다. Template Literal 여러줄로 이루어진 문자열의 표현과 문자의 치환을 .. 2020. 12. 5.
Node.js 실행 방법 Node.js 실행 방법 노드 공식 사이트인 https://nodejs.org/ko/ 로 들어가 다운받는다. 다운이 완료되면 명렁 프롬프트를 뛰워 node -v을 입력하여 노드 프로그램이 실행되는지 확인해본다. 간단하게 cosole.log(1+1);을 적어 결과값이 나오면 노드가 제대로 실행되는지 확인할 수있다. 다시 명령어를 입력하고 싶다면 Ctrl+C 키를 두 번 누르거나 .exit을 입력해주면 다시 명령 입력창으로 돌아온다. 그리고 바탕화면에 새 폴더를 만들고 브라켓과 같은 에디터를 이용하여 새 폴더 안에 확장자 .js인 파일을 만들어낸다. 그리고 바탕화면에 만든 새 폴더이자 .js 파일을 저장한 폴더의 경로를 복사하여 다시 명령 프롬프트에 들어가 cd 을 입력해준다. 새 폴더 경로를 입력하면 디렉.. 2020. 12. 5.
Javascript 클래스(class) 이론 클래스(class) 클래스는 계급, 집단, 집합을 뜻 하는데 자바스크립트에서는 뜻 그대로 집단으로 나뉠 수 있다. 왼쪽 그림에서 class 파트는 직접적으로 사용되는 생성된 객체 배열 [1,2,3] 등등이 아니라 이 생성 객체를 만드는 매개가 되는 생성자 범위를 class라고 부른다. 이 class 파트에서 생성자의 메소드들을 정적 메소드, 정적 프로퍼티로 구분할 수 있으며 프로토타입의 메소드는 그냥 메소드 아니면 프로토타입 메소드라고 불린다. 생성자에 인하여 생성된 직접적으로 사용하는 객체 instance는 프로토타입 메소드에 접근이 가능하다. 왜냐하면 __proto__의 매개체를 생략 가능하므로 가능하다. 하지만 생성된 객체 instance가 정적 메소드 및 프로퍼티에 바로 접근은 되지 않는다. 프로.. 2020. 12. 4.
Javascript 프로토타입(prototype) 이론 프로토타입(prototype) 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. new을 이용해 만든 constructor 즉 생성자가 새로운 객체를 만들면 이 새로운 객체에 생성자의 프로토타입이라는 내용이 새로운 객체의 __proto__라는 것을 통해 연결되어 생성자을 참조하게 된다. 즉 생성자.prototype와 객체.__proto__는 같은 객체를 바라본다는 뜻이다. 그리고 __proto__는 생략이 가능하다. 한마디로 프로토타입으로 연결되어 생성된 객체가 생성자의 메소드들을 꺼내서 마음대로 쓸 수 있다는 것이다. 만약 Array 생성자가 새로운.. 2020. 12. 4.
Javascript callback Function이론 callback Function call 호출하다. back은 다시 돌려주다. 라고 생각하면 이해하기 쉽다. 즉 콜백 함수는 호출해서 나한테 돌려줄 함수라고 말할 수있다. 콜백 함수는 함수를 일단 따로 전달하고 호출해서 그 결과를 따로 다시 돌려주라는 의미이다. 주고받는다는 의미이기도 하다. 즉 함수 제어권을 맡긴다는 것이다. 제어권 => 실행 시점 위 코드는 setInterval이라는 메소드의 첫 번째 인자로 콜백 함수가 들어있다. 콜백 함수가 실행 되면 변수 cb의 함수가 발동된다. 1초 주기마다 콜백 함수를 호출하는 코드라고 볼 수 있다. 이때 변수 cb로 선언한 함수를 setInterval이라는 메소드의 첫 번째 인자로 넘겨준 것인데, 즉 호출 결과를 알려달라고 제어권을 setInterval에 넘.. 2020. 12. 3.
Javascript this 이론 this this는 실행 콘텍스트가 실행될 때 한다. 그리고 실행 콘텍스가 실행될 때는 콘텍스트를 지닌 함수가 호출되는 순간이며 이때 this가 활성화된다. 즉 함수가 호출될 때 this가 결정이 난다고 말할 수 있다. 전역공간에서의 this 전역 콘텍스트를 실행하는 주체가 this라고 알고 있으면 된다. 브라우저의 window, 노드의 global 등등이 있다. 함수 호출시 this 전역공간에서 함수를 호출하였으면 당연히 호출 시킨 함수 this는 window 및 global을 가르킨다. 하지만 위의 예시처럼 아무리 e객체안에 있는 메소드 함수 안에 있는 함수 f()을 함수 메소드 안에서 함수를 호출해도 f() 함수의 this는 전역객체의 주체인 window을 선택한다. 왜냐하면 허무하지만 일종의 자바.. 2020. 12. 3.
Javascript 실행 콘텍스트 이론 실행 콘텍스트 Execution Context Context는 코드 흐름상의 배경이 되는 조건 및 환경을 뜻한다. 즉 실행 콘텍스트는 실행에 필요한 코드 흐름상의 배경이 되는 조건 및 환경이라고 말할 수 있다. 동일한 조건과 환경을 지닌 코드 뭉치(함수와 전역공간)를 실행할 때 필요한 조건과 환경정보라고 할 수 있다. 즉 함수를 실행하는데 필요한 환경정보(를 담은 객체)이다. inner 안에는 VariableEnviroment와 LexicalEnviroment가 있는데 둘다 environmentRecord와 outerEnvironmentReterence의 객체를 가지고 있다. VariableEnviroment는 순간적으로 캡쳐하고 그 뒤에 값이 바뀌는 것에 상관없이 그 순간적인 순간만의 값을 유지하는 것.. 2020. 12. 3.
Javascript - 모달창 만들기 기본 간단한 자바스크립 코드를 이용하여 열기 버튼을 클릭하면 모달창이 등장하고 닫기 버튼을 누르면 다시 모달창이 꺼지는 페이지를 구성해보았다. CSS 여기서 중요한 부분은 #modal 부분에 display:none;을 해주어 홈페이지를 열었을때 미리 모달창이 뜨지 않게 일단은 설정하였다. 열기 버튼을 눌렀을 때 모달창이 등장하게 자바스크립트 부분에서 제어할 수 있을 것이다. Html 열기 확인 실행 완료되었습니다! 닫기 JS getElementById 메소드를 사용하여 id 값이 modal_opne_btn인 열기 버튼 요소를 가져와 .onclick 이벤트를 사용하여 클릭하였을 때 function() 함수가 발동되도록 하였다. 닫기 버튼 또한 마찬가지이다. 버튼을 클릭 한 후 getElementById 메소드을.. 2020. 12. 1.
Javascript 네트워크 통신 - JSON JSON SON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. JSON API JSON.parse() : 인자로 전달된 문사열을 자바스크립트의 데이터로 변환한다. JSON.stringify() : 인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다. Ajax와 JSON 우선 아래 코드와 같이 서버 쪽에서는 타임라인의 리스트를 콤마로 구분해서 전달한다. ↓ 결과 Asia/Seoul,America/New_York 클라이언트 측에서는 이 결과를 받아서 처리한다. ↓ 위 코드에서 중요한 것은 아래 코드 부분이다. var _tzs = xhr.resp.. 2020. 11. 27.
Javascript 네트워크 통신 - Ajax 네트워크 통신 자바스크립트를 이용해서 웹브라우저의 통신 기능을 사용하는 방법인 서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 예를 들자면 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있는 Ajax는 웹에플리케이션을 구축하는데 중요하다. Ajax Ajax는 Asynchronous JavaScript and XML의 약자다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML을 사용해서 통신.. 2020. 11. 27.
Javascript 이벤트 타입 - jQuery on API 사용법 jQuery on API 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. 또 순순 자바스크립트와 코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해주기 때문이다. on의 기본적인 문법. .on( events [, selector ] [, data ], handler(eventObject) ) event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함 data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함 handler : 이벤트 핸들러 함수 selector selector 파라미터는 이벤트 대상을 필.. 2020. 11. 26.
Javascript 이벤트 타입 - 마우스 마우스 이벤트 타입 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다. click : 클릭했을 때 발생하는 이벤트. dblclick : 더블클릭을 했을 때 발생하는 이벤트 mousedown : 마우스를 누를 때 발생 mouseup : 마우스버튼을 땔 때 발생 mousemove : 마우스를 움직일 때 mouseover : 마우스가 엘리먼트에 진입할 때 발생 mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생 contextmenu : 컨텍스트 메뉴가 실행될 때 발생 아래의 예제처럼 쓰인다. 자바스크립트 문서의 일부분. t.addEventListener('click', handler); t.addEventListener('dblclick', handler); t.addEventListener.. 2020. 11. 26.
Javascript 이벤트 타입 - 문서 로딩 문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다. jinseok 위의 코드의 실행결과는 null이다. 왜냐하면 스크립트 문서보다 아래쪽에 위치한 jinseok가 로딩되기 전에 자바스크립트가 실행되었기 때문이다. 이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이 있지만 또 다른 방법은 load 이벤트 타입을 이용하는 것이다. ↓ jinseok 그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다. 하지만 DOMContentLoaded는 문서에.. 2020. 11. 26.
Javascript 이벤트 타입 - 폼(form) form 폼 submit submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다. name ※ 위에서 event.preventDefault();은 전송을 취소하는 동작 취소 명령이다. change change는 폼 컨트롤의 값이 변경 되었을 때 발생하는 이벤트다. input(text,radio,checkbox), textarea, select 태그에 적용된다. blur, focus focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트다. 다음 태그를 제외한 모든 태그에서 발생한다. , , , , , , , , 2020. 11. 26.
Javascript 이벤트 - 기본동작의 취소 기본동작의 취소 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline 이벤트의 리턴값이 false이면 기본 동작이 취소된다. 이벤트 발생 방지 블로그 property 방식 리턴 값이 false이어도 기본동작이 취소된다. addEventListener 방식 이벤트 객체의 preventDefault 메소드를 실행해도 기본 동작이 취소된다. ※ ie9 이하 버전에서는 event.return.. 2020. 11. 23.
Javascript 이벤트 전파 - 버블링과 캡처링 이벤트 중첩에 대하여 HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 만약 중첩된 HTML 태그들에 이벤트가 등록 되어 있다면 중첩된 이벤트가 어떻게 처리 되는지 확인 할 수있다. ↓ 이벤트 전파 위의 코드의 결과를 보면 제일 부모인 HTML부터 차례대로 깊숙이 들어가 taget까지 전파되는 것을 확인 할 수 있다. 이렇게 이벤트가 부모에서부터 발생해서 자식으로 전파되고 있는 방식을 캡처링(capturing)이라고 한다. ie 낮은 버전에서는 작동하지 않기 때문에 많이 사용하지는 않는다. ※ 위 코드에서 this.nodeName의 this는 이벤트 헨들러인 handler의 함수를 호출하게 한 이벤트 타겟인 버튼 input 태그 값.. 2020. 11. 23.
Javascript 이벤트 - 등록방법 등록방법 이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다. 웹브라우저에서는 크게 3가지 종류의 등록방법을 제공한다. inline 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다. 프로퍼티 리스너 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점이 있다. var t =.. 2020. 11. 23.
Javascript 이벤트 이벤트 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 위의 코드는 onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. event target target은 이벤트가 일어날 객체를 의미한다. target은 버튼 태그에 대한 객체가 된다. event type 이벤트의 종류를 의미한다. 위의 예제에서는 click이 이벤트 .. 2020. 11. 23.
Javascript 문서의 기하학적 특성 문서의 기하학적 특성 CSS 등으로 만들어낸 요소들의 위치와 크기를 알아낼 수 있다. 요소의 크기와 위치 Coding 요소의 엘리먼트 크기와 위치 등의 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect인 것을 이용하면 된다. (※getBoundingClientRect의 width 값을 IE는 제공하지 않는다.) 또 엘리먼트의 위치를 의미하는 top, right의 값을 정하는 기준이 그 부모가 아니라 body이다. 그리고 이를 명시적으로 확인할 수 있는 방법은 offsetParent 속성을 호출하는 것이다. 만약 부모 중 CSS position의 값이 static인 td, th, table 엘리먼트가 있다면 이 엘리먼트가 offsetParent가 된다. Viewport 뷰포트.. 2020. 11. 23.
Javascript Text 객체 - 조작 API 조작 API 텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. appendData() : 인자에 입력된 데이터를 텍스트 마지막 끝에 붙여놓는다. deleteData() : 입력한 데이터를 받은 인자의 start 와 end value 값이 (start value 값)번째 문자 이후부터 시작하여 (end value 값)번째까지 텍스트를 삭제하도록 한다. insertData() : 입력한 데이터를 받은 인자의 start value 값이 (value 값)번째 문자 사이에 데이터 텍스트가 들어가게 된다. replaceData() : 입력한 데이터를 받은 인자의 start value와 end value 값이 (start value 값)번째 문자 사이의 데이터.. 2020. 11. 20.
Javascript Text 객체 - 값 API 값 API 텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있다. nodeValue data html css JavaScript 2020. 11. 20.
Javascript Text 객체 Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. kim jin seok kim jin seok 값 텍스트 노드의 값을 가져오는 API data nodeValue 조작 appendData() deleteData() insertData() replaceData() subStringData() 생성 docuemnt.createTextNode() 2020. 11. 20.
Javascript Document 객체 Document 객체 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. createElement() createTextNode() 문서 정보 API title URL referrer lastModified 2020. 11. 20.
Javascript Node 객체 - jQuery 노드 변경 API jQuery 노드 변경 API jQuery를 이용해서 노드를 제어할 수있다. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다. 참고 http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, .. 2020. 11. 20.
Javascript Node 객체 - 문자열로 노드 제어 문자열로 노드 제어 노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법이 있지만 문자열로 제어하는 노드 제어는 좀 더 편리하게 노드를 조작하는 방법이다. innerHTML innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS outerHTML outerHTML은 선택한 엘리먼트를 포함해서 처리된다. HTML CSS innerText, outerText innerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. HTML CSS insertAdjacentHTML() 좀 더 정교하게 문자열을 이용해서 노.. 2020. 11. 20.
반응형