삐에로의 지식창고

C# [4주차] 인터페이스 (Interface) 인터페이스란 클래스가 구현해야 하는 메서드/속성/이벤트의 계약을 정의한걸 의미한다! ( Class가 어떤 유형인지 정해주는 느낌인거 같은데.. ) 인터페이스의 이점 코드의 재사용성 인터페이스를 사용하면 다른 Class에서 해당 인터페이스를 구현하여 동일한 기능을 공유할 수 있다! 다중 상속 제공 C#에서는 Class는 단일 상속만을 지원하지만, 인터페이스는 다중 상속을 지원한다. -> Class가 여러 인터페이스를 구현(다중 상속)함으로써 여러 개의 기능을 조합할 수 있다! 유연한 설계 인터... Read More

개요 저번에 받은 피드백을 토대로 부하 테스트를 실행하기 위해 여러 준비를 하였다! PM2 일단 EC2 인스턴스(Lobby, Game) 서버의 실시간 데이터를 확인하기 위해 pm2 link 를 사용해 pm2 웹 Monit을 사용하였다 https://pm2.io/ 버킷을 만든다 아래와 같이 pm2 link를 이용해 인스턴스와 연결해준다 pm2 startup으로 세팅을 마무리한 EC2를 이용해 AMI 생성해준다 ( 나중에 증설하기 편하게 < 근데 이거 새로 link 연결할 때 이름을 따로 설정해줘야 한다.. ) 부하 테스트 기록하기 전... Read More

C# [3주차] 이번 회차에서는 C#의 클래스와 객체에 대해 설명하고 있다. 저번과 같이 중복되어 알고 있었던 부분보다 새롭게 알게되거나 개념이 달라진 부분 위주로 작성할 계획이다! 생성자(Constructor)와 소멸자(Destructor) 객체가 생성될 때 호출되는 특별한 메서드로 Node.js의 Constructor와 같은 개념이다! 조금 다른게 있다면, 오버로딩이나 초기화 시 메서드 이름을 클래스 이름으로 해줘야된다는 것 정도..? class Person { private string name; private int age; // 매개변수... Read More

C# [1주차] 언어의 특징 객체 지향 프로그래밍 언어 동적 할당된 메모리를 자동으로 회수 변수나 객체의 자료형이 미리 정의되어 있어 데이터 타입에 대한 안전성과 정확성을 보장 .NET 프레임워크를 통해 다양한 프로그래밍 언어를 지원함 (-> 애플리케이션 개발 생산성 증가) 변수와 자료형 구조 기본적으로 사용되는 자료형으로 메모리의 크기와 표현 범위가 조금씩 다르다! 자료형 .NET 데이타 타입 크기 (바이트) 범위 sby... Read More

개요 캠프를 마치고 앞으로의 취업준비 과정에서 현업에서 사용하는 언어와 이에 따라 배워야할 지식들을 쌓을 계획이다! 초기에는 C++를 배우며 C#을 간접적으로 배우는 방식으로 공부를 시작하려 했지만.. 현업에서 주로 사용되는 C#을 먼저 배우고, 이를 이용해서 서버를 구축해보는게 더 시간 대비 많은 경험을 할 수 있을 것 같아 계획을 변경했다! 스터디 결성 현재 같이 캠프를 수료한 몇몇 분들과 함께 전에 만든 프로젝트를 C# 서버로 재구축해보면서 멀티스레드나 언어의 특징들을 경험해보려한다! 그렇게 6~8인으로 구성된 스터디 그룹에서 주어진 강의나 취업준비를 어느정도 마치고, 제대로 프로젝트를 시작하는걸로 회의... Read More

피드백 프로젝트 설명 브로셔 CI/CD 구축 새로운 기능 업데이트로 인한 배포 시, 서버의 가용성을 높일 수 있는(무중단 배포) CD 프로그램을 도입하였다면 좋았을 것 같다. 분산 서버 관리 분산된 서버에서 공통으로 사용할 수 있는 부분은 따로 관리할 수 있게 만드는게 좋을 것 같다. 이동 동기화 방식 현재 프로젝트의 기능 구현을 위주로 진행하면서 이동 동기화 로직에서 클라이언트 의존도가 높게 구현되었다..! 이 부분은 서버에 TileMap 및 A* 알고리즘을 구현하여 클라이언트의 의존도(=장애물로 인한 물리 계산)를 낮추는 게 훨씬 서버 지향적인... Read More

게임 플레이 테스트 Health Check 오류 기존 Gateway가 1개의 서버로 돌아갔을땐 문제가 없었으나, 이제 Gateway가 다중화 되면서 문제가 생기기 시작했다! 바로 특정 Gateway의 HealthCheck에 오류가 생겨 Lobby 나 Game 서버와의 접속을 끊어버린 다는 것이다! 오류가 난 상황과 이유를 대략적인 가설로 설명을 해보자면 (위는 중간 확인을 위한 console.log 이다) this.intervals.push(setInterval(this.healthCheck, 5000)); healthCheck = async () => { // stack 증감 c... Read More

AWS ECS 어제 제대로 정리하지 못한 정보들을 정리해두려 한다 ECR 일단 ECS에서 실행될 “서비스”를 가동하기 위해선 Task라는 컨테이너 실행 단위를 정의 해주어야 한다! 그럼 컨테이너 실행 단위를 정의하기 위해 컨테이너를 만들 Image를 불러와야 하는데.. -> 이 때 사용되는 것이 ECR(Elastic Container Registry) 이다! ECR에 리포지토리를 생성해준다 ECR에 Docker Image 파일을 빌드해주려면 AWS CLI 를 설치해야한다! AWS CLI 를 설치 후, PowerShell에서... Read More

Gateway 로드밸런싱 AWS ECS 세팅 저번에 만든 Docker Image를 통해 ECS 세팅을 마치고 NLB에 연결해줄 예정이다! ECS(Elastic Container Service) AWS CLI을 깔고 IAM에 사용자를 생성하여 엑세스 키를 생성해주고… AWS CLI를 이용해 Docker Image를 생성 후 ECR에 넣어준다! # aws IAM id 접속하기 aws configure # 이후에 Access key / 보안 키 / 지역 을 차례대로 입력해준다 ECS 클러스터를 생성해 서비스를 생성.. 하기전에 Task 정... Read More

Gateway 로드밸런싱 Gateway Redis 동기화 이제 Gateway 서버에 로드 밸런스 + 오토 스케일 아웃 기능을 추가하기 위해 전체 게임에 접속한 유저들을 단일 서버 기록에서 Redis로 Gateway 공통 정보로 승격시켜준다! 기존 로그인 핸들러 확인 // 4. 중복 로그인 유저 세션에서 체크 << User.id (key) 를 이용한 Redis sortedSet 사용 const existingUser = await userSession.checkId(userData.id); if (!existingUser) { throw new Custom... Read More

추가 작업 현재 기획상에서 허니 머스타드라는 아이템이 중앙 코어에서 생성할 수 있고, 이를 무기에 발라야 보스에 데미지가 들어가는 것이 있다! 서버에서 보스 데미지 계산과 허니 머스타드 조합 기능을 기존에 있던 코드들을 개량해서 추가할 예정이다! 기존의 무기 조합 핸들러를 응용 // 만약 조합아이템 중 하나가 머스타드이면 if ( config.game.item.mustardItemCode === itemCode1 || config.game.item.mustardItemCode === itemCode2 ) { // '1xx' = ... Read More

모의 면접 오늘은 프로젝트 진행과 지금까지 배웠던 사항들에 대해 모의로 면접을 보는 날이였다! 주요 질문 TCP/IP 통신 시 일어나는 과정을 구체적으로 설명해주세요(= 현 프로젝트가 TCP 통신 서버임 ) 서버가 느리다 라는 말을 들었을 때 어떻게 해결할 건가요?(= 게임 서버의 기본적인 트러블슈팅) 분산 서버의 이점과 주의사항을 설명해주세요. (= 현재 프로젝트에 분산 서버를 사용한 이유) Node.js 를 이용해 게임서버를 만들면 어떠한 장점과 단점이 있나요? (= 서버로 Node.js를 사용한 이유) 추가 조사 주요 질문들에... Read More

추가 작업 파괴 가능한 오브젝트의 설치 및 종류들을 만드는 작업을 맡게되었다. 설치 기본적으로 파괴 가능한 오브젝트를 벽 이라고 정해두어 기존에 있는 base를 상속받아 생성해준다 import DestructibleObjectBase from '../base/destructibleObjectBase.class.js'; import { getGameAssets } from '../../init/assets.js'; class Wall extends DestructibleObjectBase { const { objectDropTable }= getGameAssets() constr... Read More

좋은 코드 코드의 효율성으로만 따지자면 컴퓨터가 최소한의 처리를 할 수 있는 컴퓨터 친화적으로 최적화된 코드가 좋다고 생각이되지만.. 코드의 활용성/범용성을 생각해보면 이 코드를 언제 누구든 수정할 수 있게 만드는 가독성도 중요하다고 생각이 된다 요약하자면 코드가 완성형이라는 가정이라면 최적화된 코드가 최고지만, 현실은 언제나 그럴 수 없기에 업무효율성을 생각한 가독성/유지보수성이 좋은 코드가 베스트라고 생각한다! 이러한 가독성/유지보수성을 올리기 위해선 프로젝트의 전체 흐름을 파악해 범용성을 늘리고, 함수나 변수명이 직관적으로 이해될 수 있을 정도의 이름으로 정해주고, 주석을 간결화해서 전체적 흐름을 한 눈... Read More

피드백 수용 Gateway - Other Server 최적화 현재 Gateway에선 Payload를 디코딩하여 객체로 생성하는데, 이 생성된 객체는 Heap 영역에 저장되어 Garbage 컬렉션에 의해 사라지기 전까지 메모리를 사용하게된다.. 그렇기에 불필요한 메모리 사용을 줄이기 위해 Gateway에서 무조건적으로 Payload를 디코딩하지 않고, Payload 정보가 필요한 핸들러에서만 직접 디코딩하도록 수정하여 기본 Packet 전달 시의 Heap 영역 사용을 최소화 하였다! // 핸들러에 직접 payloadBuffer를 주도록 변경 const packet = so... Read More

TCP / UDP TCP (Transmission Control Protocol): 연결 지향적, 신뢰성 높음, 순서 보장, 오류 복구 가능, 비교적 속도가 느린 프로토콜 (예: 파일 전송, 이메일) UDP (User Datagram Protocol): 비연결 지향적, 신뢰성 낮음, 순서 보장 없음, 오류 복구 불가, 속도가 빠른 프로토콜 (예: 실시간 스트리밍, DNS) TCP / UDP 패킷 구조 차이 TCP 패킷: 헤더에 오류 검출을 위한 Sequence Number, Acknowledgment Number, Checksum 등 포함 ... Read More

중간 발표회 오늘은 중간 MVP 발표회가 있어, 현재 프로젝트에 대해 발표하면서 여러 관점에서 보는 프로젝트의 방향성을 조언받을 수 있는 기회이다! 피드백 발표에 사용할 서비스 아키텍쳐를 대략적으로 그린 자료이다. Gateway 서버가 중계하는 Client와 Other Server간의 패킷 교환방식에 대해서 최적화될 수 있는 부분이 있는가? 위와 같은 질문에 대해 명확한 해답을 찾아봐야 되겠다! ( 엉뚱하게 답변을 해버린 나는 오늘도 이불킥 ) 좀 더 자세히 파고들어보니 Packet을 디코딩하는 과정에서 디코딩된 Payload가 새로운 객체로 할당되고, 새로 생성된 “객체”는 Stack이 아닌... Read More

프로세스와 스레드 프로세스: 운영체제에서 실행 중인 프로그램의 인스턴스로 독립된 메모리 공간을 가짐 스레드: 프로세스 내에서 실행되는 흐름의 단위로 프로세스의 메모리 공간을 공유함 (=경량화된 실행단위) 차이점 프로세스는 독립적이며, 스레드는 프로세스 내에서 공유 자원을 사용함 프로세스의 생성/소멸 비용은 높고, 스레드는 상대적으로 낮음. 멀티 프로세스 / 멀티 스레드 멀티프로세스: 여러 프로세스를 동시에 실행하는 것으로, 독립된 메모리 공간... Read More

분산 서버 현재 진행한 분산 서버 구조에 개발을 마친 Game 서버 로직을 병합해주는 작업을 진행해준다! Protobuf 구조 병합 Game 서버의 Handler를 분산 서버에 맞게 구조 수정 새로 만들어진 PacketType들을 Gateway 서버에 맵핑 Latency 체킹 분산 서버가 되어 Gateway 서버가 추가되었기에 각 서버와의 latency가 게임에 영향이 크지 않을 정도로 나오는지 확인하기 위해 로직을 추가해준다. Gateway 서버의 Server Class에 레이턴시 확인용 인터벌 메서드를 설정해주고, 받아왔을 때 Log로 보여... Read More

Primary Key, Foreign Key, Entity-Relation Model Primary Key(기본 키)란 각 데이터들을 고유한 값으로 구분(+무결성 보장)해주는 기본적인 필드/컬럼을 의미합니다. Foreign Key(외래 키)란 2개 이상의 테이블 간 관계를 정의하고 데이터 무결성을 유지하는 데 사용하는 필드/컬럼을 의미합니다. ER Model이란 DB 설계를 위한 개념적 모델링 도구로, 실제 데이터를 Entity(개체)/Attribute(속성)/Relationship(관계) 라는 요소로 표현하는 모델을 말한다. Entity(개체) : 독립적으로 존재 가능한 객체나 개념을 나타냄... Read More

분산 서버 현재 기본 구조와 기능들이 구현된 상태에서 EC2에 올려서 잘 작동하는지 확인해보는 작업을 진행해준다! 게임 서버는 증설을 생각하여 인스턴스가 올라가면 바로 실행될 수 있는 AMI세팅을 해준다! 보안 그룹 설정 Gateway 서버에 접속할 수 있는 클라이언트의 입력을 받을 수 있도록 설정해준다! (원래는 다른 서버에서도 입력이 들어올 수 있도록 인바운드를 설정해주어야 하지만,현재는 TCP 통신방식을 사용하므로 필요가 없다!) (Gateway Server (TCP 연결 요청)-> other Server » TCP통신 사용) 이제 반대로 다른 서버(로비,게임) 에서는 Gateway 서버의 입... Read More

Array와 LinkedList Array는 메모리 상에서 하나의 묶음으로 고정되어있는 그룹이라면, LinkedList는 메모리와 상관없이 각각의 요소들이 동적으로 이어져있는 그룹! 이러한 차이점에 의해 Array는 빠른 접근 속도와 연속된 메모리 사용이 장점이지만, 크기 고정으로 삽입 및 삭제가 비효율적이고, LinkedList는 삽입/삭제가 효율적이지만, 접근 속도가 느리며 메모리 오버헤드가 발생할 수 있음! Stack과 Queue Stack과 Queue는 데이터를 저장하거나 삭제(사용)하는 순서의 차이가 있다! Stack은 자료를 LIFO(후입선출) 방식으로 팬케이크처럼 데이터를 쌓아서 사용하고, Qu... Read More

분산 서버 이제 Gateway 서버에서 동적으로 서버주소를 받아와 연결해주고 관리할 수 있도록 구현하였다! 남은일은 Health Check를 통해 게임서버에 로드밸런싱하는 로직을 추가 구현해주고, 게임이 끝난 시점을 Redis를 이용해 공유하도록 구조를 재설계해줄 예정이다! Health Check Gateway 서버에서 Redis를 이용해 서버마다 Health Check를 개별로 진행될 수 있도록 Server Class를 만들었다! class Server { constructor(serverId, socket) { this.socket = socket; this.socket.id = ser... Read More

Big-O Big-O 표기법은 알고리즘의 시간 복잡도와 공간 복잡도를 표현하는 수학적 표기법으로, 알고리즘이 입력크기에 따라 얼마나 빠르게 실행되는지(시간 복잡도) 및 얼마나 많은 메모리를 사용하는지(공간 복잡도)를 나타낸다! -> 이를 통해 여러 알고리즘의 효율성 분석하고 비교할 수 있다! Big-O의 주 개념 시간 복잡도(Time Complexity): 알고리즘이 실행되는 데 걸리는 시간을 입력 크기의 함수로 표현 예: O(n), O(n²), O(log n) 등. 공간 복잡도(Space Complexity): 알고리즘이 실행되는 데 필요한 메모리 공간을 입력 ... Read More

분산 서버 저번에 남아있던 문제는 패킷 분할 시, onData에서 while이 무한루프도는 오류였고, 이를 해결완료하여 오늘부터는 로드 밸런싱 조사 및 사용을 실질적으로 시작한다! 로드 밸런싱 ELB와 EC2 + AMI(Amazon Machine Image) / ECS + Docker 를 이용한 게이트웨이 Auto Scaling 방식은 부하 테스트 이후 하나의 해결방안으로 두고, 일단 기본적인 로드 밸런싱으로 게이트 웨이에서 게임서버로 보내주는 로직을 구현해준다! Redis 서버 동기화 현재는 게이트웨이 서버에서 로비서버와 게임서버의 주소를 상수로 정해주어 연결하고있는데, 이 방식을 동적으로 만들기 위해 ... Read More

분산 서버 서버 분리 마무리 작업 현재 서버들을 각 기능에 맞게 분리가 되어 클라이언트를 이용해 테스트해본 결과 잘 작동한다! 그러나 유저가 게임을 떠나면 Gateway에서만 끊긴 것이 적용되기 때문에 이를 다른 서버에서도 인식할 수 있도록 조정해야한다! 게임 서버 게임 삭제 게임이 끝나면 게임서버에선 관련된 세션들을 삭제해줘야 한다! 그렇기에 게임오버를 보내는 곳에서 일괄적으로 삭제해주는 로직을 추가해준다 // 게임 오버 로직 내부 if (coreHp <= 0) { console.log(`코어가 파괴되었습니다. HP: ${coreHp}`); const gameOverPayload = {}; ... Read More

분산 서버 구현 어제 마무리한 Gateway 서버와 연결될 로비와 게임서버 구조를 변경해준다! ( 사실 로비 서버는 로직 자체가 적기 때문에 금방 끝나버렸다) 게임 서버 현재 로비서버에서 호트스가 게임 시작을 누르면 Gateway 서버가 게임 서버에게 게임 정보를 전달해준다! 이를 이용해 게임 서버는 유저들을 포함한 게임을 생성하고 게임로직을 실행해준다. const createGameHandler = ({ socket, payload, userId }) => { const { room } = payload; if (!room) throw new CustomError('유효하지않는 요청입니다.')... Read More

분산 서버 구현 어제 기획을 마친 도식화를 토대로 게이트웨이 서버를 만들어주기 시작하였다! Gateway 서버 구조 이제 클라이언트와 Gateway 서버를 제외한 다른 서버(로비, 게임)와는 저번에 말햇듯이 무상태(Stateless) 가 되어 Gateway 가 클라이언트에게 받은 패킷을 다른서버로 줄때 UserId를 넣어 유저들을 구분할 수 있도록, 서버끼리의 패킷 구조를 아래와 같이 추가하였다! 이 때 문득 “서버간 UserId를 주고받으려면, 다른 서버에게 주려는 유저는 무조건 로그인이 되어 있어야 하지 않나..?” 라고 생각이 들어 Gateway 서버에 로그인/회원가입 기능을 병합해도 괜찮은가 조... Read More

분산 서버 구현 현재 기존 코드를 로비 <> 게임 으로 분리하는 작업을 어느정도 마쳤다! 이제 남은건 각 서버에 레디스 관련 추가 기능을 만들고, 이를 테스트 해보는 것이다. 로비 서버 일단 로비서버에서 레디스에 값을 저장하고 클라이언트에게 저장한 값들과 게임서버에서 검증할 값을 주도록 설계하였다! 클라이언트 반환 값 게임 서버 주소 클라이언트가 게임 서버에 접속하기 위해서 직접적인 주소를 줘야한다! 레디스 키 인게임 정보(주로 유저정보)를 게임 서버에서 알고, 검증하기 위해 레디스 키를 부여해준다! ... Read More

디버거의 삶 코드를 빠르게 해석하고 오류를 찾는 것을 잘한다고 팀원분들이 얘기해주셔서 문제가 생기는 부분이 생기면 붙어서 도와주는 역할을 맡게 되었다! ( 물론 비교적 잘하는 것이죠.. 우쭐 ㄴㄴ ) 그러나 디버깅 일을 하는게 단편적인 일들이 많아 장기적으로 무얼 할 지 생각을 해야했다! 서버에서 타일맵을 저장 및 이용하여 검증할 수 있도록 수정가능성 확인 Docker 공부 부하 테스트 라이브러리 및 툴 사용방법 및 장단점 비교하기 서버의 타일맵 현재는 구현된 MVP는 클라이언트의 움직임을 에코서버처럼 다른 클라이언트에게 전달하는 역할이 많다... Read More

업무 재할당 어제는 장염이슈로 하루를 거의 쉬듯이 지나가게되어, 진행사항에 따라 업무를 재분배 받았다! Docker Docker의 사용 이유와 사용방법 찾아보기 개발자 환경이 갖추어져있지 않은 PC에서 시뮬레이션을 공유하기 위함 AWS ECS를 사용하여 서버 크기를 동적으로 조절하는데 이용 Client 클라이언트 디버깅으로 몬스터 동기화 부분을 수정하는 업무를 받았다! 한줄 평 + 개선점 작업이 늦게까지 안끝나서 TIL을 정리할 시간이 부족헀다.. Read More

깊은 복사와 얕은 복사 얕은 복사(Shallow Copy)는 객체의 참조 값(주소 값)을 복사하여 새로운 객체를 생성하지 않고, 기존 객체와 동일한 메모리 주소를 참조하는 복사이며, 반면 깊은 복사(Deep Copy)는 객체의 실제 값을 복사하여 새로운 객체를 새로 생성하는 것이다! 얕은 복사 얕은 복사는 주소를 복사하기 때문에 일반적인 STRING/INT/BOOL 과 같은 형식은 복사된 값을 가져오지만, 배열이나 객체와 같은 경우는 주소를 복사하기 때문에 원본 자체를 가져오게된다! 그로인해 가져온 객체나 배열을 수정하면, 원본도 똑같이 수정이되는 참사가 일어난다.. const Mine = ["noodle... Read More

프로세스 정리 어제 아웃 게임 및 게임 프로세스에 맞게 서버 및 통신 구조를 리팩토링하였다! 그 이후 서버와 클라이언트 간 필요한 정보만 주고받을 수 있도록 프로토버프 종합이 끝나, 이와 관련된 핸들러를 수정해주어야 한다! 프로토버프 적용 현재 서버의 경우엔 2차까지 기능 구현이 대부분 맞춰졌으나, 이를 시험할 클라이언트 구현이 부족하여 이를 도와주기로 하였다! 기존 클라이언트 담당자 분과 협의를 하여 프로토버프 구조를 통해 패킷을 생성하고 서버에게 보내주는 부분을 담당하기로 하였다 수정 부분 전달 패킷의 페이로드 구조가 바뀐 ... Read More

2차 구현 배정받은 역할인 코어 클래스 구현( 본진 및 게임오버 조건 )을 시작한다! 코어 구현 게임 내 맵 중심에 있어 몬스터에 의해 공격을 받아 게임오버 트리거가 되는 “코어”와 “코어 관련 통신” 기능을 만든다! 서버의 코어 코어의 기능은 위치와 hp만 가지고 피격을 검증하는 것이다. 그렇기에 게임당 코어가 1개인 점을 생각하여 Game Class에 core를 관리할 수 있는 메서드와 필드를 정의해준다! class Game { constructor() { this.coreHp = config.game.core.maxHP; this.corePo... Read More

2차 구현 일단 MVP에 관련해 구현해야할 기능들은 마쳤다! 이제 이 기능들을 연결하여 디버깅하는 작업이 남았는데, 저번 역할분배처럼 기초구현과 디버깅 총괄을 나눠 MVP 기능들을 마무리하는 작업과 다음 2차 구현 작업을 동시에 하기 로 하였다 노선 수정 대략적으로 역할분배를 통해 작업을 분리하여 각 작업자들이 시작을 하려 했는데.. 서버에서 충돌처리를 위한 맵을 어떻게 관리 및 사용해야할지가 너무 막막하다는 걸 깨닫게 되었다! 장애물이 있어 이동하지 못하는 영역은 어떻게 구별할 것이고, 최적화 할 것인가? 장애물이 포함된 맵 자료를 받은 클라이언트는 어떻게 해석하여 맵을... Read More

업무 재분배 현재 진행된 사항들을 정리하여 업무 재분배를 통해 자원을 효율적으로 사용할 수 있도록 했다! 속도 계산 팀원 분들 중 추측항법에 관해 고민하시고 계시길래 같이 이론을 정리했다! 그리고 기존에 클라이언트의 timestamp를 받는 생각을 했는데, 이는 클라이언트 의존적 데이터라 위험할 수 있다 생각되어 서버의 시간으로 latency를 감안하도록 변경하였다! 통신 구조 수정 어제 작업한 통신 구조가 제대로 작동하는지 확인하기 위해 디버깅용 더미 클라이언트를 만들어준다! 더미 클라이언트 일단 기초적인 TCP 통신을 위한 socket 과 필요한 정보들을 저장할 수 있도록 구... Read More

디버깅 어제 제작한 오브젝트베이스 클래스의 기능을 테스트해보기 위해 패킷구조를 정하고, payload를 인코딩/디코딩 하기 위해 protobuf 구조도 종합하였다! 패킷 구조 패킷을 통해 통신을 하기 위해 패킷의 구조를 정하고, 이를 해석 및 생성 해주는 로직을 구현한다! const onData = (socket) => (data) => { console.log('데이터 수신'); socket.buffer = Buffer.concat([socket.buffer, data]); const packetTypeByte = config.header.packetTypeByt... Read More

var, let, const JavaScript에는 상수/변수를 선언하는데 사용되는 명령어들이다! var 제일 기본적으로 사용되었던 변수 선언 명령어 중복 선언이 가능하여, 중복 선언 시 마지막 값이 할당되게 된다 참조 유효 범위가 함수 단위 범위로 함수 내에서만 선언되었다면 함수의 어디에서든 사용가능하다! 호이스팅 된 값이 undefined로 선언되어, 같은 함수 내에서는 선언되기 전에도 참조가 가능하다.. let ES6 의 등장으로 새로 등장한 변수 선언 명령어 중복 선언이 불가하다! 참조 유효 범위는 블록(“... Read More

MVP 구현 시작 어제 기록했던 것처럼 오늘은 MVP의 기능들을 구현하기 전, 전체적인 기한을 정하기로 하였다. 기한 설정 MVP 구현 기간 : 팀원별로 분리한 기능 구현을 마치는 기간 MVP 서버 종합 : 서버에서 통신하는 형태를 종합받아 정해주기 클라이언트 <> 서버 연결 : 구현된 클라이언트와 서버를 정해진 통신 구조로 연결하는 과정 발표준비 : 중간 점검/발표를 위해 자료 정리를 하는 기간으로 2차 구현을 병행하며 할 예정이므로 메인이 아니라 적어두었다. 역할 분담 원래 맡게된 기능이 게임루프 기능으로, 서버에... Read More

프로젝트 시작 주어진 클라이언트 파일을 이용해 어떠한 게임을 기획하여 서버를 구축할 것인가에 대해 회의를 하였다. 기본적인 진행방향은 낮엔 파밍을하고, 저녁엔 몬스터들한테서 거점을 지키는 방식으로 채택되었다. 이를 구현하기 위해 기존에 받은 클라이언트를 커스텀하는 방향으로 진행되었다. 기획 시점은 2D 탑뷰로 기획하여 낮과 밤에 따라 게임형식이 조금씩 바뀌는 부분을 감안하여, 기초적인 인게임 화면을 구상해 보았다! 기획 중간부터 B급 감성으로 몬스터들을 “오리”로 설정해보면 어떨까? 하는 이야기가 나왔었다. (대부분 재밌을 것 같다고 하여 그대로 프로젝트이름이 Ducktopia... Read More

프로젝트 끝 프로젝트가 끝나고, 이에 대한 설명을 위해 자료들을 정리해두었다! Github 메인 프로젝트 서버 제공되었지만, 일부 버전 및 코드를 수정한 클라이언트 설명자료 회고록 Node.js의 싱글스레드 위의 자료에서 로그인 대기열 관련 질문으로 Node.js는 싱글 스레드이므로 하나씩 처리가 되는데, 과연 로그인 대기열이 필요한가에 대해 받았었다. 이에 대해 로그인 대기열을 만들기 전 코드로 테스트를 해보며 가설을 다시 세워보게되었다. 기존 코드 + 디버깅용 콘솔로그 추가 ... Read More

마무리 오늘은 프로젝트의 완성도를 높일 수 있도록 최적화를 해가는 작업을 실시했다. notify 함수 설정 기존 sendNotification 메서드를 통해 room 내의 player들에게 패킷을 만들어 보내주었다! 하지만 패킷을 만드는 일은 핸들러가 하는게 구조상 알맞은 것 같아 수정을 하였다! // Room 내부 메서드 /* 플레이어들에게 패킷 보내기 */ notify(infos) { for (const info of infos) { this.getPlayer(info.id).user.sendPacket(info.packetType, info.payload); } } // 핸들러에서 만들... Read More

운영체제 운영체제는 컴퓨터 시스템 자원을 관리하고 사용자 프로그램이 하드웨어에 접근할 수 있도록 인터페이스를 제공하는 소프트웨어 컴퓨터 시스템의 하드웨어 자원을 효율적으로 관리하는 역할 사용자와 하드웨어 사이의 인터페이스를 제공해 효율적으로 응용 프로그램이 동작하도록 지원함 역할 자원 관리 CPU, 메모리, 디스크, 네트워크 등 컴퓨터 시스템의 자원을 관리하고, 각 프로그램이 필요한 자원을 효율적으로 사용할 수 있도록 운영체제가 이를 조정 프로세스 관리: 여러 프로그램(프로세스)이 동시에 실행될 때, 운영체제는 이 프로그램들이 CPU 시간을 적절히 나... Read More

리팩토링 작업 utils 폴더 개선 현재 utils 폴더보다 다른구조로 병합하거나 옮길만한 파일들이 있다! 그러한 파일들을 정리해가며 옮겨준다. utils # utils 폴더 ├─ match # 매칭에 사용되는 함수 │ ├─ finish.match.js # 매치(게임)이 끝났을 경우 정산 │ └─ start.match.js # 매치(게임)이 시작할 때 초기 값 반환 ├─ path # 몬스터 길 만들기 │ └─ make.monster.path.js ├─ queue # 매칭 대기열 클래스 │ └─ waiting.queue.class.js └─ send-packet... Read More

메인 작업 오늘은 계획한대로 클라이언트와 프로토타입 서버를 테스트해가며 디버깅할 차례다! 또한 클라이언트의 연결이 끊길 때 작동되어야하는 로직을 구현할 예정이다. 클라이언트 연결 테스트 패킷 구조 오류 클라이언트에서 받는 최종 패킷은 위와 같은 GamePacket 구조 였지만, 서버에선 PacketBuffer 까지만 만들어 보내주었던 오류가 있었다 이로인해 디코딩과 인코딩을 두번하도록 변경해야 했다! 매칭 오류 매칭 인원이 2이상이 되지 않았는데도 게임이 잡혔다는 알림을 보내준다. 확인 결과 핸들... Read More

메인 작업 시퀀스 시스템 현재는 서버가 클라이언트가 로그인된 이후부터 시퀀스를 체크하기 시작한다. 하지만 클라이언트를 분석해본 결과 통신 시작부터 시퀀스를 증가해가며 서버와 통신을 한다! 서버에서 시퀀스 검증을 하기 위해선 로그인 이후가 아닌 통신 시작 시점부터 시퀀스를 관리해야 했다! 대략 이런 구조로 User의 범위를 확장시켰다! (기존엔 로그인된 유저만 User 였지만 이제는 접속한 인원 모두가 User가 되는 것이다!) 코드 구현 onConnection 이벤트에 User를 생성해주도록 바꾸었다 (4)번 import on... Read More

프로젝트 기초 작업 클라이언트 분석 현재 클라이언트에서 주고 받는 Payload는 어느정도 분석을 마쳤다! 처음 게임이 시작할 때, 몬스터가 지나갈 경로(road) 정보를 서버가 보내주는 것 같다. 그렇다면 경로를 만들어 클라이언트에게 전달해주어야 하는데, 클라이언트가 어떤방식으로 이를 사용하는지 분석해 봐야 제대로된 값을 보내줄 수 있을 것 같다! 통신 구조 분석 일단 게임 처음 진입 시, 연결할 서버의 주소와 port를 입력해달라는 창이 뜬다! 우선 이러한 창의 설정 버튼에 OnClickSetting()을 매핑해... Read More

분업 시작 베이스 분업 공통으로 필요한 부분(베이스)을 먼저 분업하여 1차적으로 프로젝트 구조를 설계하기로 하였다 Class 구조 설계 클라이언트에서 받은 정보와 이를 이용해 검증을 하는데 필요한 정보들을* class로 정리해준다! Base class 디펜스 게임 내 플레이어의 본체로 체력이 다하면 게임오버가 된다! 관련 Payload 구조 분석 # 게임 시작 전 서버가 클라이언트에게 전달해주는 정보 message S2CMatchStartNotification { InitialGameState initialGameState = ... Read More

Memory (기억 장치) 종류 RAM은 읽기와 쓰기가 가능한 휘발성 메모리로, 전원이 꺼지면 데이터가 사라짐 컴퓨터의 메인 메모리로, CPU가 처리할 데이터를 저장하는 데 사용 ROM은 읽기 전용 메모리로, 데이터 수정이 불가능하고 전원이 꺼져도 데이터가 유지됨 컴퓨터의 부팅 과정에서 필요한 기본 프로그램이나 BIOS와 같은 시스템 레벨의 지시사항을 영구히 저장하는 데 사용 주소 공간 논리 주소는 각 프로그램에 부여된 0번지부터 시작하는 주소이며, 물리 주소는 실제 하드웨어 상의 메모리 주소 베이... Read More

컨셉 및 기획 기본적으로 주어진 과제는 1:1 경쟁을 하는 멀티플레이 게임이다. 그러나 꿈은 크게 가져야한다고 들어 장르를 바꾸더라도 조금 더 재밌어 보이는 게임을 설계하기로 하였다! 기본적인 장르는 RTS로 참고가 된 게임들은 냥코대전쟁, 전쟁시대, 팔라독 등이다. 게임 진행 과정 플레이어들은 회원가입/로그인 후 메인화면에 진입한다 매칭을 시작하여 MMR이 비슷한 사람들끼리 매치되어 게임이 시작된다. 두 플레이어는 각자 유닛을 생성하여 상대방의 본진을 파괴하는걸 목표로 한다. 게임이 ... Read More

서버 구조 모놀리식(Monolithic) 구조 서버의 모든 기능이 하나의 코드베이스와 배포 단위로 구성되는 방식 간단한 구조로 초기 개발 및 설정이 쉬움 확장성과 유지보수는 어렵다는 단점이 있음 데디케이트 구조 하나의 게임당 각 전용 서버를 이용해 게임 세션을 호스팅 하는 방법 높은 대역폭과 최적화된 네트워크 환경을 제공해 지연 시간을 최소화 가능 분산 서버(MicroService) 구조 여러 서버가 협력하여 하나의 시스템을 구성하는 방식 대규모 사용자 기반 처리 및... Read More

추가 변경사항 원래 서버 <> 클라이언트 통신간 일어나는 과정은 아래와 같았다 클라이언트는 접속하면서 자신의 Speed 값을 서버에게 전달 게임이 시작되면 자신의 위치정보와 시간을 서버에게 전달 만약 방향이 바뀌었다면 그때마다 방향정보도 전달 서버는 방향과 시간 속도를 통해 위치를 검증 만약 계산된 위치와 받은 위치가 오차범위(10%)를 못 넘으면 미적용 ... Read More

추측 항법 추측 항법에 대해 생각을 해보았는데 위치 동기화 시점을 정할 때 일정 간격으로 서버에서 위치 동기화 송신 유저의 입력을 받을 때 서버에서 위치 동기화 송신 두 방법을 섞어서 사용(하이브리드) 이러한 방법들이 있는 것 같았다. 이중 까다로운 3번째 방법을 구현해볼 예정이다! 방향 전달 클라이언트에서 서버에게 방향을 전달하고, 이를 통해 위치를 검증해주는 로직을 구현한다! 방향 ... Read More

DB 연동 마이그레이션 DB에 저장할 정보들을 지정해두어 DB가 바뀌어도 테이블의 기본 형식을 설정해주어 사용가능하도록 해준다! DB 마이그레이션에 사용할 SQL 문법 CREATE TABLE IF NOT EXISTS users ( device_id VARCHAR(255) PRIMARY KEY, location_x FLOAT DEFAULT 0, location_y FLOAT DEFAULT 0, last_login TIMESTAMP DEFAULT CURRENT_TIMESTAMP, created_at TIMESTAMP DEFAULT CU... Read More

위치 동기화 현재 게임에 참여하면 핑을 주고 받기 시작한다 이제 게임에 참여한 인원들의 위치를 서버와 클라이언트끼리 동기화 해주어야한다 게임 내 위치 동기화 Game class 에서 모든 유저 위치 정보를 알려주는 메서드를 생성한다 // Game class 메서드 getAllLocation (playerId) { // 게임 내 전체 유저 위치 확인 const payload = Array.from(this.users).map(([id, user]) => { { return { id... Read More

지연 시간과 핑 구현 서버 요청(송신시간 전송) 클라이언트는 받은 시간을 그대로 재전송 서버는 받은 시점에서의 시간을 확인하여 계산 위와 같은 과정을 통해 서버<>클라이언트 간의 지연시간을 통해 PING을 계산하는 것 같다 서버 Ping 요청 Ping <> Pong 을 받을 주체는 유저이기에 user.class에 관련 메서드를 생성해준다! ping = () => { // 패킷을 보내는 시간을 Payload 로 클라이언트에게 수신 const pingPacket = createPing() this.... Read More

같은 코드를 다른 컴퓨터에서 실행하였을 때, 코드의 실행과 결과에 이상이 생길 수 있다! 이 때 컴퓨터의 기본적인 구조를 알고있으면 트러블 슈팅에 매우 도움이 된다 컴퓨터의 이해 컴퓨터는 명령어를 처리하는 기계라고 단순화할 수 있음 컴퓨터가 이해하고 처리할 수 있는 정보에는 주로 데이터와 명령어가 포함 명령어는 컴퓨터를 실제로 작동시키는 정보이며, 데이터는 명령어에 의해 조작되고 사용되는 재료라고 볼 수 있음 위의 정보 중 중요한건 정적인 데이터보다 동적인 명령어임! 대표적인 명령어의 ... Read More

암호화 암호화: 원문 데이터를 알아볼 수 없는 형태로 변경 복호화: 암호화된 데이터를 원문 데이터로 되돌리는 과정 대칭 키 암호화 암호화와 복호화에 동일한 키 사용 키 전달이 어렵고, 유출 시 큰 문제 발생 비대칭 키 암호화 암호화와 복호화에 다른 키 사용 공개 키와 개인 키의 쌍으로 구성 디지털 서명 디지털 서명은 전자 문서나 메시지에 대한 서명 발신자의 신원을 확인하고 데이터의 무결성을 보장하는 암호화 기술 발신자의 신원을 확인할 수... Read More

유니티 클라이언트 연동 클라이언트 ProtoType 서버측 코드를 구성하며 클라이언트와 통일된 HANDLER_ID 및 PACKET_TYPE 을 맞춰 주었다! 서버 응답 구조 변경 원래 서버에서 주는 Response 의 경우 Packet 형태는 Proto Message 를 이용하지만, 안에 들어가는 Payload(data) 는 JSON 형태를 사용해 클라이언트에서 파싱해주고 있다! 사실 동작 자체는 문제가 없지만.. ProtoBuffer 구조를 사용하다 JSON 형태를 쓰는게 부자연스러워 보여 수정해주려 한다! 기존 서... Read More

클라이언트 연동 기본적으로 서버 <> 클라이언트 구조를 어느정도 완성하였다! 이제 남은건 서버와 클라이언트 간의 상호작용들을 설정해줄 차례다! . ├── .env ├── assets ├── README.md ├── client.js └── src ├── server.js ├── events │ └── onData.js // ... Read More

역/삼각 함수 삼각함수와 역삼각함수는 프로그래밍에서 수학적 계산, 그래픽스, 물리 시뮬레이션 등 다양한 분야에서 중요한 역할을 함 프로그래밍 언어에서는 단위로 Radian 이 사용됨 주기성 (Periodicity): 삼각 함수는 특정 주기를 가진 반복적인 함수 대부분의 삼각 함수는 2π(약 6.28)를 주기로 가지며, 탄젠트와 코탄젠트는 π를 주기로 가짐 삼각 항등식 (Trigonometric Identities): 삼각 함수들 사이의 관계를 나타내는 수학적 등식 대표적으로 피타고라스 항등식(s... Read More

CustomError 현재 에러처리는 어느 상황이건 스택들과 오류 정보를 직접적으로 보여주고 있다! 이런 경우 에러가 발생한 곳은 알 수 있어도 이유를 못찾는 경우가 허다하다.. 이에 특정 구간에 전용 에러를 만들어 관련 정보를 같이보여주면 디버깅하기 편하다! 또한 에러가 일어날 경우, 에러에 따라 다르게 작동하는 로직을 구현하기 쉽다 Error 폴더 구조 . ├── assets ├── clients ├── README.md ├── .env ... Read More

환경변수 관리 기존에 환경변수나 상수들을 각각 파일에서 제어했기에 수정을 한번 하면 여러 곳을 수정해줘야 했다! 그 구조를 중앙집중식으로 변경하여 유지보수가 편하도록 하는 방법을 알아보자! 환경변수 관련 폴더 구조 . ├── assets ├── clients ├── README.md ├── .env // 중요한 환경변수(보안!) └── src // 서버 폴더 ├── server.js // ... Read More

NET을 이용한 서버 기존에 웹 서버를 구성하려면 Node.js 위에 express 와 socket.io 등 여러 라이브러리를 사용하여야 했다! 이번엔 Node.js에 기본 포함된 net 을 이용해 서버 통신을 직접 구현하는 프로젝트이다! 서버<>클라이언트 net을 이용해 socket 통신을 구현해준다! // 서버 import net from 'net'; const server = net.createServer((socket)=> { // socket.io 의 emit과 같은 기능! 클라이언트에게 송신 socket.write() ... Read More

알고리즘 퀵 정렬 분할 후 정복(Divide and Conquer) 방식으로 데이터를 나눈 후 정렬하며 정리하는 방식 피벗(Pivot) 이라는 기준점을 정하여 왼쪽과 오른쪽으로 그룹을 나눈다. ( 피벗보다 작은 값을 왼쪽 그룹, 큰 값을 오른쪽 그룹 ) 왼쪽 끝과 오른쪽 끝에서부터 피벗과 비교를 시작하며 중앙으로 향한다 각 끝에서 시작한 윈도우들은 피벗과 비교해 그룹에 맞지 않는 값을 발견하면 멈춘다 두 윈도우가 맞지않는 값을 찾았다면 교환을 실시한다 이러한 과정을 재귀(Recursive)과정을 통해 정렬을 마무리... Read More

가용성(Availability) 컴퓨터 시스템이 특정 기능을 실제로 수행할 수 있는 시간의 비율을 의미함 가용성 계산 공식: (가동 시간 / 총 시간) × 100% 고가용성을 유지하는 것은 모든 게임/서비스에서 대단히 중요한 목표 9의 개수에 따른 가용성 등급으로 추산한 시간표 장애 복구 시간 (RTO: Recovery Time Objective) 시스템 장애 발생 후 정상 운영 상태로 복구되는 데 허용되는 최대 시간 비즈니스 연속성 관점에서 중요한 지표 짧을수록 시스템의 가용성... Read More

프로젝트 마무리 프로젝트 가 마무리 되었다! 여러 팀들의 프로젝트를 보며 느낀 점이 생겼다 자체 피드백 Keep 프로젝트에 책임감을 가지고 휴일임에도 나와서 다같이 프로젝트 마무리를 한 점은 뿌듯했다. 중간마다 각자 작업 진행도를 파악하며 업무를 재분배한 점은 좋았다! Problem / Try 클라이언트 요청 -> 서버 응답 처럼 동기적 실행이 필요한 통신은 웹소켓 통신보다 API 통신을 이용해 리소스를 줄였으면 좋았을 것 같다. 파일 구조 설계 시, 각 팀원분들의 설계 방식을 공유하여 규... Read More

탐색/검색 알고리즘(Search algorithm) 방대한 데이터에서 목적에 맞는 데이터를 찾아내기 위한 알고리즘을 통칭 검색 메커니즘에 따라 선형, 이진, 해싱 세 가지 알고리즘으로 분류가능 선형 검색(Linear / Sequential search) 일치 항목을 찾거나 전체 목록이 검색될 때까지 목록의 각 요소를 순차적으로 확인하는 방식 With Sentinel 방식 기본 알고리즘은 반복당 아래와 같은 두 번의 비교를 수행함 arr[idx] 가 Target 과 같은지 확인 ... Read More

프로젝트 병합 현재 프로젝트에 파일이 많아 병합하는 과정에서 오류가 자주 뜬다 UserInterFace 연결 클라이언트 game.js에서 유저의 점수, 골드를 내부에서 관리하였는데, 이를 사용자에게 보여주기위해 새로운 userInterface.model 을 만들면서 get/set 오류가 있었다 콘솔 로그를 보며 관련 코드들을 함수를 import하여 수정하는 것으로 해결하였다 /* 이전 */ // 점수 바꾸기 if(Object.keys(Monsters.getInstance().getInfo()).length !== 0){ score = Monsters.getIns... Read More

샤딩(Sharding) 데이터베이스를 물리적으로 쪼개는 기술 동시 접속자( CCU: Concurrent connected User )를 늘릴 수 있으며 물리적 한계의 안정성을 어느정도 보장해줄 수 있음 ( DB 중 하나가 망가지거나 없어져도 시스템은 작동할 수 있음 ) 데이터를 여러 샤드(쪼개진 DB)에 분산시켜 병렬적 처리가 가능해 성능이 향상됨 관리 샤딩된 DB들을 균등하게 사용할 수 있도록 설계해야하며, 샤드의 수는 가변적일 수 있음 단점 분산 트랜잭션 분산된 데이터 베이스는 분산 트랜잭션을 수행함 ( 이 때 트랜잭션... Read More

방 기능 준비/시작 기능 현재 방에 입장해 두 명이 준비되면 게임이 시작될 수 있도록 수정해야겠다 /*클라이언트*/ // 준비완료/취소 보내기 export const ready = (roomId) => { socket.emit("ready", { userId, token, handlerId, clientVersion: CLIENT_VERSION, roomId }) } 서버에서도 이를 확인하여 값을 전달! /*서버*/ // 방 상태 확인 export const gameReady = (gameId, us... Read More

OSI 상위 계층과 TCP/IP의 응용 계층 사용자와 직접적으로 상호작용하고 데이터 통신의 높은 수준 기능을 담당하는 계층들이다! 하위 계층(전송, 네트워크, 데이터 링크, 물리 계층)이 기술적 데이터 전송을 담당한다면, 상위 계층은 사용자 관점의 통신 기능을 제공함 OSI 상위 계층 7계층 응용 계층(Application) 사용자 인터페이스와 직접 상호작용 HTTP, FTP, SMTP 등 최종 사용자 애플리케이션 프로토콜 제공 네트워크 서비스를 애플리케이션에 제공 예: 웹 브라우저, 이메일 클라이... Read More

대기 방 구현 어제 마지막 회의로 방에 들어가면 대기하는 공간을 구현하기로 하였다 클라이언트 디자인 부트 스트랩을 이용해 대략적으로 구현하였다 기능 결합 기존 방 생성 시 게임이 시작되게 설정하였는데 이를, 서버에 요청하여 대기방으로 이동하도록 변경한다 // socket.js < 통신을 관리하는 파일 > socket.on("response", (data) => { console.log(data) if (data?.status === "fail") return alert(data.message) // 방 생성 핸들러 인식 시 if... Read More

회원가입 기능 + 클라이언트 회원 가입 기능 자체는 지금까지 해온 것들이 많아 그 코드들을 수정하는 방식으로 진행하였다 실행도 유저는 회원가입할 아이디, 비밀번호, 비밀번호 확인, 유저 닉네임 정보를 기입한다 ID는 영어 소문자와 숫자로만 이루어져 6~20 글자로 작성가능 하며 다른 ID와 겹치지 않아야 한다 비밀번호는 영어 소문자, 숫자, 특수기호 하나 이상 혼합하여 6자 이상으로 작성해야 한다 비밀번호 확인은 비밀번호와 똑같이 입력되어 있어야 한다 ... Read More

Connection Pool 이전에 배웠던 Thread Pool 처럼 데이터 베이스와의 연결(Connection)에도 Pool을 만들어 효율적으로 재활용 하는 기술을 말한다. max_connections max_connections 란 생성가능한 새로운 연결(Connection) 수를 의미하며 이로인해 연결들을 효율적으로 관리를 하지 않으면 문제가 생길 수 있다. max_connections를 넘기 시작하면 아무도 데이터베이스에 접근을 할 수 없게 될 수 있다. max_connections는 시스템이 실제로 핸들링 가능할 수 있는 설정 값으로 세팅을 해... Read More

역할과 목표 재설계한 와이어 프레임 ( 전체화면 / 게임화면 ) 멀티 플레이어 및 유저 생성 과 관련한 기능을 제작하는 역할 맡게 되었다. 회원가입 / 로그인 MySQL과 prisma를 이용해 회원가입/로그인 기능 구현하기 클라이언트 회원가입 / 로그인 화면 제작 및 합치기 멀티 플레이어 접속(연대책임) + 솔로 플레이 기능 기본 멀티 플레이가 되도록 룸을 나눠 참여가능하도록 설계 멀티 플레이 ... Read More

서버는 클라이언트에 의해 입력과 출력 처리를 많이 진행하게 된다 이에, 입력 출력 처리를 효율적으로 사용할 수 있도록 돕는 것이 IOCP 이다. 아래는 IOCP를 이해하기 위한 기초 개념들을 정리해 두었다. 입력 및 출력 I/O 개념 컴퓨터와 같은 정보 처리 시스템과 다른 컴퓨터 시스템, 주변 장치 또는 인간 작업자와 같은 외부 세계 간의 통신을 지칭함 I/O란 서로 다른 두 물체 간 정보를 전송하는 것 파일 버퍼링 : 버퍼링되지 않은 파일 입출력(I/O)의 애플리케이션 제어에 대한 고려 사항 (... Read More

설계 프로젝트 기간 : 2024.12.23 ~ 2025.01.02 목표 서버와 클라이언트를 연결해 데이터를 검증 팀 프로젝트를 통해 깃허브 사용, 회의와 같은 팀업 경험 쌓기 첫 회의 기본 프로젝트를 분석하여 프로젝트의 구현목표 지점을 짚고, 가시화 게임 진행 방식 일정 시간마다 스테이지의 스폰 수에 의해 몬스터가 생성된다 몬스터는 기지를 향해 정해진 이동속도로 이동한다 스테이지의 스폰된 모든 몬스터를 죽이면 스테... Read More

전송 계층 PDU(Protocol Data Unit/계층의 전송 단위) 프로토콜에 따라 (TCP)Segment 또는 (UDP)Packet(Datagram) 네트워크에서 송신지와 수신지 간의 응용 프로그램 간 통신 서비스(논리적 통신)를 제공함 그럼 네트워크 계층과 다른게 뭐에요? 네트워크 계층은 기기(호스트) 간 연결 이라면, 전송 계층은 기기 내의 프로그램 작업(프로세스) 간의 연결 입니다 (집을 찾는 것과 집 주인을 찾는 게 다른 느낌인 거죠) 포트/포트 번호를 사용하여 여러 네트워크 서비스를 동시에 지원할 수 있음 ( IP Ad... Read More

기능 추가 랭킹 시스템 (최고점수 기록) 현재 클라이언트에서는 최고점수를 local.storage에 저장해 불러오는 형식으로 구현이 되어있다 이를 서버에서 최고점수를 관리해 불러오도록 수정할 예정이다. (대신 uuid를 local.storage에 저장해 정보를 가져오자) 서버의 최고 점수 기록 서버에서 유저마다 최고 점수들을 기록하기 위해 user.model에 함수를 추가 해준다. // 최고점수 변경 함수 export const setHighSore = (uuid, highScore) => { const userIdx = users.findInde... Read More

Back-End(Node.js) Back-End 생성 서버를 구축하고 websocket을 사용하기 위해 express, socket.io 를 yarn을 통해 프로젝트에 설치해준다! # yarn 초기화 yarn init -y # express, socket.io 설치 yarn add express, socket.io 추가로 유저 아이디를 관리하기 위해 uuid Package도 설치해준다! yarn add uuid init folder socket을 생성하고 express로 연 서버와 연결하기 위해 socket.js를 생성해준다! import { Server as SocketI... Read More

Front-End 개발 맵과 카메라 고정 뱀파이어 서바이벌처럼 특정 맵의 크기를 정해주고, 사용자는 가운데에 플레이어가 고정된 화면을 보아야 한다! 화면 고정 player를 중심으로 화면을 고정시키기 위해 플레이어가 이동할 때 화면도 같이 이동하는 것처럼 그리려고 한다! 이를 위해 ctx.translate(x,y)를 사용해본다! (translate를 선언한 후 그려지는 이미지들은 x,y 값만큼 이동한다음 그려지게 된다) class Map { constructor(ctx, width, height, scaleRatio) { this.ctx ... Read More

Front-End 개발 파일 분리 파일들을 효율적으로 관리하기 위해 index.html에 존재하는 script/css 들을 기능별로 분리해준다! script / css 분리 현재 index.html에 존재하는 js(script)와 css 를 분리해준다! <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta na... Read More

Front-End 개발 Back-End 부분은 기존의 자료들을 이용할 예정이기에, Front-End 부분을 먼저 구현하기로 하였다 (Back-End 는 스켈레톤 코드가 있지만 Front-End는 없으니까..) 일단 AI를 통해 스켈레톤 코드를 구성하고, 이를 분석해 가며 원하는 기능들을 추가할 예정이다! Player와 Monster Canvas 일단 플레이어와 적을 그려주기 위해 html의 canvas로 활동영역을 구현해준다. <head> <!-- 브라우저의 최신 표준을 준수하여 렌더링하도록 강제 --> <meta http-equiv="X-UA-Compatible... Read More

Network 계층 PDU(Protocol Data Unit/계층의 전송 단위) : Packet(Datagram) Data의 전송과 이를 위한 길찾기를 담당하며 아래와 같은 기능들을 통해 Data가 효율적으로 전송되도록 함 핵심 기능 Address 지정 네트워크에 연결된 각 장치에 고유한 IP 주소를 할당하여 Packet이 올바른 목적지로 전송되도록 해주는 기능 Routing Router를 사용해 Packet의 경로를 결정하는 기능으로 Routing Protocol을 통해 네트워크의 상태를 파악하고, 최적의 경로를 계산하는 기능 Data 조각화(Pa... Read More

Realtime WebGame 개발 WebSocket을 응용하여 뱀파이어 서바이벌류 웹 게임에 서버를 연결하여 스테이지 관리 아이템 시스템을 구현해보려 한다! 구현 목표 스테이지의 구분 클라이언트의 일정 점수/시간이 지나면 서버에 요청하여 스테이지가 달라져야 함 스테이지에 따른 점수 획득 구분 스테이지가 올라갈수록 획득하는 점수가 달라져야함 스테이지에 따라 아이템 생성 아이템이 스테이지 정보에 따라 생성될 수 있게 설계 아이템 획득 시 점수 획득 ... Read More

OSI 7계층 OSI(Open System Interconnection model)는 네트워크 통신 방법을 개념적으로 설명한 국제 표준 모델이다. OSI 7계층 덕분에 통신 주체(시스템/언어/기기)가 달라져도 서로 통신이 가능한 것 이었다! OSI는 각 계층마다 자신의 역할을 마치고 아래와 같은 작업을 수행하게 된다. OSI 계층 중 1~4 계층을 하위 계층, 5~7 계층을 상위 계층이라 칭한다. 하위 계층(Lower layers)은 Network 상에서 Data 전송 및 경로 설정 초점이 맞춰져 있다. 상위 계층(Upper ... Read More

Transaction Data Base 관점에서의 Transaction이란 하나의 작업으로 취급되는 묶여진 모든 작업을 뜻하며, Transaction은 통칭 ACID 이라는 4가지 특징을 가진다! 원자성(Atomicity) 트랜잭션 내부에 있는 작업들은 모두가 하나인 것 처럼 취급이 된다! 작업들이 전부 성공하거나, 하나라도 실패하면 모두가 실패하는 연대책임을 지게 된다! => 이러한 특성 덕분에 오류 상황에서의 데이터 손실/손상이 방지된다! 일관성(Consistency) 트랜잭션의 각 작업들에 의해 변경될 테이블들의 데이터들은 모두 테이블의 제약조건을 만족해야 한다! 다시말해, 테이블의 규칙을 만... Read More

Node.js 게임Server개발 강의 게임 개발의 흐름 기획 단계 PD(Project Director)가 게임 프로젝트의 기획안을 문서화하여 AD(Art Director) / TD(Technical Director) 에게 전달한다. 기획안을 보고 AD는 컨셉아트를, TD는 프로토타입 게임을 여러 시안으로 제안한다. 기획안과 프로토타입의 가능성을 보고 폐기 또는 새로운 프로젝트로 승격시킨다. 개발 단계 백엔드(Server) 개발 입장에선 인프라 구성, 팀원 모집, Server 로직 개발 등을 진행하지만 전체적으로 업무강도가 강하지 않다. ... Read More

블로그 관리 현재 블로그를 작성할 때 보는 사람의 입장이 아닌, 그냥 되는대로 작성하는 것 같다는 지적을 받게 되었다. 그래서 작성 방식에 대한 개선점을 찾아보았다. 디버깅 접근성 개선 블로그에 글을 작성할 때, VScode의 마크다운 화면만 확인하기 때문에 블로그의 실제 페이지를 확인해가며 수정하기 어렵다! Github Page가 아닌 로컬에서 실시간 빌드 하는 방법을 찾아 화면을 확인하며 수정해보자! 로컬에서 Github Pages에서 쓰는 Jekyll(블로그 생성 프로그램)을 사용하기 위해 설치를 진행한다! 설치를 진행하기 위해 Ruby(... Read More

쁘띠 TFT 프로젝트 결과물 Github 오늘은 프로젝트를 마치고 발표 및 피드백을 받게되는 날이였고, 피드백에 관한 생각들을 정리해보았다. 피드백 트랜잭션의 최적화 트랜잭션 내부에 await을 다중으로 사용하는 경우 트랜잭션 작업속도가 느려질 수 있다. => 트랜잭션 속도가 느려지면, 격리수준에 따른 잠금으로 인해 데드락/성능저하 가 심해질 수 있다. 해결책 트랜잭션 외부에서 await을 통해 비동기 처리를 미리 해두어 트랜잭션 내부에선 최소한의 작업이 되도록 만들기 const data = awa... Read More

Facts 프로젝트의 리팩토링을 전반적으로 맡으면서 여러 아이디어나 최적화 방법을 볼 수 있엇다. 이번에 주어진 조건들을 만족시키기 위해 여러 prisma의 문법이나 메서드를 배울 수 있었다. 코드를 팀원분들에게 설명을 해주며 프로젝트에 대한 이해도가 올라갔다. Feelings 팀원분들과의 소통이 원활하여 프로젝트 진행이 순조로웠고, 그래서 기분좋게 마무리를 할 수 있었다. 리팩토링을 해가며 코드들을 이해하고 새로운 알고리즘을 짜는 기분이여서 뿌듯했다. Finding 기획/발표와 관련된 일을 대부... Read More

오늘의 Troubleshooting 쁘띠 TFT 프로젝트 파라미터 값 생략? 이번에 프론트엔드(HTML) 쪽 구현을 조금씩 해보시는 팀원분의 의견으로 이야기가 시작된다 기존의 parameter로 받는 userKey 값을 프론트에서 동적으로 생성할 방법을 찾을 수가 없다! 프론트엔드에서 받을 수 있는 값은 로그인을 한 후 받은 jwt토큰 밖에 없다. 이론상 프론트엔드와 백엔드는 구별되어 있어야기에 jwt토큰을 복호화(해석)를 쉽게 진행할 수 없었다 토큰 입력만으로도... Read More

쁘띠 TFT 프로젝트 유효성 평가 미들웨어 조정 기존에 agent를 찾는 변수로 agent_name(str)과 agent_key(int)를 사용했는데, 이를 통합하여 key만 사용하게 설계함 기존 팀편성 / 대표 챔피언 설정 api 수정 찾는 변수를 name에서 key로 변경 및 에러 메시지를 수정하였다. // 팀편성 API 내부 myAgent[i] = await prisma.myAgents.findFirst({ where: { agentKey: +formation[i], userKey: +key } }) //보유 챔피언 확인 ... Read More

오늘의 Troubleshooting 쁘띠 TFT 프로젝트 Insomnia 생성 및 공유 API 명세서를 작성한 김에 Insomnia를 이용한 입력들을 일괄작성하여 팀원분들께 배포하면 좋을 것 같아 시작했다 작성한 http request를 Collection채로 보내기! (Json파일) 보낸 파일에서 필요한 세팅을 알려드리고 작업을 마쳤다 API 명세서 수정 기존에 response[Error] 를 통해 경우에 따른 에러 메시지를 정리 해두었는데.. => 이중 중복되는 에러 부분들은 중복표시를 하여 API 구현 때 무시하도록 표시를 해주었다! (유효성 평가와 인증... Read More

오늘의 Troubleshooting 쁘띠 TFT 프로젝트 기존의 형식인 풋살 온라인 프로젝트의 컨셉을 바꾸어 쁘띠 TFT(전락적 팀 전투)로 구현하기로 하였다! 컨셉을 정한 뒤 구현할 API를 회의를 통해 정하였고 이를 구체화하여 명세서를 작성하는 일을 하였다! 추가로 협업을 위해 Github의 repository를 연결하여 branch 명을 정해주고 각자 역할을 분담하였다 API들을 기능과 관련있는 경우 파일을 통합하기로 결정했다. (기능과 관련되있는 경우 숫자로 묶고, 전체와 관련된 경우 체리로 표시하였다.) 개선점 분석 알고리즘 ... Read More

Facts express와 prisma를 이용해 처음으로 REST API를 만들었다. AWS EC2와 깃허브를 이용해 클라우드 서버에 프로젝트를 실행시켜 보았다. try catch 구문을 적극적으로 이용해 보았다. Feelings 프로젝트/과제 를 진행할 때마다 새로운 시도를 해보며 오류들을 잡아가는 것이 신났다 어려운 것을 시도해가며 풀어가는 게 개꿀잼이다 Finding 회의할 때 과제에 집중한다고 가끔씩 흘려듣는 상황이 생기는데.. 이를 좀 주의해야될 것 같다. Future 다음 주... Read More

오늘의 Troubleshooting 아이템 시뮬레이터 과제 유효성 평가 미들웨어 유효성 평가들 중, 겹치는 부분들을 묶어 미들웨어로 만드는게 편해보여 진행하려 한다! 유효성 평가 기능별 묶기 비슷한 유효성 평가를 하는 기능들끼리 묶는건 좋아보인다만, 이를 어떻게 상세구분해줄 수 있는지가 고민이다.. 일단 기능적으로 묶인 router들을 이용해 1차로 구분을 해주고 2차로 request의 [req.path] Propertie 를 사용해 구분해주면 될 것 같다! (추가로 m... Read More

오늘의 Troubleshooting 아이템 시뮬레이터 과제 아이템 판매 기능 구현 구매 기능을 구현했기에 판매는 그렇게 어렵지 않았다. 인벤토리에서 아이템이 수량만큼 존재하는지 확인해주는 기능을 추가로 구현하였다. // 판매 할 아이템이 없을 시 const { charId } = req.params; const perchase = req.body; const item = await prisma.itemTable.findFirst({ where: { itemCode: +perchase.item_code } }) const items = await prisma.invent... Read More

오늘의 Troubleshooting 아이템 시뮬레이터 과제 API 명세서 작성 조장님이 API 명세서를 작성하며 과제를 진행하는 것이 설명/관리 하기 쉬울 것 같다하셔서 명세서를 작성하게 되었다! API 명세서 명세서를 작성하는 동안 http 응답코드에 대해 알아보게 되었다. 나무위키 - HTTP/응답코드 아이템 생성 API 아이템 생성 시, 필요한 인수를 받지 못하면 그에 관한 에러를 반환해주게 설계 //입력값 확인 const {item_code, item_name, item_stat, item_price} = req.body; //이름 유효성 검사 확인 if (!item_n... Read More

오늘의 삽질 아이템 시뮬레이터 과제 오늘은 팀이 새롭게 편성되어 아이스브레이킹 시간을 지니며 팀 노션을 작성하였다. 추가로 조장님이 Github의 Pull request를 응용하여 코드리뷰 하는 방법을 설명해 주셨다! => branch를 분리한 후, 회의시간에 Pull request를 통해 dev branch에 병합 시, 변경사항을 한눈에 보기 쉽고 comments를 각자 달 수 있기에 원활하게 코드리뷰를 진행할 수 있다! 개선점 분석 저녁 식사 이후 회의가 끝나면, 과제 진행보단 자료정리를 하며 계획을 세우는 방향으로 진행해야겠다. 지식창고... Read More

Facts 저저번주 처럼 강의 위주의 학습시간 이었다. 다행히 계획한대로 이번 주 안으로 제공된 강의 시청을 마쳤다. 중간에 장에 부담을 많이줬었나 장염이 생겼다. Feelings 수요일 장염 걸렸을 당시는 진짜로 골로가는 거 아닌가하고 걱정됬다. 장염을 걸린 다음날 머리하고 장이 좀 괜찮아지니 오히려 학습욕구가 차올랐다. Finding 언제나 그렇듯 습득은 빠르나 기억력이 좋지 못해 여러 번 다시 찾아 볼 것 같다 강의에서 배운 내용을 사용할 때, 정리를 다시 해가며 TIL을 ... Read More

지식창고 Node.js 숙련주차 강의 ORM / Prisma Prisma는 ORM(Object Relational Mapping)으로써, Javascript 객체(Object)와 데이터베이스의 관계(Relation)을 연결(Mapping) 해주는 도구라고 한다.. 한줄 요약 : ORM은 Javascript하구 RDB를 이어주는 친구 만약 ORM 이란 친구들이 나오지 않았더라면? 아마도 SQL에 명령문을 직접적으로 입력해줬을 것이다.. 그렇게 사용했던 것이 Raw Query라는데? (흠.. 한 번쯤은 사용해 볼 수도..?) 그래서 준비한 Raw Query 실전 압축 사용법! ... Read More

지식창고 Node.js 숙련주차 강의 관계형 데이터 베이스(Relational DataBase) 데이터의 정규화와 무결성을 보장하면서 정형화된 데이터를 효과적으로 관리할 수 있는 데이터베이스 => 데이터를 지정한 형식에 맞춰주고, 절대 틀리지 않게 만들어 주는 데이터 베이스 관계형 데이터베이스(RDB, Relational DataBase)는 각 데이터를 ‘테이블’이라는 표형태의 구조에 저장한다 여기서, 각 ‘테이블’은 여러 정보를 저장하며,(=DB) ‘테이블’간에 연관 관계를 설정하여,(=관계형) 여러 테이블에 분산된 데이터를 서로 연결하여 관리할 수 있습니다. SQL(Structured Q... Read More

banner 출처 오늘의 삽질 Git commit convention에 대해 알아보기! Git을 이용해 협업을 하는 경우, 서로 commit을 마구잡이로 하면 팀원들은 이해하기 어렵다! => 그렇기에 commit에 약속(convention)을 정해 이를 준수하는 것이다! 약속의 기본 템플릿! <type>[optional scope]: <description> [optional body] [optional footer(s)] <type> 은 수정사항의 종류를 나타내준다! [optional... Read More

Facts 이번 주부터 능동적으로 하는 과제를 시작했다 Nodejs 강의에서 알게된 지식들을 직접 활용해가며 응용해보았다. 오랜만에 누군가에게 도움을 요청받아 도움을 주었다! Feelings 아이디어를 직접 생각해가며 그걸 구현하는 시간은 매우 즐거웠다. 누군가를 가르켜주면서 지식들을 재정리 할 수 있어서 이번주가 알찼다고 느꼇다 개발자로써 코딩을 통해 결과물을 만드는게 좋은 경험이었다 무언갈 생각하고 구현하는 작업은 재밌는거 같다! Finding 저번주부터 블... Read More

오늘의 삽질 RogueLike TextGame 서버 연결 Node.js 강의에 있던 MongoDB를 이용하여 무기들이나, 점수 랭킹 등을 저장하고 불러오는 기능을 구현해볼 것이다! MongoDb_Atlas(Cloud Service) 가입 구글/깃허브를 통해 로그인! New project를 눌러 M0(free)를 선택하고, Region(나라) 는 서울로 설정한다음 이름을 정해 저장해준다! Database Access 에서 ADD NEW DATABASE USER 로 이름과 비... Read More

오늘의 삽질 RogueLike TextGame 플레이어 행동(버프) 만들기 player.buff 메서드 구현! 적이 방어하는 경우, 힐을 할 수도있지만.. 좀 더 공격적으로 할 수 있는 선택지를 주고 싶었다! //복습하기 buff(logs) { this.buff = Math.round(Math.random() * 10) / 10 logs.push(chalk.greenBright(`문제를 풀기 전, 배웠던 내용을 복습합니다..`)); logs.push(chalk.greenBright(`다음 문제 풀기의 Page 수 ${this.... Read More

오늘의 삽질 RogueLike TextGame 가중치 부여하기(무기/스탯) 무기나 기본 스탯에 스테이지 클리어 시 지급되는 이해도(Lev)에 비례한 스탯 가중치가 필요하다 생각했다! 플레이어 이해도 비례 가중치 구현 플레이어 보상 이벤트에서 이해도가 올라가면서 스탯이 이해도에 비례해 증가하게 만들 것이다 => player class에서 levelSet메서드를 수정 levelSet(value, logs) { this.maxLev = Math.max(this.lev, this.lev + va... Read More

오늘의 삽질 RogueLike TextGame 애니메이션 효과 넣기 텍스트 게임으로써 한 번에 모든 문장이 나오는게 몰입감이 떨어지는 느낌이라 약간의 애니메이션 효과가 있으면 좋겠다 생각을 했다. 스켈레톤 코드를 뜯어보았을 때, logs[] 에 값을 저장하고 while을 돌려 console.log()를 쓰는 것을 발견헀다. while(player.hp > 0) { console.clear(); displayStatus(stage, player, monster); logs.forEach((log) => console.log(log)); ... Read More

Facts 이번 주 내내 강의 시청과 따라하기 위주로 수동적인 학습을 하게되었다. 강의내용을 보면서 졸았던 적도 있다. Javascript 강의를 통해 js언어의 기본적인 구조와 현상들을 알 수 있었다. Nodejs 입문 강의를 통해 서버를 만들고 관리하기 위해 필요한 프로그램들과 연결 및 사용 방법들을 알게되었다 짧은 기간내에 배운 것이 많아 이를 다 정리하지 못했다. Feelings 강의만 게속해서 보니까 능동적으로 공부할 때보다 좀 더 집중이 안돼는 느낌이였다. 특히 새로운 영역보... Read More

한줄평 시간이 애매하게 남거나 숨돌릴 겸 못 풀었던 알고리즘/SQL 문제들을 푸는 것도 나쁘지 않을 것 같다! 오늘의 삽질 최대 공약수 구현 최대 공약수 알고리즘을 구현하는데.. 최대 공약수의 정의를 헷갈려 약수가 “소수”인 것처럼 생각해 버렸다. 그렇게 소수를 찾아서 최대 공”소수”를 찾는 알고리즘을 만들었다. 그 후 테스트에서 성공률이 50%가 나오길래 뭐가 문제인지하고 검색을 하게 되었다.. => 수정본은 맨 하단에 (약수가 소수가 아니란걸 알아버린 나의 세상은 무너졌다..) function solution(n, m) { ... Read More

한줄평 며칠간 강의만 시청하다보니 아무리 실습을 따라해도 조금 지루한 감이 있다. 내일부터는 강의를 다보고 프로젝트(과제)를 시작할 수 있을꺼 같다 오늘의 삽질 강의보다가 중간에 졸아서 영상을 다시 보게되었다.. 사실 어제부터 강의를 보기 시작했는데 요약하기에 너무 내용이 많고 중요해서 정리하는데 시간이 좀 걸렸다.. 개선점 분석 졸리면 10분 정도 휴식시간을 갖고 다시 시작하자 지식창고 오늘은 실습(예제)보단 이론 위주로 작성할 예정이다. [Node.js 입문] 강의 웹과 HTTP의 동작 방식 사용자가 웹 브라우저의 주소... Read More

오늘의 삽질 오늘은 강의 시청 및 과제 제출이 주를 이뤄 실습간 큰 문제가 없었다. 개선점 분석 위와 동일하게 능동적인 작업이 없었다. 지식창고 [JS 문법 종합반] 강의 콜백함수(Callback function) ‘다른 코드’의 인자로 넘겨주는 함수로, 다른 코드가 끝난 뒤에 실행되는 함수를 말한다! => 호출하는 ‘다른 코드’가 콜백함수의 제어권을 가지고 있음 콜백함수를 호출한 ‘다른 코드’ 만이 콜백함수의 매개변수(인자)를 제어할 권리를 가짐 콜백함수의 this는 기본적으로 ‘함수’ 이기 때문에 전역 객체가 반환되지만, 예외... Read More

오늘의 삽질 1. Node.js 설치 [Node.js 문법 종합반] 강의를 보며 안내받은 대로 Node.js를 터미널에 명령어를 입력하는 방식으로 설치를 해보았다. => 왠지모르게 node 명령어를 쳐도 없는 명령어라 뜨길래 검색해봄 시스템 환경변수 편집 설정 환경변수에서 시스템 변수 Path에 nodejs가 연결되어있지 않으면 그렇다하여 연결을 해보려 했으나.. 설치한 경로를 터미널 명령어로 통해 설치했기에 몰랐음 => 바로 파일형으로 설치함 (파일형으로 하니까 환경변수 알아서 설정해줌) npm -v 명령어 오류 ... Read More

결과물 기간 : 2024.10.28 ~ 2024.11.1 (1주일) 참여인원 : 5인 KPT 팀 회고록 Keep - 현재 만족하고 있는 부분 프로젝트를 중간에 마치지 않고 끝까지 완주했다는 부분이 자랑스럽다. 여러 시행착오에 두려워하지 않고 계속해서 배우려고 했던 팀원분들의 자세가 보기 좋았다. 회의를 할 때마다 모두 경청하는 자세가 있어서 방향을 잡으면 프로젝트를 진행하는 것이 수월했다. Problem => Try - Problem 각자 혼자서 삽질하는걸 즐겨했던 것 같다. 중간 보고와 소통... Read More

WIL(Weekly I Learned) Facts 처음으로 팀 프로젝트를 해보았다. GitHub를 사용해서 서로의 코드를 공유 및 병합해가며 프로젝트를 진행했다. 일단 각자 회의를 통해 정해진 구역을 구현해보고 코드들을 병합하기로 했다. 병합한 코드들을 로직으로 묶어서 GitHub Page의 Jekyll로 빌드하면서 문제점을 발견했다. 각각의 구역들이 스타일을 침범해서 조정이 필요하고, 피드백으로 css(Style) 파일과 js(Script) 파일을 분리하여 관리해야 한다는 것을 알게 되었다. 그렇게 주어진 문제들을 직... Read More

오늘의 공부 1. 프로젝트 분리 및 연결 오늘 아침 결과물들을 어떻게 이어붙여서 디렉토리 구조를 분리/관리 할까에 대해 고민을 하고있었다.. 그 때 팀원분들 중 한 분이 디렉토리 구조와 스타일을 정리해서 와주셨다! (협업 유경험자 감사합니다 ㅠㅠ) 만세! 빨리 뜯어서 적용 시켜야지 뜬금 디렉토리 연결용 함수 정리 HTML <!-- 디렉토리 구조 내의 css파일을 연결--> <link rel="stylesheet" href="./css/style.css" /> <!-- 디렉토리 구조 내의 js파일을 연결--> <scri... Read More

오늘의 공부 1. 프로젝트 방명록 수정하기 문제점 확인 기존의 댓글을 입력하면 객체를 만들어 바로 삽입하는 방식의 경우, 사이트를 새로고침할 경우 데이터가 날아간다! 이러한 오류를 고치기 위해 API를 연동하기로 하였다! (팀 프로젝트이기에 팀원분의 FireBase 에 연동하게 되었다.) 실전 함수 데이터 불러오고 사용하기 // Firebase 서비스 패키지 가져오기! import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app js"; import { get... Read More

오늘의 공부 1. Git / GitHub 를 이용한 협업 강의 Git 이란 협업 간 버전을 관리하기 위한 “도구” 이다. GitHub 는 Git을 이용해 코드들을 저장해주는 “장소” 이다. GitHub를 사용할 때 중요한 개념이 3가지 정도 있다. Clone / Fetch 저장 공간인 ‘Repository’를 생성하면 이 공간은 GitHub라는 서버에 저장되어 있기에, 이를 내 컴퓨터 속에 옮기는 작업이 바로 Clone(복제) 이다. 복제된 Clone을 수정하다 원본(Github에 있는)을 다시 받아오는 역할이 Fetch(가져오다) 이다. Branch 팀... Read More

오늘의 공부 캠프의 시작 본 캠프 시작으로 개강 OT로 캠프의 로드맵을 훑어 보았다. 팀을 여러 구간별로 새로 진행한다는 사실을 알게 되었다. 여러 번 프로젝트를 마치면서 각자의 실력에 맞는 학습을 진행한다는 것도 좋아 보였다. 1. 프로젝트 회의 첫 프로젝트 ‘멤버 소개 페이지 만들기’ 를 위해 새로운 팀이 편성되었다. 만난지 몇 분도 채 되지 않아 서로 서먹하였으나, 프로젝트를 진행하며 서로 말을 조금씩 트게 되었다. 일단 페이지 구성을 위한 와이어 프레임을 각자 만들어보고 비교해가... Read More

TIL(Today I Learned) - 오늘의 공부 현재 블로그 사이트 스타일 정리하기 Jekyll 를 기초로 한 블로그 이기 때문에 관련 문서들을 읽으면서 블로그 스타일을 개선해 보았다. 날짜 페이지에서 년도별 정렬이 아닌 년도-월별 정렬로 바꾸었다. 날짜 / 태그 페이지에서 쓸데없이 작성일이 나오는 부분을 삭제 하였다. 기본 페이지에서 5개씩 나왔단 포스트들을 8개로 늘렸다. 왼쪽 사이드바의 이미지를 조금 더 올려 두었다. 파비콘을 설정해 보았다. => 이 글은 11월에 진행한 블로그 테마를 바꾸기 전에 있던... Read More

TIL(Today I Learned) - 오늘의 공부 Javascrip 응용하기 도전과제! 과제 04 까지 완료 Javascript와 css를 이용하여(+부트스트랩) 할 일을 적어 추가하고 체크/삭제 가 되는 사이트를 만들어 보았다. TIL(Today I Learned) - 학습 과정 중 특이사항 할 일을 적어 [추가] 버튼을 누르면 입력되어있던 값이 초기화 되며 하단에 추가되게 만들었다 (이 과정에서 배운 구문들) // todolist 라는 값에 #id값으로 찾은 객체를 선택하여 부여한다는 의미이다. const t... Read More

TIL(Today I Learned) - 오늘의 공부 Javascrip 응용하기 도전과제! 과제 03 까지 완료 (04 진행중) 과제로 자바스크립트와 CSS를 이용하여 간단한 페이지를 만들어 보았다. array.filter()를 이용하여 설명에 “고기”가 들어 있는 목록만 화면에 나오게 설정까지 마쳣다. Dictionary 내의 값을 foreach를 통해 가져오고 이용하는 것을 복습하는 시간이였다. TIL(Today I Learned) - 학습 과정 중... Read More

벌써 일주일이 지났다.. TIL(Today I Learned) - 오늘의 공부 Javascrip 응용하기 도전과제! 과제 02 까지 완료 브라우저의 콘솔을 이용해 javascript 문법들을 시험해볼 수 있었다. 웹개발 강의를 보면서 사용했던 CSS나 Javascript를 다시금 복습하며, 새로 Math 함수를 사용해볼 수 있는 시간이었다. TIL(Today I Learned) - 학습 과정 중 특이사항 Javascript 응용하기 2번 문제가 스크립트 자체는 쉬웠으나 이를 ... Read More

TIL(Today I Learned) - 오늘의 공부 [왕초보] 웹개발 종합반 5주차를 수강했다! FireBase를 이용한 웹사이트 정보 저장을 실습과 함께 복습을 하였다. GitHub를 이용해 웹페이지를 배포하는 방법도 다시금 복습하게 되었다. (이 블로그 처럼) FireBase의 한계점과 사용 시 유의할 점 등들을 배울 수 있엇다! 노션 퀘스트 SQL 실전! 과제 마무리! 오늘은 어제 HAVING 을 이용... Read More

TIL(Today I Learned) - 오늘의 공부 [왕초보] 웹개발 종합반 4주차를 수강했다 FireBase의 정의 및 세팅 방법! // Firebase SDK 라이브러리 가져오기 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js"; import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js"; import { collection, addDoc } from "https://www.gs... Read More

TIL(Today I Learned) - 오늘의 공부 [왕초보] 웹개발 종합반 3주차 3-12까지 수강을 하였다 클라이언트 - 서버가 어떻게 작용하는지 알게되는 시간이었다. 클라이언트(웹페이지) -> 서버(API) : GET 요청으로 정보를 가져온다 Fetch(가져오기)에 대한 기본 구조에 대해서 이해하게 되었다. fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET! .then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다 .then(data => { ... Read More

TIL(Today I Learned) - 오늘의 공부 팀 공부 아티클 스터디 SQL의 종류와 특징에 대해 알아보는 시간을 가졌다. 엑셀보다 쉽고 빠른 SQL 5주차까지 완강 및 과제 제출을 하였다 4주차 내용 SubQuery 와 JOIN 에 대한 사용 방법을 배웠다. /* 서브 쿼리는 쿼리의 내부 속 쿼리를 뜻하며, 이를 이용하여 연산을 분배하여 식을 간략화 할 수 있다. */ SELECT column1 , special_column FROM ( SELECT column1 , column2 special_column FROM table1... Read More

이번주도 열심히 해따 TIL(Today I Learned) - 오늘의 공부 팀 공부 아티클 스터디 JavaScript와 ECMAScript는 무슨 차이점이 있을까?에 대해 알아보는 시간을 가졌다. [왕초보] 웹개발 종합반 3주차 3-5까지 수강 JQuery를 이용하여 사이트에 기능을 넣는 방법에 대해 배웠다. Toggle 함수를 이용하여 일정 영역 및 구조물을 안보이게 조정했다가 보이게 할 수 있다. input 값들을 읽어 변수에 저장 시키는 방법과 이를 이용하여 새로운 구조물을 만드는 것을 실습해 보았다. $('#id').toggle(); let 변수이름 = $('#id').va... Read More

강의 몰아보기 했던 날! TIL(Today I Learned) - 오늘의 공부 팀 공부 아티클 스터디 SQL 가독성을 높이는 다섯자기 습관에 대해 알아보는 시간을 가졌다. [왕초보] 웹개발 종합반 2주차 완강 JavaScript를 웹페이지에 적용 시키는 연습을 해보았다. JQuery를 Import 하여 HTML 내용을 수정하는 방법을 배웠다. 엑셀보다 쉽고 빠른 SQL 1/2주차 완강 SQL 문법 공부 걷기반을 통해 검색하며 배워간 내용들을 재정리하는 시간을 가졌다. W... Read More

개념정리가 중요한 날이였다. TIL(Today I Learned) - 오늘의 공부 팀 공부 아티클 스터디 2020년과 이후 JavaScript의 동향에 대해 알아보는 시간을 가졌다. 노션의 Java 톺아보기 과제 수행 자바스크립트의 정의와 프레임워크들에 대해 알아 보았다. 왕초보 웹개발 종합반 2주차 (2-8) JavaScript의 기초적인 문법을 배웠다. TIL(Today I Learned) - 학습 과정 중 특이사항 아티클 스터디의 주제에 대해서 공부하고 최대한 요약하려 했으... Read More

열심히 하고 있다! TIL(Today I Learned) - 오늘의 공부 팀과 같이 아티클 스터디를 통하여 소프트웨어 학습 태도에 대해 알아보는 시간을 가졌다. 왕초보웹개발 종합반 2주차 2-4 까지 강의를 따라하며 ‘스파르타플릭스’ 라는 사이트를 구성해 보았다. 기존에 배웠던 구문들 및 부트스트랩 사이트를 이용하여 사이트를 꾸몄다. 다음 강의부터는 Javascript에 대해 배울 예정이다. 엑셀보다 쉽고 빠른 SQL 1-5까지 시청하기 SQL 문법 공부 걷기반을 통해 이미 배운 내용이여서 복습하는 느낌으로 시청하였다.... Read More

SQL 관련 과제 제출 및 기록하기! SQL 문법을 연습해요 7. 랭크게임 하다가 싸워서 피드백 남겼어요… 아래와 같은 lol_feedbacks (LOL 피드백 테이블)이 있습니다. id user_name satisfaction_score feedback_date 1 르탄이 5 2023-03-01 2 배캠이 4 2023-03-02 3 구구이 3 2023-03-... Read More

주마다 WIL을 쓴다는 걸 알게 되었다. TIL(Today I Learned) - 요약 팀과 같이 아티클 스터디를 통하여 게임서버의 트랙에서 자바스크립트를 학습하는 이유에 대해 알아보는 시간을 가졌다. SQL 문법 과제들을 풀면서 기초를 다지는 시간을 가졌다. 현재 문제 28에서 ORDER BY COUNT 사용에 오류가 뜨는 것에 대해 찾아보는 중이다. 웹개발 강의를 조금씩 보면서 GITHUB.IO 블로그에 활용할 방법들을 찾아보는 중이다. (1주차 강의 시청 끝) TIL(Today I Learned) - 중간 과정 아티클 스터디 도중 ... Read More

TIL(Today I Learned)을 오늘부터 작성하기 시작했다! TIL(Today I Learned) - 요약 팀과 같이 아티클 스터디를 통하여 게임서버의 역사에 대해 알아보는 시간을 가졌다. SQL 문법 과제들을 풀면서 기초를 다지는 시간을 가졌다. 웹개발 강의를 조금씩 보면서 언어에 대한 기초를 다시금 키웠다. TIL(Today I Learned) - 중간 과정 게임서버의 역사에 대해 조사할 때 최대한 큰 흐름으로 찾아보기 위해 영어로 검색을 해보았더니 여러 정보가 나왔엇다. SQL 문법 과제들에 정답을 추론하... Read More

처음으로 블로그를 만들어보고 깃허브를 만져본 날이다. Q1. 내가 게임서버 트랙에 참여한 계기는 무엇인가요? A. 고등학교 2학년 때부터 게임 개발에 꿈을 가지고 혼자 공부를 하다가 좋은 기회를 발견하여 참여하게 되었습니다. Q2. 내가 이해한 개발자(혹은 생각했던 직무)는 어떤 역할을 하는 사람인가요? A. 상상한 기술(꿈)들을 직접 구현하면서 다듬어가는 사람인 것 같습니다. Q3. 서버 개발 혹은 게임 개발 관련 경험해보셨나요? 해보셨다면 어떤 경험을 하셨는지를 작성해주시고, 아니라면 찾아본 것을 작성해주세요 A. 강의를 보고 따라해본적은 있으나 직접 개발을 해본 경험은 없었습니다. Udemy 강의를... Read More

이 게시물은 _posts. 디렉토리에서 찾을 수 있습니다 계속해서 편집하고 사이트를 다시 빌드하여 변경 사항을 확인해보세요! 여러 가지 방법으로 사이트를 다시 빌드할 수 있지만 가장 일반적인 방법은 Jekyll serve.를 실행하는 것입니다! 이렇게 하면 웹 서버가 시작되고 파일이 업데이트되면 사이트가 자동으로 다시 생성됩니다. 새로운 게시물을 추가하려면, YYYY-MM-DD-name-of-post.ext 규칙을 따르고 _posts 디렉토리 에 파일을 추가하기만 하기만 하면 됩니다. 이 게시물의 소스를 살펴보면 어떻게 작동하는지 알 수 있습니다. 섹션 1 Jekyll 은 코드 스니펫에 대한 강료크한 지원을... Read More

일반적으로 markdown 언어를 여기에 작성하면 Jekyll이 자동으로 멋진 웹페이지로 변환시켜줘요! markdown 공부에 5분정도는 투자하는 걸 매우 권장해요.. 일반 텍스트를 굵게/기울임/제목/표 등으로 변환하는 방법을 알려줘요! 이 문서는 Markdown 으로 무엇을 할 수 있는지 보여드립니다! Markdown 예시 참고: 이 페이지를 자유롭게 쓰세요. 이 노트는 자동으로 저장되지 않습니다! 기본 서식 문단은 다음과 같이 쓸 수 있습니다. 문단은 마크다운의 기본 블록입니다. 문단은 다른 것이 될 이유가 없을 때 텍스트가 바뀌는 것입니다. 문단은 빈 줄로 구분해야 합니다. 기본서식의 기울임체 와 ... Read More