교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. mdn 그렇다. 말 그대로, 내 출처(도메인, 프로토콜, 포트)에서 다른 출처(도메인, 프로토콜, 포트)에 있는 자원에 접근할 때 적용되는 규칙이다. 자원의 요청을 아무나 막 하면 안되니까, 이런 정책이 있는것이다. 해당 자원을 가져오고 싶으면 해당자원을 가지고 있는 서버로부터 권한을 부여 받아야 한다. "preflighted" requ..

코드는 위에서 아래쪽으로 순차적으로 실행된다. console.log('첫번째'); console.log('두번째'); console.log('새번쨰'); 콘솔에 당연히 순서대로 찍힐것이다. 하지만, web api 중 일부를 사용하다보면 코드가 순서대로 실행되지 않는경우를 볼수가 있다. 바로가기 : [ Javascript WEB API ] console.log('1'); window.setTimeout(function(){ console.log('1초 후 실행'), 1000 }) console.log('3'); 위의 코드는 web api중 하나인 setTimeout이라는 매서드를 사용한것이다. 코드의 실행시간을 정할수가 ..

(함수 컴포넌트로 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...