[Chat-App]#2 Socket.io 개념 Socket.io, React, 그리고 Node.js를 활용한 실시간 채팅 앱 프로젝트를 진행합니다. 2021.04 ~ 2021.06 동안 기초적인 개발 작업 완료 후 기본 개념과 수정 작업을 기록합니다. Socket.io 기본 개념 공부 및 정리 #Socket.Io ⚡Concept www.notion.so
웹 개발
[Chat-App]#1 개발 계획 Socket.io, React, 그리고 Node.js를 활용한 실시간 채팅 앱 프로젝트를 진행합니다. 2021.04 ~ 2021.06 동안 기초적인 개발 작업 완료 후 기본 개념과 수정 작업을 기록합니다. 개발 계획 1. Airbnb style guide 적용 클린 코드를 통해 코드의 가독성과 유지보수성을 향상시키기 위해, Airbnb 스타일 가이드를 적용합니다. 개발의 효율성을 높여주는 "Eslint"와 "Prettier" 툴들을 Airbnb style 가이드에 적용합니다. ESLint & Prettier, Airbnb Style Guide로 설정하기 코드의 가독성을 높혀주고 에러나 컨벤션에 관한 경고 해주는 유명한 툴이 있는데바로 ESLint와 Prettier입니다...
본 내용은 Node jsd의 "http module"의 개념과 예제들을 통해 Brower와 server의 통신 방법을 이해하기 위함입니다. 1. HTTP? "HyperText Transfer Protocol"의 악자로, HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 주로 웹에서 클라이언트-서버 사이에 이루어지는 요청/응답(Requset/Response) 프로토콜이죠! 예를 들면, 웹 브라우저(클라이언트)가 HTTP를 통해 서버로부터 웹페이지의 그림 정보, 혹은 Document 정보를 요청(Request) 하면, 서버는 응답(Response)하여 필요한 정보를 클라이언트로 전달합니다. 2. 서버 생성 const http = require('http'); const se..
Node,js의 async동작을 Promise 객체를 이용하여 구현해 보겠습니다. 1. Promise? Promise 객체는 Javascript의 비동기처리를 위한 객체입니다. 여기서 비동기 처리 코드란, Compiler가 code를 Line by line으로 위에서 아래로 읽어가며 컴파일을 진행할때, blocking fuction 혹은 코드를 만나 해당 코드 밑에 위치한 내용들이 언제 끝날지 모르는 blocking funciton 완료를 기다리는 synchronous operation과 달리, Event Loop을 통해 비동기 처리 코드를 call stack에서 빼와 처리하여 Call stack의 내용들을 보다 신속히 처리할 수 있습니다. 2. Promise 객체 사용 Promise객체는 JAVA의 "..
Node.js의 Event Loop Concept 이해하기 2편! 1. Single threaded, and blocking funciton console.log("first task"); console.time(); for (let i = 0; i < 1000000; i++) { const h3 = document.querySelector("h3"); h3.textContent = "Hey, everyone is waiting on me"; } console.timeEnd(); console.log("next task"); : 앞서, 우리는 Event Loop을 살펴보며, Node.js의 특성에 대해 파악했습니다. Node.js의 경우 코드를 line by line으로 읽어내며, 앞선 line의 fun..
1. What is JS? Single-threaded, non-blocking , asynchronous, and concurrent language. A) Call stack : Javascript is single-threaded programming language, which means that it has a single call stack! 그렇다면, single-threaded는 무슨 의미일까? 단순히 한번에 하나 의 일만 처리할 수 있다라고 볼 수 있습니다. Call stack에 대한 시각화를 위해 간단한 예제를 작성해봤습니다. function multiply (a, b) { return a*b; } function square (x) { return multiply(x, x); } fu..
