C언어를 공부하면서 처음 접한 내용은 printf와 scanf를 이용하여 키보드와 모니터로 데이터를 주고 받는 정도였다.
화면과 키보드(콘솔)를 통해 입출력하는 대상을 파일로 바꾸어서 파일 입출력을 공부해 본 적이 있다.
콘솔 입출력과 파일 입출력에는 어떠한 공통점이 있다고 생각되지 않는가?
파일 입출력과 소켓 통신 사이에도 어떠한 공통점을 발견할 수 있을 것이다.
파일은 로컬에서 통신, 소켓은 멀리 떨어진 호스트들간의 통신
소프트웨어 차원에서 호스트들간에 연결해주는 장치를 소켓이라고 한다.
websocket : 양방향 통신 가능
npm install socket.io
// ────────────────── socket 세팅 ──────────────────
const http = require('http').createServer(app); // 서버 생성
const {Server} = require('socket.io');
const io = new Server(http);
// ────────────────── mongoDB ──────────────────
app.set('view engine', 'ejs');
var db;
const mongoClient = require('mongodb').MongoClient;
mongoClient.connect(
process.env.DB_URL,
function(err, client) {
if(err) return console.log(err);
db = client.db('TodoApp');
// 소켓 코드
app.db = db;
})
// 소켓서버 http로 불러왔으므로 app을 http로 변경
http.listen( process.env.PORT, function() { // 8080 포트에 서버를 띄워라
console.log('listening on 8080');
})
서버와 통신할 때 송신은 내가 원할 때 하는 것이지만, 수신은 항상 대기하고 있어야 한다. 내부적으로 계속 돌면서 대기를 한다.
웹소켓에서는 io.on()
이 그 역할을 해준다.
// ────────────────── socket ──────────────────
app.get('/socket', function(req, res) {
res.render('socket.ejs',);
})
io.on('connection', function(socket) { // 수신부
console.log('유저 접속됨');
socket.on('user-send', function(data) {
console.log(data);
})
})
<body>
<%- include('nav.html') %>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
<h1 class="ml-2 my-3 text-center">채팅방</h1>
<input id = "msg" />
<button id="send">서버에 메시지 보내기</button>
<script>
let socket = io(); // 웹소켓에 접속해주세요.
$('#send').click(function() {
// 버튼 클릭 시 수행
socket.emit('user-send', $('#msg').val())
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
// ────────────────── socket ──────────────────
app.get('/socket', function(req, res) {
res.render('socket.ejs',);
})
io.on('connection', function(socket) { // 수신부
console.log('유저 접속됨');
socket.on('user-send', function(data) {
console.log(data);
// io.to(soket.id) : soket.id를 가진 사람에게만 메세지 보내겠다.
// io.emit : broadcast
io.to(socket.id).emit('broadcast', data);
});
})
<body>
<%- include('nav.html') %>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
<h1 class="ml-2 my-3 text-center">채팅방</h1>
<textarea class="container mt-4" id="rcv" rows="10"></textarea>
<input id = "msg" />
<button id="send">서버에 메시지 보내기</button>
<script>
let socket = io(); // 웹소켓에 접속해주세요.
$('#send').click(function() {
// 버튼 클릭 시 수행
socket.emit('user-send', $('#msg').val());
})
socket.on('broadcast', function(data) {
console.log(data);
$('#rcv').append(data + '\n');
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
$('#room1').click(function() {
// 채팅방1에 입장
socket.emit('joinroom', '채팅방 입장 시켜줘')
})
$('#room1-send').click(function() {
// 채팅방1에 입장
socket.emit('room1-send', '채팅방 1번 채팅')
})
<body>
<%- include('nav.html') %>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
<h1 class="ml-2 my-3 text-center">채팅방</h1>
<textarea class="container mt-4" id="rcv" rows="10"></textarea>
<input id = "msg" />
<button id="send">서버에 메시지 보내기</button>
<p></p>
<button id="room1">채팅방1 입장</button>
<button id="room1-send">채팅방1에서 메시지 보내기</button>
<script>
let socket = io(); // 웹소켓에 접속해주세요.
$('#room1').click(function() {
// 채팅방1에 입장
socket.emit('joinroom', '채팅방 입장 시켜줘')
})
$('#room1-send').click(function() {
// 채팅방1에 입장
socket.emit('room1-send', $('#msg').val())
})
$('#send').click(function() {
// 버튼 클릭 시 수행
socket.emit('user-send', $('#msg').val());
})
socket.on('broadcast', function(data) {
console.log(data);
$('#rcv').append(data + '\n');
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
로컬 버전 관리 시스템 : Git(내 소스코드 관리)
원격 버전 관리 시스템 : Github(협업)
버전관리 시스템
소스코드의 변경사항을 관리하는 도구
각각의 파일을 백업한다.
타인에게 공유해서 여러 사람이 공동으로 작업할 수 있게 한다.
드랍박스, 구글 드라이브, 원 드라이브, 아이 클라우드
파일의 변경 상황을 추적하고, 백업하고, 공유해주는 서비스
CVS, SVN, GIT
Git은 현 시점에서 가장 많이 사용되는 버전 관리 시스템
왜 우리는 깃허브를 배워야 하나?
대부분의 개발자들이 깃허브 닷컴이라는 서비스를 알고있고 이용하고 있다.
현존하는 절대 다수의 오픈 소스들은 깃허브를 매개로 공동작업으로 만들어지고 있다고 해도 과언이 아니다.
개발자라면 깃허브는 꼭 알아야 할 서비스이다.
협업을 해야 한다면 깃허브를 알아야 의사소통에 엄청난 도움을 줄 것이다.
git config --global user.email eunyu0604@gmail.com"
git config --global user.name "hyejin"
git init
git add 파일명
git add .
: 작업 폴더의 모든 파일을 staging하고 싶을 때 사용
작업물을 add 하면 저장소에 올라갈 준비를 마치게 된다. (저장된 것이 아님)
git commit -m '관련내용메시지'
git status
파일 상태를 확인하는 명령어
파일 수정사항이 생겼을 때 (staging, commit X)
수정한 파일을 staging 했을 때 (commit X)
commit까지 완료했을 때
git log
버전 정보를 알고 싶을 때, 특정 버전으로 돌아가고 싶을 때 사용한다.
git diff
수정사항을 구체적으로 알려준다.
git diff commitId commitId
git log로 확인가능한 commitId 두개를 넣으면 두 버전의 차이를 확인할 수 있다.
git branch 브랜치이름
브랜치 생성
git switch 브랜치이름
브랜치 변경
master에서 price 브랜치를 생성해서 이동했을 때 master의 파일들이 모두 복사가 된다.
price 브랜치에서 파일을 변경하고 master로 돌아왔을 때 price 브랜치의 작업내역은 master 브랜치에 적용되지 않는다.
git merge 브랜치이름
브랜치가 합쳐진다.
git branch -M main
브랜치 이름을 바꾼다.
git push -u 원격저장소 main
최초로 원격저장소에 파일을 올릴 때 사용
git remote add origin 원격저장소
매번 푸시할 때마다 주소를 치는게 번거로우므로 origin으로 주소를 저장한다.
git clone 원격저장소
저장소 파일들을 설정한 폴더로 내려받는다.
git pull (원격저장소 main)
pull은 최대한 자주 할 것!