Node 강의/심화 11

1-5 핸들러, 제약조건 적용하기

1. 어떤 핸들러와 조건을 설정할 것인가? 핸들러핸들러 ID작업10소문자를대문자로 변경11데이터를 역순으로 변경 제한 조건메시지의 크기가 1024 바이트 보다 큰 경우에는 에러 반환 이후 커넥션 해제 2. 제한된 크기를 설정해줬기 때문에 Server에서 Client가 범위 내 메시지 보냈는지 확인하기 먼저, constant.js에서export const MAX_MESSAGE_LENGTH = 1024;// Clinet가 서버로 보낼 메시지 가능 최대 길이위와 같이 메시지 제한 크기를 작성해줍니다. 수정된 이후 : export const TOTAL_LENGTH_SIZE = 4;export const HANDLER_ID = 2;export const MAX_MESSAGE_LENGTH = 1024;// Clin..

Node 강의/심화 2024.10.18

(중요) 자바스크립트 클라이언트에서 json 타입 형식 가져오는 방법

app.use(express.static('public'));는 서버가 public  디렉토리의 파일을 정적으로 제공해클라이언트가 public 폴더에 있는 파일을 직접 요청할 수 있게 해줍니다. 하지만,app.use(express.static('public'));사용해 public 폴더 안 파일에서 즉, 클라이언트 부분.js 파일에서 json 파일을 읽어와야 할 경우   Failed to load module script: The server responded with a non-JavaScript MIME type of “경로/json”. Strict MIME type checking is enforced for module scripts per HTML spec.  와 같이 JavaScript형식 서..

Node 강의/심화 2024.09.30

1-9 게임 클라이언트 구현하기 (점프 게임)

폴더를 다운 받고, 압축을 해제한 후 파일을 최상위 디렉토리에 넣어줍니다.(모든 저작권은 스파르타 코딩클럽에게 있습니다.)(문제가 될 경우 삭제하겠습니다...) app.js에서 app.use(express.static('public')); 변경된 부분 :  app.use(express.json());app.use(express.urlencoded({ extended: false }));// urlencoded 해주는 옵션// extended : true는 라이브러리를 쓸 때// extended : false는 라이브러리를 안 쓸 때app.use(express.static('public'));initSocket(server); app.use(express.static('public'))로 'public' ..

Node 강의/심화 2024.09.29

1-8 이벤트 핸들러 ( 점프 게임 )

이벤트 핸들러 :  -  데이터 교환, 메시지 교환을 하는 모든 과정을 '이벤트'라고도 부르는데 이 '이벤트'를 어떻게 관리할 것인지, 어떻게 핸들링 할 것인지 - 기획한 컨텐츠를 처리하기 위한 이벤트 핸들러를 만들 수 있다. 1. 기획 리마인드 ⛳️ 스테이지☑️ 시간에 따른 점수 획득기본적으로 오른쪽을 이동하면서 장애물을 피하는 게임오래 버틸수록 높은 점수 획득 (시간에 따른)☑️ 스테이지에 따라서 더 높은 점수 획득0점 , 1스테이지1000점, 2스테이지위와 같이 점수로 나뉘어서 스테이지 구분스테이지가 올라갈수록 시간당 높은 점수 획득 가능ex) 1스테이지 = 1점 per 1s, 2스테이지 = 2점 per 1s🎲 아이템☑️  아이템 종류에 따라 다른 점수 획득이동 중 아이템 무작위 생성☑️  스테이..

Node 강의/심화 2024.09.27

1-7 커넥션 핸들러 ( 점프 게임 )

커넥션 핸들러 : - 웹소켓과 TCP에서는 데이터 통신을 위해 Connection을 맺어야하는데 그 Connection을 어떻게 관리할 것인지, 어떻게 핸들링할 것인지 - 서버에서 유저를 위한 데이터를 생성해 저장할 수 있다. 1. 기획 리마인드 스테이지 관련 내용을 리마인드 해봅시다.☑️ 스테이지에 따라서 더 높은 점수 획득0점 , 1스테이지1000점, 2스테이지위와 같이 점수로 나뉘어서 스테이지 구분스테이지가 올라갈수록 시간당 높은 점수 획득 가능ex) 1스테이지 = 1점 per 1s, 2스테이지 = 2점 per 1s‘0점, 1스테이지’ 의 내용을 구현하려면 유저는 연결(계정)이생성되는 즉시 스테이지에 관한 정보를 가지고 있어야합니다.해당 내용에 따라 배운 내용을 토대로 만들어봅시다  그럼 스테이지를..

Node 강의/심화 2024.09.27

1-6 유저 접속 관리 ( 점프 게임 )

유저 접속 관리 : 유저가 서버에 접속을 하게 되는데 유저를 받아드리기 위한 과정                              유저들의 정보를 메모리에 저장할 수 있다. 1. 유저가 접속할 때 서버가 받는 데이터 socketId 가 존재하는 이유는 현재 유저가 서버에 접속해 있다는 상태를 저장하기 위해서 사용 됩니다.(같은 socketId 정보가 왔다 갔다 하는 것을 바탕으로 접속해 있다는걸 확인 할 수 있다.) 임시적인 것으로 연결이 끊기고 다시 연결되면 새로운 socketId가 생성 돼 socketId로 유저를 특정하지 못 한다. uuid는 서버가 유저에게 발급해줄 id 입니다.유저를 특정할 수 있게 해준다.  2. 핸들러를 통한 로직 처리이벤트를 처리하는 함수를 핸들러라고 합니다.앞으로 모든..

Node 강의/심화 2024.09.27

1-5 서버 로직 개발(데이터 테이블 로드)( 점프 게임 )

데이터 테이블 로드 : 기획 단계에서 만든 게임 테이블들을 서버 메모리에 로드하는 작업으로'파일 시스템'을 사용하여 서버에서 필요한 데이터 테이블을 메모리에 로드할 수 있다. 1. fs(모듈) 파일 시스템이란?-  Node.js의 fs(파일 시스템) 모듈은 모 파일 시스템에 접근하고,   파일을 읽고 쓰는 기능을 제공합니다. - 동기적, 비동기적 방식 모두로 파일 I/O  작업을 수행할 수 있습니다. - 파일 생성, 읽기, 쓰기, 삭제, 수정 등의 작업을 할 수 있습니다. - 다양한 형태의 파일 기반 작업을 가능하게 합니다.  데이터 테이블을 '로드'하기 이전 관리하는 방법Data Table이 필요한 이유는 Client가 Stage 정보를 어느 정도 알고 있어야서버에 요청(Request)을 보낼 수 있고..

Node 강의/심화 2024.09.26

1-4 개발 환경 세팅 ( 점프 게임 )

기본적으로 사용할 기술은? Node.jsExpressWebSocket DB나 Redis로 데이터를 관리할 필요가 있지만,"개발 환경 세팅"에서는 웹소켓 통신을 위한 세팅만구성하고, 다음 강의에 DB나 Redis를 사용해보겠습니다. 먼저, 해당 디렉토리의 터미널에서 yarn addyarn init -y 를 입력해줍니다. 그 결과, package.json과 yarn.lock이 생성된 걸 볼 수 있습니다. package.json으로 이동해  "type": "module"을 추가해줍니다. 이제 본격적으로 필요한 패킷들을 받아보겠습니다.터미널에서 yarn add express socket.io 를 입력해줍니다. 그럼  "dependencies": {    "express": "^4.21.0",    "socket..

Node 강의/심화 2024.09.26

1-3 게임 기획하기 ( 점프 게임 )

1. 게임 장르 결정하기 게임의 방향성을 정할 수 있는 장르를 가장 먼저 선택해줍니다. 시중에는 아래와 같이 다양한 장르가 존재합니다.액션어드밴처롤플레잉슈팅시뮬레이션전략퍼즐레이싱스포츠리듬파티생존샌드박스MOBA카드MMORPG플랫폼탑다운 슈터로그라이크호러턴제 전략방치형탐험탱크협동멀티플레이대전 격투슈팅 "우리는 플랫폼 사이드 뷰 점핑 액션 게임"을 만들어 볼 겁니다.ex)  2. 게임 컨텐츠1) 스테이지 진행 시간에 따른 점수 획득기본적으로 오른쪽을 이동하면서 장애물을 피하는 게임오래 버틸수록 높은 점수 획득 (시간에 따른) 스테이지에 따라서 더 높은 점수 획득0점, 1 스테이지1000점, 2스테이지위와 같이 점수로 나눠서 스테이지 구분스테이지가 올라갈수록 시간 당 높은 점수 획득 가능ex) 1스테이지 = 1..

Node 강의/심화 2024.09.26

1-2 HTTP와 TCP 그리고 웹소켓

1. HTTP 구조1) Request, Response 구조 + 비연결성Request↔️Response1. Request가 없으면 Response를 보내지 못 한다.Request에는 유저의 정보(송신지 포트 주소)가 있다 서버는 Requset로 부터 온 요청에대한 Response를 유저의 송신지 포트 주소로 보내주면 된다.2. 비연결성(연결을 유지하고 있지 않다)유저의 Request를 서버가 Response로 응답했다면 연결은 끝이 납니다.연결을 유지하지 않기 때문에 리소스가 적어지고, 처리 속도가 빨라집니다. 2) Stateless (무상태)Request에 따른 Response로 응답하면 연결은 끝난 것 입니다. 그 결과, 이전 연결, 이후 연결 모두 새로운 연결이 되고,이전에 일어났던 일(상태)를 저..

Node 강의/심화 2024.09.26