앞선 포스팅에서 비동기 함수를 사용할때의 callback hell을 설명한 바 있다. [Javascript] 비동기함수(2) - CallBack 비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수.. artdev.tistory.com 2015년 6월 , Ecma International 에서는 es2015라는 새로운 문법을 도입하였다. 약 500p 분량의 내용이 있는데 나도 아직 모르는문법이 수두룩하다. ecma2015바로가기 es6라 불리는 이 문법에 promise가 설명되어있다. 조금 deep해서 mdn의 설명을봐도 좋을것 같다. -mdn m..

비동기와 콜백 저번 포스팅에서는 비동기 함수가 어떻게 작동하는지 보았다. client에서 자원을 server에게 요청하는 코드들은 대부분 비동기함수로 작동을 한다. 예를 들어 어떤 이벤트가 발생했을때 아래의 함수가 실행된다고 가정해보자. server에게 data를 가져오는 http요청을 하는 함수이다. // Client side code... function getUserData() { //request (kim 이라는 user의 데이터를 요청 ) someCallToServer({username:"kim"},(err,data)=> { if(err){ return "err!!!"; }else{ // 받아온 data를 가지고 작업... } }) } 보통 이런식으로 작업을 하게 된다. callback으로 넘겨..

// JWT란? // 왜쓰는가? // npm package 소개

교차 출처 리소스 공유(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..