Web
-
Encoding에 관한 고찰Web 2020. 4. 9. 20:19
과에서 듣는 강의 중 웹 크롤러를 제작하는 과제가 주어졌었다. 기존에 혼자서 진행한 프로젝트에서 이미 웹 크롤러를 제작해 보았기 때문에 그 방식을 그대로 따라하기로 했다. 진행한 프로젝트 : 중앙대학교 빈 강의실 https://campus.cau.ac.kr/usk/html/UskLec10.html (이 사이트에서 검색 조건을 전송하면, 나오는 페이지를 크롤링하기로 결정했다.) 하지만 이 강의에서 모든 과제는 파이썬으로 제작해야 하기 때문에 node.js로 만든 크롤러를, python으로 문법을 변환시키는 과정이 필요했다. python에서도 request 모듈이 존재하기 때문에, 쉽게 데이터를 얻어낼 수 있을 거라고 생각했었다. 하지만 그건 아니었다. 처음엔 어떤 데이터를 요청해도 해당하는 조건을 찾을 수..
-
[HTML/DOM] Event(이벤트)Web 2020. 2. 11. 00:47
이벤트 DOM을 다루다보면 이벤트를 다루는 게 핵심이라고 생각될 때가 많다. 다양한 이벤트들을 사용하다보면 이미 설정된 이벤트를 불러내서 사용하는 경우가 많은데, 이러한 방식이 겉으로는 편리하지만, 안에 내용물이 궁금해서 한 번 정리하고 싶어 이렇게 글을 쓰게 됐다. 이벤트가 무엇인지 알아보고, 이벤트를 처리하는 방법과 이벤트를 정의하는 방법에 대해 알아보자. 먼저 이벤트란 어떠한 사건의 발생을 의미한다. ex) 마우스 클릭, 사용자 버튼 입력 등 이벤트는 이미 정의된 표준 이벤트와 사용자가 정의하는 커스텀 이벤트로 나뉜다. - 표준 이벤트(좌측 네이게이션에 Events 항목을 살펴보면 된다.) - 커스텀 이벤트 표준 이벤트 항목을 살펴보고, 자기가 원하는 이벤트가 있을 경우엔, 표준 이벤트를 사용하고,..
-
[디자인 패턴] 적응자 패턴, 빌더 패턴, 복합체 패턴Web/JavaScript 2020. 2. 5. 16:44
적응자 패턴 인자에 따라 구조가 변하는 패턴으로, 서로 다른 객체에 동일한 메서드를 만들고, 해당 객체를 생성자 객체의 인자로 넘겨 활용하는 패턴 다들 친구와 자신의 여자친구에게 인사하는 방식이 다를 것이다. 이를 코드로 구현해보자. var greetSystem = (function(){ var greetSystem = function(adapter){ this.adapter = adapter; } greetSystem.prototype.greeting = function(){ this.adapter.greeting(); } return greetSystem; })(); var friend = { greeting : function(){ console.log("ㅎㅇ"); } } var girlfriend..
-
[디자인 패턴] 플라이급 패턴, 퍼사드 패턴, 프록시 패턴Web/JavaScript 2020. 2. 4. 19:22
플라이급 패턴 객체의 다양한 속성(변수) 중 동일하게 가질 속성(변수)은 프로토타입으로 만들고, 각자 다르게 설정할 속성(변수)은 객체의 생성자 함수에 포함시킨다. var Person = (function(){ var Person = function(name){ // 객체마다 다르게 가질 속성 this.name = name; } // 객체마다 동일하게 가질 속성 Person.prototype.age = 24; Person.prototype.greet = function(){ console.log('hello, my name is ' + this.name); } return Person; })(); 퍼사드 패턴 퍼사드(facade)는 외관을 의미하는데, 이는 객체를 만들어 사용할 때, 복잡하고, 세부적인 ..
-
클로저Web/JavaScript 2020. 2. 2. 14:25
비공개 변수를 가질 수 있는 환경에 있는 함수를 클로저라고 부른다. 비공개 변수는 클로저 함수 내부에서 생성된 변수도 아니고, 매개변수도 아닌 변수를 의미하는데, 즉 클로저의 상위 컨텍스트에서 생성된 변수를 의미한다. 이를 구조화하면 다음처럼 된다. 함수() { 생성된 변수 // 비공개 변수 return 함수 or 함수를 담은 객체 } 위의 구조를 따르면서 예시를 만들어보자. var self = function (){ var name = "catnap"; var age = 24; var height = 176; var girlfriend = false; return { introduce: function(){ console.log("my name is " + name); console.log("my ag..
-
[디자인 패턴]즉시 함수 호출 표현식(IIFE)을 사용한 싱글턴 패턴Web/JavaScript 2020. 2. 1. 15:25
1. 즉시 함수 호출 표현식(IIFE) 익명함수와 즉시 함수 호출 표현식(IIFE)을 이해하고 넘어가는 것이 좋다. 먼저 간략하게 설명한 정의는 다음과 같다. 익명함수란 사용자가 자바스크립트에서 정의할 수 있는 함수 중 익명, 즉 이름이 없는 함수이다. 즉시 함수 호출 표현식(IIFE)은 함수를 선언과 동시 호출하는 표현식을 의미한다. 익명함수를 설명하기 위해선 즉시 함수 호출 표현식이 항상 따라온다. 기존 함수들은 이름이 존재하기 때문에 선언과 호출이 따로 이루어지지만, 익명함수는 이름이 없기 때문에 한 번 정의하고 난 후에, 나중에 호출할 수 방법이 없다. 그래서 즉시 함수 호출 표현식(IIFE)를 통해서 선언과 동시에 호출하여 사용한다. 즉시 함수 호출 표현식(IIFE)은 (function(){})..
-
폼 태그-input 필드에서 id와 name의 서로 다른 기능Web/HTML 2020. 1. 22. 19:26
과제(web hacking)를 하는 도중에 php에서 $_POST를 통해 특정 변수의 값을 받아야 하는 문제가 존재했다. html 내에 폼 태그가 존재하질 않았고, 아무리 봐도 post 할 방도가 보이지 않아서, 해당 페이지의 관리자 모드를 통해 html을 편집하기로 했다. form tag를 만들고 그 안에 input 필드를 만들었는데, 중간에 id를 사용해야 하는지, name을 사용해야 하는지에 대한 물음이 번쩍 떠올랐다. 아직은 html과 css 등을 개념적으로만 공부한 탓도 있지만, 항상 getDocumentById를 통해서 값을 찾았기 때문에 이 상황은 확실히 낯설었다. 그래서 이 부분에 대해서 정확하게 알고 넘어가고 싶어서 이렇게 포스팅을 하게 됐다. input 필드 안의 값을 post 메서드를..