본문 바로가기

분류 전체보기120

javascript Object Oriented Programming (js-class) subclassing 패턴 중 pseudoclassical 방식에 대하여 알아보았다. 하지만 es6이후 class 문법이 추가되면서 전의 복잡한 방식을 하지 않아도 간단히 객체지향 프로그래밍을 구현할 수 있다. class function Human(name) { this.name = name }; Human.prototype.sleep = function () { return `${this.name} zzzz` }; function Student(name) { Human.call(this,name) // call 메서드로 this를 전달 }; Student.prototype = Object.create(Human.prototype) // prototype 연결 Student.prototype.constr.. 2021. 1. 21.
20210120 TIL 배운 것들 linked list hash table linked list 메서드 구현 hash table 메서드 구현 더 알아볼 것 객체 분해 할당 불편해도 사용하기 hash table resizing 복습하기,,,,,, 자료구조 정리하기 linked list, hash table을 구현해 보았다. 역시나 재밌는 일이지만,, hash table resizing부분에서 4시간 동안 고민했다. 알고 보니 굉장히 간단한 로직이었지만 이미 코드는 산으로 간지 오래였다. 하지만 리프레싱 후에 코드를 보니 해결이 되었다. 다시 한번 리프레싱의 중요성을 느꼈다. 여기에 너무 많은 시간을 쏟아서 할 일이 조금 쌓인 기분이었지만 그래도 성과는 있었다고 생각한다. 고민하면서 hash table에 대하여 더 잘 알게 된 느.. 2021. 1. 20.
20210119 TIL 배운 것들 data structure stack 구현해보기 queue 구현해보기 big O 표기법 더 알아볼 것 priority queue stack과 queue의 메서드 overflow big O 적용해보기 자료구조 (data structure) 중 stack과 queue 에대하여 공부를 하였다. 이론을 공부한 뒤 stack과 queue의 메서드를 구현해보면서 이해하는 과정을 진행했다. 이미 구현되어있는 부분을 바탕으로 직접 부딪혀보며 구현하는 과정은 여전히 정말 재밌는 것 같다. 또한 이러한 과정이 이해를 하는데 큰 도움이 되고 로직또한 잘 이해할 수 있어 좋은 것 같다. 자료구조를 공부하면서 big O 표기법에 대하여도 공부를 하였는데 전에 백준 알고리즘 문제의 해설에서 본 적이 있는 것이었다. 알.. 2021. 1. 19.
javascript Object Oriented Programming (js-prototype) 객체지향에 대하여 공부했다. 이제 javascript의 객체지향에 대해서 알아보자 es6전 javascript에는 class가 존재하지 않았다. class가 존재하지 않기 때문에 상속 기능 또한 구현하지 못했다. 그래서 js에 존재하는 prototype을 이용해 객체지향을 흉내 내어 구현하였다. 이처럼 prototype을 이용하여 객체지향을 구현하는 과정을 subclassing 패턴이라 하고 패턴들 중 pseudoclassical 한 패턴에 대하여 설명하겠다. pseudoclassical 패턴에 대하여 알아보기 전 짚어 봐야 할 개념이 있는데 prototype과 constructor이다. 1. prototype 프로토타입은 객체와 객체 사이를 연결하는 데 있어서 특수한 역할을 하는 객체이다. javasc.. 2021. 1. 19.
20210118 TIL 배운 것들 DanceParty pesudoclassical로 구현하기 DanceParty class로 구현하기 this로 함수 실행 시점 제어하기 css transition 더 알아볼 것 className , classList css 기본기 다지기 DanceParty minimum 다시 구현해보기 DanceParty Advanced DanceParty로 객체지향 연습을 하였다. 이론으로 이해하려 노력했고 어느 정도 됐다고 생각했다. 아니었다... 멘붕 파티가 돼버려 몇 시간을 고민했는지 모르겠다. 후에 해결을 하였지만 여전히 헷갈리고 어렵다. 정리를 하고 다시 풀어봐야겠다. 또한 sprint를 진행하면서 css도 굉장히 많은 기능이 있다는 것을 알았고 이에 대한 기본기를 다져야겠다고 생각했다. 무언가를 .. 2021. 1. 18.
javascript Object Oriented Programming 현재의 고급언어는 두 가지 종류로 나눌 수 있다. (절차 지향 언어, 객체 지향 언어) 절차 지향 언어에는 다양한 게 있지만 대표적으로 C언어가 있다. 절차 지향이란 위에서 아래로 순차적으로 처리하는 것을 말하는데 컴퓨터의 작업 처리 방식과 유사하기에 시간 복잡도 면에서 객체 지향 언어에 비해 강력하다. 그러나 그만큼 단점도 확실하다. 코드를 이해하기 어렵고 변경, 확장 등 유지 보수 측면에서 어렵다. 이러한 이유로 객체 지향 언어가 탄생했다. 객체지향언어는 필요한 부분을 기능별로 묶어 모듈화함으로써 코드의 재활용성을 키웠다. 이는 중복을 줄여 프로그램의 유지 보수 및 코드를 이해하는데 큰 역할을 했다. Object Oriented Programming 객체지향은 객체를 이해하는 데서 시작한다. 객체지향.. 2021. 1. 17.
javascript this -명백한 바인딩(call, apply, bind) 호출 마지막으로 명백한 바인딩(call, apply, bind) 호출이다. call, apply, bind의 메서드는 명시적으로 this를 지정하고 싶을 때 사용한다. 첫 번째 인자가 항상 this값이 된다. call, apply와 bind는 this 값을 지정한다는 점에서는 같지만 call, apply의 경우는 this의 값을 지정하여 호출하지만 bind는 호출은 하지 않고 this값을 지정하여 함수만 반환한다. call, apply function printProfile(name, age) { return `${this.type} ${name} 나이:${age}` } const developer = { type: '개발자', feature: '언어' } const artist = { type: '아티스트'.. 2021. 1. 16.
javascript this-Function 호출, Method 호출, 생성자 호출 this는 함수 실행 시 호출 방법에 의해 결정되는 특별한 객체이다. 함수 실행 시 결정되므로, 실행되는 맥락에 따라 this는 다르게 결정된다. 크게 4가지로 설명할 수 있다. Function 호출, Method 호출, new 키워드를 이용한 생성자 호출, 명백한 바인딩(call, apply, bind) 호출 1. Function 호출 var name = 'reo'; function foo () { console.log(this.name); // 'reo' } foo(); 함수 호출 시에 this는 브라우저에서 window 객체를 가리킨다. 하지만 함수 호출 방식에서 애초에 this를 사용하지 않는 것을 권장한다. 경우에 따라 바인딩이 달라지기 때문이다. (브라우저에서는 window를 node.js에서.. 2021. 1. 16.
javascript 화살표 함수 ES6에서 새로 도입한 화살표 함수(arrow function)에 대하여 알아보자 MDN 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다. 함수 표현식 const add = function (x, y) { return x + y } 화살표 함수 const add = (x, y) => { return x + y } 화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있다. 함수에 return 문만 있는 경우, 화살표 함수는 return을 생략할 수 있다. 또한 return을 생략할 시에 ( )를 사용할 수 있지만 { }는 사용해서는 안된.. 2021. 1. 16.

티스토리툴바