개발로그

군 장병 AI·SW 역량강화 교육을 모두 수료했다. 교육기간 동안 자바스크립트를 이용해 프로그래밍 언어가 웹에서 어떻게 동작하는지를 배웠다. 그리고 마지막으로는 리액트와 파이어베이스를 이용해 다양한 기능을 가진 채팅 애플리케이션을 구현하여 배포하였다. 교육도 끝났으니 이번 글에서는 나의 목표와 앞으로의 계획에 대해 간단히 적어보려고 한다.데이터 엔지니어나는 빅데이터 분야를 공부해보고 싶어서 산업경영공학부에 들어왔다. 진로를 정하기 위해 데이터와 관련된 여러 직무들을 조사해 보았고, 그중 하나인 데이터 엔지니어에 관심을 가지게 됐다. 데이터 엔지니어는 데이터를 수집, 가공, 적재하여 데이터가 흐르는 파이프라인을 설계 및 구축하는 직무로, 분석가/기획자의 니즈에 부합하는 데이터를 제공하는 것이 목표이다. ..

5. DM 채팅 Side Panel Direct Message UI DIRECT MESSAGES(1) {this.renderDirectMessages()} user 목록 가져오기 접속 중인 유저 파란색으로 표시 addUsersListeners = (currentUserId) => { const {usersRef} = this.state; let usersArray = []; usersRef.on("child_added", DataSnapshot => { if(currentUserId !== DataSnapshot.key) { let user = DataSnapshot.val() user["uid"] = DataSnapshot.key user["status"] = "offline"; usersArray.p..

전체 코드 : GitHub 0. 개념 Redux란? Redux is a predictable state container for JavaScript apps. Action : a plain object describing what happened Reducer : a function describing how the application's state changes Store : the object that brings them together Reducer는 action이 store를 어떻게 업데이트 하는지 기술하는 함수이다. Reducer는 항상 state와 action을 받아 state를 return 해줘야 한다. Dispatch를 사용하여 store의 reducer에 action을 전달한다. Ac..

직접 링크를 입력해 접속한 사이트들 중 가장 많이 접속한 10개의 사이트들을 나열해주는 Chrome Extension App을 만들어보자! 💡 Chrome Extension 구성 요소 Chrome Extension App을 만드는 데 필요한 세 가지 요소는 manifest.json, Icon, HTML/CSS/JS이다. manifest.json { "name": "Typed URL History", "version": "1.2", "description": "Reads your history, and shows the top ten pages you go to by typing the URL.", "permissions": [ "history" ], "browser_action": { "default_p..

📝 Redis란? Redis는 Remote Dictionary Server의 약자로서, 키-값 구조의 비정형 데이터를 저장하고 관리하기 위한 오픈 소스 기반의 비관계형 데이터베이스 관리 시스템이다. 메모리 기반의 저장소이기 때문에 필요한 정보를 빠르게 저장하고 가져올 수 있는 실시간 서비스에 적합한 저장소이다. 따라서 전체 데이터를 영구히 저장하기보다는, 캐시처럼 휘발성 데이터를 저장하는 데 많이 사용된다. 데이터를 지속적으로 유지하기 위해 모든 작업을 로그에 기록해서 디스크에 저장한 후, 시스템을 구동할 때 로그를 기반으로 데이터를 다시 메모리에 올린다. 📝 Redis 사용 방법 npm install redis : Redis 모듈 설치 npm install hiredis redis : Non-Block..

⚡ mongoDB란? mongoose는 mongoDB라는 NoSQL 데이터베이스를 지원하는 노드의 확장모듈이다. mongoose는 mongoDB의 ODM(Object Data Mapping)으로, 문서를 DB에서 조회할 때 자바스크립트 객체로 바꾸어준다. NoSQL은 관계형 데이터 모델과 SQL을 사용하지 않는 모든 데이터베이스 시스템이다. 무한에 가까운 확장성을 제공하는데, 이를 위해 NoSQL 데이터베이스는 단순한 키와 값의 쌍으로 이루어져 있다. 인덱스와 데이터는 분리되어 운영되며 고정된 스키마도 없다. mongoDB는 문서지향 저장소를 제공하는 NoSQL 데이터베이스 시스템이다. 객체지향 프로그래밍과 잘 맞고 JSON을 사용할 때 유용하기 때문에 Node.js에서 가장 많이 사용하는 데이터베이스이..

채팅 앱에 이어 빙고 게임도 socket.io를 이용해 구현해보자! 📌 빙고 게임 기능 1. 유저 이름 입력받기 2. 접속 중인 유저 이름 출력 3. 한 명이 게임을 시작하려 하면 막기, 알림 출력 (두 명 이상) 4. 게임 진행을 위해 턴 넘기기 5. 자기 턴이 아닐 경우 진행 불가능, 알림 출력 6. 숫자가 선택되면 상대방에게 알림 출력 7. 선택된 숫자에 글자 효과 주기 8. 게임이 진행 중일 때 상대방이 떠난 경우, 게임을 종료시키고 알림 출력하기 server.js var express = require('express'); var app = express(); var http = require('http').Server(app); var io = require('socket.io')(http);..

socket.io를 활용해 실시간 웹 통신을 구현해보자! 💡 클라이언트 / 서버 통신 클라이언트 / 서버 통신은 서버에 있는 풍부한 자원들과 서비스를 통합된 방식으로 제공받기 위한 통신이다. 통신 프로토콜은 통신 서비스 또는 기능 수행을 위해 관련 통신 당사자 간 교환하는 정보의 종류와 표현 형식, 교환 절차, 그리고 교환 과정에서 실행해야 할 행위에 대한 규약이다. 대표적인 예로 IBM의 폐쇄형 망 구조인 SNA, 개방형 망 구조인 TCP/IP가 있다. Polling 방식은 클라이언트가 서버에 주기적으로 요청 후 응답을 받는 방식이다. 구현이 간단하지만 쓸모없는 요청/응답 때문에 많은 트래픽이 낭비되며, 다음 폴링이 이루어지기 전까지 어떤 이벤트가 왔는지 모르기 떄문에 실시간성이 보장되지 않는다. Lo..

⚡ Node.js란? Node.js란 서버사이드 자바스크립트이며 구글의 자바스크립트 엔진인 V8을 기반으로 구성된 일종의 소프트웨어 시스템이다. 지금까지 대부분의 애플리케이션은 Blocking I/O를 사용했기 때문에 멀티 쓰레드를 사용할 수밖에 없었다. 이 방식은 다음 두 가지 문제점이 있다. 1. I/O 요청을 하고 응답이 올 때까지 시간을 낭비한다. 2. 스케줄링을 위한 처리 시간과 문맥 전환 비용이 발생한다. 노드는 이러한 문제들을 싱글 쓰레드와 이벤트 기반의 비동기 I/O 처리로 해결한다. 싱글 쓰레드를 가진 노드는 I/O 작업이 시작되면 응답을 기다리지 않고 바로 다음 작업을 실행한다. I/O 작업이 종료되면 이벤트가 발생하고 노드로 개발된 프로세스가 이벤트 큐에 등록된 새로운 이벤트를 감지하..

프로토타입 패턴 자바스크립트는 Java나 C++ 같은 클래스 기반의 객체지향 언어와는 달리 프로토타입 기반의 객체지향 언어이다. 때문에 자바스크립트에서 클래스 개념은 존재하지 않는다. 많은 개발자들이 이로 인해 자바스크립트를 처음 접할 때 어려움을 겪자 ES6부터 클래스 문법이 새로 추가되었다. 다만 이는 클래스를 흉내내 구현한 프로토타입 기반의 함수이지, 자바스크립트가 클래스 기반의 언어가 되었다는 의미는 아니다. 프로토타입 패턴이란 객체를 생성할 때 원본 객체를 복제하여 생성하는 방법이다. 자바스크립트는 객체를 생성할 때 프로토타입 패턴을 사용한다. 객체가 함수를 사용해서 만들어지면 객체는 함수의 프로토타입 객체를 복제하여 생성된다. (자바스크립트는 함수가 생성될 때 자동으로 그 함수의 프로토타입 객..