차곡차곡 차곡차곡

'이인용' 프로젝트에서 사용한 socket.io를 정리해봅니다. 양방향 통신 채널 대부분 소켓은 실시간 채팅 시스템을 구현하는데 사용합니다. 채팅 메시지를 작성할 때마다 서버가 메시지를 받아서 다른 연결된 클라이언트에 메시지를 푸시해줍니다. socket.io는 서버 소켓과 클라이언트 소켓으로 구성됩니다. connect // 서버 const app = require('express') (); const http = require('http') .createServer(app); const io = require('socket.io') (http); io.on('connection', (socket) => { console.log('connected'); }); const PORT = 3000; http.l..

왜 배포를 해야하나요? 웹 서비스를 만드는 작업은 결국엔 다른 사람들이 이용해야 의미가 생깁니다. 그렇기 때문에 웹 개발자는 배포에 대한 기본적인 지식을 가지고 간단한 배포를 할 수 있어야 합니다. 어떻게 배포를 하나요? AWS(Amazon Web Services)이라는 아마존에서 제공하는 클라우드 서비스를 통하여 네트워크 상의 컴퓨팅 리소스를 사용합니다. 클라우드 컴퓨팅(Cloud Computing) 클라우드를 통해 가상화된 컴퓨터의 시스템 리소스를 제공 물리적인 데이터 센터와 서버를 구입하는 대신 사용됩니다. S3, EC2, RDS Amazon Simple Storage Service (S3) 인터넷용 스토리지 서비스로써 데이터 스토리지 인프라에 액세스하여 트래픽이 증가함에 따라서 장비도 증설해야하는..

0px Database란? SELECT WHERE ORDER BY INSERT INTO DELETE UPDATE SQL JOIN 데이터를 어디에 저장해야 할까요? 만약에 유저의 클라이언트에 데이터를 저장한다면 유저가 클라이언트를 종료할때 사라질 것입니다. 그렇다면 서버에 데이터를 저장하는 것을 어떨까요? 유저가 페이지를 종료하여도 데이터는 서버에 남을 것입니다. 서버에 데이터를 보관하게 되었다면 아무런 문제가 없을까요? 데이터를 정리하지 않는다면 데이터를 불러오기 힘듭니다. 저장공간을 비효율적으로 사용하고, 찾는데에 시간이 걸리기 때문에 데이터를 관리하는데 특화된 서버를 만듭니다. 이를 데이터베이스 서버라고 부릅니다. 어떻게 데이터베이스에 데이터를 분류하고 저장하나요? SQL(Structured Quer..

왜 React를 사용하는가? 왜 JSX를 사용하는가? Rendering Elements Components and Props State and Lifecycle 왜 React를 사용하는가? Elements & Components로 구성되어서 복잡한 앱을 작고 재사용 가능하게 만듭니다. 다음은 Hello World! 를 출력하는 기본적인 코드입니다. ReactDOM.render( Hello, World!, document.getElementById('root') ); JSX 코드를 보면 html 태그가 있는 구문은 JSX라고 부릅니다. JSX는 React의 elements를 생성하고 DOM에 렌더링 합니다. const element = Hello, world!; 왜 JSX를 사용하는가? React는 마크업..

인터넷은 무엇인가? 데이터를 주고받을 수 있는 컴퓨터의 네트워크입니다. 데이터를 구조화하여 저장, 수정, 삭제, 정의, 관리하는 데이터베이스 서버(DBMS)에 접속하여 서비스를 요청하고, 서버로부터 받는 응답을 사용자에게 클라이언트가 보여줍니다. 데이터를 어디에서 어떻게 주고받는가? 간단히 웹(Web)이라고 불리는 월드 와이드 웹(World Wide Web, WWW)에서 인터넷상의 정보를 HTTP, 하이퍼텍스트, HTML형식 등을 사용하여 교환할 수 있습니다. 규칙과 형식 HTTP (Hyper Text Transfer Protocol) 클라이언트와 서버가 통신하기 위해 정해놓은 신호 체계로써 요청과 응답 메시지의 형식이 정해져 있습니다. 요청과 응답으로 이루어지며 서버는 클라이언트의 요청에 데이터를 전달..

왜 사용하는가? 통신 과정에서 HTTP의 속성으로 인해 서버에서 응답을 한다면 연결이 끊깁니다. 이때 데이터를 요청할때마다 데이터를 보여주는 전체 페이지를 리로드해야 한다면 매우 비효율적입니다. 그러므로 필요한 데이터만 받아서 부분적으로 리로드하여 빠르게 원하는 데이터를 보여주는 효율적인 Ajax를 도입합니다. Ajax 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식입니다. 비동기식으로써 여러 가지 일이 동시적으로 발생하기 때문에 서버와 통신하는 동안 다른 작업을 할 수 있습니다. 덕분에 서버와 자유롭게 통신하며, 페이지를 새로고침하지 않고 부분적으로 작동되는 효율적인 웹페이지가 생성됩니다. Ajax 구현방법 통신을 하기 위해서 사용하는 여러가지 API가 있습니다. 그 중에서 XMLHttpReq..