Hello World...

John Ahn 님의 강의를 보면서 알게 된 내용을 작성. 노드 리액트 기초 강의 #23 Proxy Server ? 리액트에서 cors 문제를 해결할 수 있는 방법 중 하나로 프록시를 설정을 하는 것이다. (Express 서버에서 설정도 가능하다.) 자세한 내용은 잘 모르겠지만, 다음과 같이 설정을 해주면 해결할 수 있다. Create React App · Set up a modern web app by running one command. Create React App · Set up a modern web app by running one command. > Note: this feature is available with `react-scripts@0.2.3` and higher. create-re..

credentials 설정을 해주지 않으면, fetch 가 제대로 안 되는 경우가 많다. Access-Control-Allow-Credentials Access-Control-Allow-Credentials 응답헤더 Access-Control-Allow-Credentials 는 요청의 자격증명 모드(Request.credentials)가 "include" 일때, 브라우저들이 응답을 프로트엔드 자바스트립트 코드에 노출할지에 대해 알려줍니다. developer.mozilla.org 다음과 같이 credentials 를 해주어야 한다 예1 postLogin(body) { fetch('http://localhost:5001/users/login', { method: 'POST', body: JSON.string..

nodejs 콜백(callback) 비동기 처리 공부! pdf로 보기 목표 자바스크립트 "비동기"에 대해 레퍼런스를 참고하여 개념을 알아 봅시다. 콜백으로 비동기를 처리하는 방법에 대해 간단한 예제를 만들어 보면서 공부합니다. 자바스크립트 비동기 아래 코드를 보고 콘솔에 어떻게 출력될 지 생각해 봅시다. //* 사용자로부터 str 을 받아 wait 이후에 콘솔로 출력해주는 함수 const outpuStr = (str, wait) => { setTimeout(() => { console.log('output:', str); }, wait); }; outpuStr('1', 1000); outpuStr('2', 500); outpuStr('3', 100); 1 → 2→ 3 순서대로 출력 되었을까요? 🤔 그러면..

nodejs express(4.16) & mysql(5) 연동하는 아주 간단한 코드를 작성해보았다. node 와 mysql 이 설치되어 있어야 한다. npm init 을 하고, npm i express dotenv mysql2 를 설치한다. 기본 데이터베이스 세팅 twit001.sql /* * prepare database(mysql) * mysql -u root -p < twit001.sql * $ mysql -u root -p */ DROP database twit001; CREATE database twit001; USE twit001; CREATE table twit ( id INT(11) NOT NULL AUTO_INCREMENT, user VARCHAR(20) NOT NULL, memo VAR..

Promise 공부를 하다가 헷갈리는 점이 있어서 적어둔다. const b = function(cb) { setTimeout(function() { cb('one'); }, 200); }; new Promise(b).then(r => console.log(r)); // one //* 위에 코드는 아래 코드와 같다. cb 가 기존 resolve 이다. new Promise(cb => { setTimeout(function() { cb('one'); }, 200); }); new Promise(b) 이러 형태로 넣는 것이 헷갈렸다. 기존에는 항상 (resolve, reject) => ... 이런 식으로만 사용을 해서 저게 뭐지... 이렇게 생각했다. 너무 단순한 상황인데도 피상적으로만 코드를 인식하다보니 생..

비동기 처리를 하는데 있어 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포트 를 사용하..