일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
- http://jeonghwan-kim.github.io/dev/2019/06/25/react-ts.html
- object
- https://velog.io/@velopert/create-typescript-react-component
- toString
- 게시판
- 출처 : https://webdir.tistory.com/506
- Today
- Total
목록Javascript (112)
Back Ground
쿠키와 세션 쿠키는 요청과 응답의 헤더(header)에 저장된다.요청과 응답은 각각 헤더와 본문(body)을 가진다. ES6123456789101112131415161718192021222324const http = require('http'); const parseCookies = ( cookie = '' ) => { console.log("cookie : ",cookie); return cookie .split(';') .map( v => v.split('=') ) .map( ([k, ...vs]) => [k, vs.join('=')] ) .reduce( (acc, [k,v]) => { acc[k.trim()] = decodeURIComponent(v); return acc; }, {});} http..
요청과 응답 이해하기 클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 이벤트 리스너를 미리 등록해두어야 한다. 이벤트 리스너를 가진 노드 서버를 만들어 보자. createServer.js12345const http = require('http');http.createServer((req,res)=> { //여기에 어떻게 응답할지 적어준다. });cs http서버가 있어야 웹 브라우저의 요청을 처리 할 수 있으므로 http모듈을 사용했다. http모듈에는 createServer메서드가 있다.인자로 요청에 대한 콜백 함수를 넣을 수 있다.요청이 들어올 때마다 매번 콜백 함수 실행된다. 따라서 이 콜백 함수에 응답을 적어주면 된다. createServer의 콜백 부분을 보면 req와 res 매개변수가 있..
REPL 사용하기REPL은 CLI(쉘 혹은 콘솔이라고도 부른다.) 위에서 사용하게 된다. 자바스크립트는 스크립트 언어이므로 미리 컴파일을 하지 않아도 즉석에서 코드를 실행할 수 있다. 노드에서의 제공 콘솔(REPL)입력한 코드를 읽고(Read),해석하고(Eval),결과물을 반환하고(Print),종료할 때까지 반복한다(Loop).REPL(Read Eval Print Loop)이라고 부른다. 노드의 REPL을 직접 사용해보기CMD에서 node에 들어간다. node> 이렇게 되었다면 정상적으로 node를 시행할 수 있다. 간단한 문자열을 출력해보자면> const str = 'Hello world, hello node'; undefined> console.log(str);Hello world, hello nod..
긴 설명 보다 내가 보고 쓰기 편하게 단순하게 이해 할 수 있게 쓰겠다. 먼저 보일러 플레이트 중 create-react-app을 통해서 프로젝트를 생성 해 줄 것이다. redux-setting 이라는 디렉토리로 만들었다create-react-app redux-setting 이제 redux를 사용하기 위해 몇가지 모듈을 받아준다.npm install redux react-redux 이제 불필요한 부분을 지워준다.(기존 index 코드 부분이나 App 부분) 시작하기 전 리덕스의 구조를 생각해 둔다. src 안에 디렉터로리를 나눠서 구조를 갖춰준다.actionscomponentscontainersreducers 이제리덕스 구조 그림을 참고하고 순서 대로 만들어 준다.그러면 헤깔리지 않고 만들 수 있게 된다..
콜백 지옥(Callback hell) 콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 123456789$.get('url', function (response) { parseValue(response, function (id) { auth(id, function (result) { display(result, function (text) { console.log(text); }); }); });});Colored by Color Scriptercs 웹 서비스를 개발하다 보면 서버에서 데이터를 받아와 화면에 표시하기까지 인코딩, 사용자 인증 등을 처리해야 하는 경우가 있다.만약 이 모든 과정을 비동기로 처리해야 한다고 하면 위와 같이 콜백 안에 콜백을 계속 무는 형..
객체 리터럴 객체 리터럴에는 편리한 기능들이 추가되었다.- ES51234567891011121314var sayNode = function(){ console.log('Node');}var es = 'ES';var oldObject = { sayJS : function(){ console.log('JS'); }, sayNode : sayNode,};oldObject[es + 6] = 'Fantastic';oldObject.sayNode(); // NodeoldObject.sayJS(); //JSconsole.log(oldObject.ES6); //FantasticcsoldObject 객체에 동적으로 속성을 추가하고 있다. 앞의 코드를 다음과 같이 다시 쓸 수 있다. - ES61234567891011121..
VSCODE - Debugger for chrome VSCODE에서 확장 프로그램중 Debugger for chrome 를 설치 해준다.크롬에서 JS 코드를 Debugger할 수 있게 할 수 있다. 그 후 디버깅 탭으로 들어간 후 설정을 누른다, 그런 후 이렇게 바꿔주면 되는데 { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "..
redux-actions를 이용한 더 쉬운 액션 관리 redux-actions 패키지에는 리덕스 액션들을 관리할 때 유용한 createAction과 handleActions 함수가 있다. 이 함수들은 다음과 같이 yarn으로 설치한다. yarn add redux-acitons이렇게 불러와 사용 할 수 있다. 1import {createAction, handleActions } from 'redux-actions';cs 각 함수의 용도와 사용법createAction을 이용한 액션 생성 자동화 리덕스에서 액션을 만들다 보면 모든 액션에게 일일이 액션 생성자를 만드는 것이 번거로울 수 있다. 123456789export const increment = (index) => ({ type: types.INCREM..