프로그래밍 공부하기

정규표현식 또는 정규식이란 문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴이다. 예를 들어 회원가입 웹페이지에서 사용자가 입력한 비밀번호, 전화번호 등이 형식과 일치하는지 등을 파악할 때 사용할 수 있다. 1. 정규식의 구성 JavaScript의 정규식은 위와같은 구성으로 되어있다. 정규식 리터럴(슬래쉬"/"로 감싸는 패턴) 안에는 사용할 정규식이 들어가 있고, 정규식 리터럴 바깥 끝에 플래그를 덧붙여 주는 형식이다. 플래그의 경우 6가지 종류가 있으나 보통 전역 검색을 의미하는 g를 많이 사용한다. 2. 정규식의 사용방법 let str1 = "ihl: 010-123-4567"; str1.match(/\d+/g); // ["010", "123", "4567"] let str2 = '010..

VS에서 JavaScript를 웹브라우저를 사용하지 않고 디버깅하기 위해선 디버깅 시 발생하는 .vscode > launch.json파일을 다음과 같이 변경하면 된다. { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "vanila js debugging", "program": "${workspaceFolder}/test.js" } ] } 그 후 중단점을 걸고 좌측의 벌레모양이 있는 아이콘을 클릭하면 Chrome 개발자도구처럼 값들을 확인할 수 있다.

HTML태그는 태그들이 중첩되어있는 구조이다. 의 child로 가 있고 의 child에 가 있고 의 child로 .... 가 반복된다. 이러한 태그의 중첩구조에서 하나의 태그에서 이벤트가 발생했을 때 해당 이벤트가 child로 혹은 parent로 전파되는 현상이 이벤트 버블링과 이벤트 캡쳐이다. 1. 이벤트 버블링 See the Pen Bubbling by ImHyeLim1209 (@imhyelim1209) on CodePen. 위의 코드는 container > content > inner 로 div가 중첩되어있으며 각 div를 클릭 시 각자의 id가 alert되는 이벤트가 걸려있다. 이 때 사용자가 inner를 클릭하면 이벤트가 inner의 parent인 content, content의 containe..

상속을 구현하는 방법은 prototype을 이용하기, Class를 이용하기 2가지이다. 사실 Class를 사용한 상속과 prototype을 사용한 상속은 동일하다. prototype의 복잡한 과정을 Class라는 키워드를 통해 간단하게 구현할 수 있다는 점만이 다른 것이다. 1. Prototype function Animal(name, sound){ this.name = name; this.sound = sound; } Animal.prototype.cry = function(){ console.log(this.sound); } const Pigeon = function(name){ //Animal(name, '구구') //3. this 전달 Animal.call(this, name, '구구') } //..

인스턴스란 클래스 등을 이용하여 만들어진 구체적인 실체이다. 클래스가 설계도라면 인스턴스는 설계도를 이용하여 만들어진 실제 제품이라고 볼 수 있다. 그렇다면 객체는 인스턴스일까? 객체는 소프트웨어 세계에 구현할 대상으로 소프트웨어 관점에서는 개념적인 것(Concept)이다. 따라서 클래스로 만들어진 구체적인 실체를 인스턴스라고 부르는 것이 더 정확한 표현이다. 하지만 개념적으로 인스턴스는 객체에 포함되므로 클래스로 만들어진 구체적인 실체를 객체라 부르는 것도 틀린 말이 아니다. JavaScript에서 인스턴스를 만드는 방법은 Class 외에 4가지 방법이나 존재한다. 1. Functional const Plant = function(height){ const someInstance = {}; someIn..

JavaScript는 기본적으로 Class라는 개념이 없다.(ES2015부터 추가되었으나 문법적 양념일 뿐 JavaScript여전히 프로토타입 기반의 언어으로 클래스 기반으로 바뀌었다는것은 아니다.) 그 대신 프로토타입을사용하여 상속을 구현하고 있다. 이 때 프로토타입은 prototype이라는 property인 prototype object와 자신을 만들어낸 객체의 원형을 가리키는 __proto__이라는 숨은 링크라는 2가지 의미를 갖고있다. 1. 함수의 객체선언: this vs prototype 함수를 선언하면 함수에 생성자 자격이 부여되어 new 키워드를 사용하여 해당 함수의 형식을 사용하는 객체를 만들 수 있다. 그 예시는 다음과 같다. function Circle(radius){ this.radi..

2021/01/14 - [Javascript/Basic JS] - 객체 지향 프로그래밍(Object Oriented Programming) 이전 포스팅에 이어 객체지향프로그래밍의 특징에 대해 알아보자. 3. 객체 지향 프로그래밍의 특징 객체지향프로그래밍은 크게 4가지의 특성이 있다. 1) 캡슐화(Encapsulation) class Circle{ constructor(radius, color){ this.radius = radius; this.color = color } expendRadius(){ this.radius += 1 } } let c1 = new Circle(4, "red"); //반지름이 4이고 빨간색인 원 let c2 = new Circle(7, "blue"); //반지름이 7이고 파란색..

프로그래밍이란 우리가 해결하고 싶은 문제 혹은 알고리즘을 프로그래밍 언어를 사용하여 구현하고 이를 컴퓨터에게 위임하여 자동화하는 것이다. 프로그래밍에서 문제 해결을 위해 필요한 절차를 구현하는 방법 중 대표적인 것이 객체지향 프로그래밍이다. 1. 객체지향 프로그래밍이란 1) 절차지향 프로그래밍 C, Pascal, BASIC 등 비교적 과거의 하이 레벨 프로그래밍 언어는 절차적 프로그래밍을 수행했다. 어떤 문제를 해결하기위해 일을 순서대로 처리하는 것이다. 즉, 어떠한 논리를 순서대로 써내려가는 것이다. 절차지향프로그래밍은 복잡한 논리를 가진 문제를 만났을 때 구현과 유지보수가 어려워지는 문제점이 있다. 후에 절차적 프로그래밍의 하위개념인 구조적 프로그래밍이란 개념이 등장하면서 프로그램 전체를 독립적인 단..

JavaScript에서 this는 함수 호출 방법에 따라 다른 값을 가리킨다.(바인딩) 그러나 프로그래머가 직접 함수 안의 this를 명시적으로 지정할 수 있는 방법이 있다. 바로 call, apply, bind 함수를 사용하는 것이다. 1. call const student = { name: "ihl", age: 14, printProfile: function(repeat) { for(let i = 0; i < repeat; i++) console.log(`이름: ${this.name}, 나이: ${this.age}`); } } let kim = {name: 'kim', age: 21}; student.printProfile(3); //'이름: ihl, 나이: 14' x3회 출력 student.prin..

화살표 함수란 function 표현을 짧게 줄여쓴 것으로 function과 같은 기능을 하지만 일부 요소에 대해 function과 다르게 작동한다. 1. 사용방법 //1. 함수 선언식 function add(a,b){ return a + b } //2. 함수 표현식 let add = function(a, b){ return a + b; } 지금까지 사용해온 함수 선언은 위와 같다. 이 함수들은 화살표 함수 문법으로 간단하게 축약해보자 (함수 선언식과 표현식의 차이는 이전 포스팅을 참고하자:2020/12/17 - [Javascript/Basic JS] - 호이스팅(Hoisting)) //1. function 키워드 생략 let add1 = (a,b) => { return a+b; } //2. functio..