(함수 컴포넌트로 state를 표현하는방법은 react hooks라는 방법으로 표현을 할수가 있다. 이 부분은 좀더 공부하고 포스팅 해야 겠다.) State 컴포넌트의 표현은 함수뿐만 아니라 클래스로 표현할수가 있다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, world! It is {this.state.date.toLocaleTimeString()}. ); } } const element = ; consloe.log(element); 컴포넌트를 리액트 엘리먼트로 만들어 콘솔을 찍었을때 반환하는것들이다. 신기..

JSX React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. - React 공식문서 이 말을 100% 다 이해는 못했지만 jsx는 마크업과 로직을 인위적으로 분리하지 않는 방식을 말하는것 같다. const element = Hello, world!; // this is jsx 마크업을 그냥 변수에 넣어어 쓴다. 그냥 html로 보일수 있지만 이것은 javascript이다. 아마 컴파일할때 javascript으로 바뀌어서 컴파일될것이다. const element = Hel..

node.js의 api문서를 조금씩 보고 있었다. filesystem 쪽을 한번 쭉보다가 nodejs site아래쪽에 github링크가 있었다. nodejs/node Node.js JavaScript runtime :sparkles::turtle::rocket::sparkles: - nodejs/node github.com team member가 엄청나가 많았다. ... 일부분만 캡처한부분 커밋횟수 3만회, 풀리퀘스트 300회(cloased 20000회), 이슈 900회 ... 이런 수치만 봐도 이 프로젝트의 크기가 얼만한지 약간이나마 느낄수 있었다. 궁굼했다. 어떻게 nodejs에 기여하는지 nodejs 깊숙한 부분인 c++코드를 수정하는 사람들, 모듈의 일부분을 수정하는 사람들, 그리고 문서를 수정하..

지금은 javascript가 많이 발전하여 oop를 구현하는것이 그리 어렵지 않지만 예전엔 구현이 좀 까다로웠다. 이번 포스팅은 예전에는 어떤 방식으로 oop를 구현하는지 정리하는 포스팅이다. 아래의 내용을 알아야 이번 포스팅을 이해할수가 있다. [programming paradigm] Object Oriented Programming OOP 의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. - m.. artdev.tistory.com [Javascript] Object.create( ) 과 prototype chaining 앞에서 prototype ..

이번 포스팅은 this의 4가지 바인딩 말미에서 언급한 강제로 this 바인딩을 변경하는것에 대한 포스팅이다. this가 가리키는것을 알아야 이번 포스팅을 이해할수 있으니 이 부분을 꼭 알고 와야 한다. [Javasvript] this는 가리킬뿐, this의 4가지 바인딩 this는 가리킬뿐. this는 객체 생성시, 함수 생성시 자동으로 생성되는 변수같은 놈이다.(그렇다고 변수는 또 아니다...) this는 객체를 "가리킬"뿐이다. (자.동.으로) [Javascript] 값을 저장하는 방식, pass by.. artdev.tistory.com call, apply, bind 메소드는 Function 객체의 메소드로 , 이 부분을 먼져 알아야 한다. (mdn문서를 보고오면 좋다.) Function Fun..

1. Branch 브랜치(Branch)는 커밋을 가리키고있는 일종의 포인터다. 이미 우리가 git init통해서 쓰고 있었다. git init 을 하면 master branch가 자동으로 만들어진다. vscode에서 git init을 하면 어떻게 되는지 보자. 왼쪽아래를 보면 master* 이 생기는것이 보일것이다. 이것이 바로 master branch가 생겼다는 의미다. git log를 보면 아직 아무 커밋도 없기때문에 아무것도 찍히지 않지만 브랜치는 만들어졌다. (커밋을 하면 master branch가 해당 커밋을 가리키게 될것이다.) 2. Head head는 현재 작업중인 Branch를 가리킨다. 위 그림을보면 master에 별(*) 이 달려있는것이 보일것이다. * 표시가 바로 head가 이 bra..

앞에서는 object.create( ), prototype.constructor 를 이용해서 상속을 구현했다면 ES6 에서는 이 방법을 좀더 쉽고 간결하게 쓸수있도록 새로운 문법을 만들었다. class Person { constructor(name){ this.name = name; } eat(){ // do something } } class Employee extends Person { constructor(name){ super(name) } work(){ // do something } } 엄청나게 간결해졌다. extends 키워드를 사용해서 어떤 클래스를 상속할지 적어준다(매우매우 직관적이다.) Employee class에서 constructor 함수를 보면 name을 받고 있는데, 인스턴스 생..

앞에서 prototype 과 __proto__ 를 알아보았다. 이번엔 특정 객체와 또 다른 특정 객체의 상속관계를 자바스크립트는 어떤식으로 만들어가는지 알아보자. [programming paradigm] Object Oriented Programming OOP 의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. - m.. artdev.tistory.com cf. o.o.p 에 대해 어느정도 이해가 있어야 코드를 이해할수 있을것 같다. var Person = function() { this.canTalk = true; }; Person.prototype...

prototype 자바스크립트는 prototype기반의 언어라고 한다. 그럼 prototype은 무엇을 말하는걸까? mdn에서 prototype을 이렇게 말하고 있다. Javascript는 엄밀히 말해서 하위클래스(sub-class)객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책 입니다. "특정 함수의 기반클래스 객체를 만드는" 이 부분이 포인트인것 같다. new 키워드로 객체를 만들어낼수있는 constructor function을 예를 들어, var Person = function() { this.canTalk = true; }; console.dir(Person) console.dir(Person.prototype) 을 보면 이런식으로 나..

1. Array Access : O(1) (바로 접근 가능) Search : O(n) (search은 모든 원소를 순회해야 하므로) Insertion : O(n) (넣을 index를만들고 이후에 있는 요소들을 한칸씩 뒤로 민다.(n)) Deletion : O(n) (요소 삭제후 이후에 있는 요소들을 앞으로 당긴다.(n)) 2. Linked List Access : O(n) (해당 노드에 접근하기 위해서는 처음부터 순회를 해야하므로) Search : O(n) (해당 노드를 탐색하기 위해서는 처음부터 순회를 해야하므로) Insertion : O(1) (삽입이라는 operation만 보면 연산은 상수번(2번) 일어난다.) Deletion : O(1) (삭제라는 operation만 보면 연산은 상수번(2번) 일..