Hello World...

비동기 처리를 하는데 있어 callback 이 자주 사용되었으나 콜백헬 등 가독성이 안 좋아지고 코드가 난잡해지는 경우가 있다. callback const wait = (inputStr, callback) => { setTimeout(() => { console.log(inputStr); callback(); }, 500); }; wait('A', () => { wait('B', () => { wait('C', () => { return; }); }); }); // A -> B -> C promise const wait = inputStr => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(inputStr); reso..

소켓(socket) 과 웹소켓🔌 소켓이란, 프로그램이 네트워크 상에서 데이터를 송신과 수신을 하기 위한 연결부이다. 일반적으로 TCP/IP (또는 UDP) 프로토콜을 이용하거나, WebSocket 을 이용한다. 웹소켓(WebSocket) 과 TCP/IP 소켓은 차이가 있다. 웹소켓은 HTTP 레이어에서 작동하는 소켓으로 레이어가 다르다. (RFC-6455) IP, PORT 를 통해 통신한다는 점에서는 비슷하다. 기존 http 통신은 단방향 통신으로, 실시간 통신을 하기 위해 실시간처럼 보이는 방식을 사용했다.(Polling 방식) 이후 실제로 실시간 양방향 통신이 가능한 웹소켓은 2011년 국제 인터넷 표준화 기구(IETF) 에서 RFC 6455로 표준화 되었다. 웹소켓의 통신 TCP 80포트 를 사용하..

input tag 에 날짜 시간을 동시에 입력 받을 수 있게 하려면, type="datetime-local" 이런 식으로 지정해 주면 된다. 날짜와 시간을 입력할 수 있는 태그가 생긴다. #input tag #html #datetime-local http://jun.hansung.ac.kr/CWP/htmls/HTML%20Input%20Types.html HTML Input 요소의 타입들(types) HTML Input 요소의 타입들(types) 이 장에서는 요소의 입력 타입(type) 들을 설명한다. Input Type: text 텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input: Example First name: Last name: jun.hansung.ac.kr

리액트에서는 input 의 값(value) 을 가져오고 싶어도, 직접적으로 오리지널 DOM 을 건드리면 안 된다. document.getElementById('myInput').value (x) 그래서 ref 를 이용해야 한다. 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 import React from 'react'; // import { searchYouTube } from '../searchYouTube'; class S..

recast.ly 구조를 그려보았다. fetch 같은 비동기 함수는 componentDidMount() 메서드에 작성하는 것이 좋다. 만약 사용자가 페이지에 접속했을 때 fetch 작업이 10초 정도 걸린다고 하자. 그렇다면 사용자는 기다리지 않고 페이지를 떠날 것이다. 10초 정도 걸려도 일단 페이지를 렌더링하면 UX 적인 부분에서 이점이 생긴다. 리액트에서는 익명함수는 가급적 지양해야 한다. 이벤트 등록 해제시 어렵기 때문이다. (화살표 함수는 실행 컨텍스트를 만들지 않음) recast.ly 구현 스크린샷 search 에 fetch, 디바운싱 및 watch later 에 localStorage 기능도 적용해 보았다. 테스트를 계속 하다보니 api 할당량이 넘기도 했다. 하루가 지나니 다시 풀렸다 ㅎㅎ..

리액트 생명 주기를 공부해봤는데, 여전히 아리송하기는 하다. 리액트 생명주기 : 컴포넌트가 생성되고, 업데이트 되고 사라질 때 '항상' 보장된 타이밍에 실행되는 메서드 노마드 코더- 리액트 강좌 영상에서 자세하게 설명해 주셔서, 해당 내용을 참고하였다. https://www.youtube.com/watch?v=ycOQk7SZWkM&feature=emb_logo 영상과는 조금 다르게 브라우저에서 리액트를 실행시켜서 확인을 해보았다. 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55..

nodejs-express 에서 lowdb 를 설치하고 nodemon 을 실행하는데, 이상하게 nodemon 이 계속 리스타트 되는 문제가 있었다. 검색을 해보니 공식 깃허브에 해결 방법이 있었다 ^^ 노드몬이 db.json 를 계속 watching하고 있어서 생기는 문제 같다. https://github.com/typicode/lowdb/issues/174 package.json 을 가서 start 에서 --ignore db.json 를 추가 해주면 된다. "scripts": { "start": "nodemon server/express-app.js --ignore db.json" }