개발일지/TIL(Today I Learned)74

• 

  2024-12-26 내일배움캠프 Node.js 트랙 43일차 클라이언트 로직 작성하기게임 화면 - 와이어 프레임개발 체크리스트 피버 타임 구현 ✅ 2024-12-25 => 구현 방식 : 기존 데미지의 1.5배, 기존 사정거리의 1.2배 피버 타임 게이지 바 구현 ✅ 2024-12-25 첫 타워는 중간값에. 그 다음에 구매하는 타워는 좌표를 지정해서 설치해야 한다. ✅ 2024-12-25 타워 설치할 때 범위 표시 ✅ 2024-12-25 => 마우스오버를 하면 범위가 표시되게 설치가 안 될 때는 색깔로 알 수 있게 구현 타워 구매 대기열 UI 제작(랜덤한 타워가 아래쪽 UI에 생성되도록) ✅ 2024-12-25 타워 자세히 보기 UI 제작(타워 정보 표시, 업그레이드와 판매 버튼 출력) ✅ 2024-12-26 필요한 핸들러 .. 개발일지/TIL(Today I Learned) 2024. 12. 26.

• 

  2024-12-24 내일배움캠프 Node.js 트랙 42일차웹소켓 이벤트 명세서 작성하기패킷 구조와 PAYLOAD드디어 타워 디펜스 프로젝트가 시작되었다! 지난 개인 프로젝트에 이서어 웹소켓 통신으로 실시간 게임을 구현하게 되었다. 잠시 내 개인 프로젝트를 돌아보자면, 게임 기획 단계부터 어느 정도 윤곽을 잡고 코드를 작성하기 시작했던 게 도움이 많이 되었던 것 같다. 이번 프로젝트는 규모가 더 커진 만큼 API 명세서를 더 꼼꼼히 써두는 게 좋지 않을까. 그래서 오늘 하루는 오후 늦게까지 팀원들과 어떻게 게임을 만들어나갈지 길게 회의를 나누게 되었다. 그러다 살짝 고민에 빠졌는데, 웹소켓 이벤트의 경우 어떻게 명세서를 작성해야할지 확신이 없었기 때문이다. 때마침 참고가 되었던 건 지난 프로젝트 때 제작했던 패킷 구조였다... 개발일지/TIL(Today I Learned) 2024. 12. 24.

• 

  2024-12-23 <복잡한 IOCP 쉽게 이해하기> IOCP란 멀티 프로세서 환경에서 다수의 비동기 입출력(I/O)을 처리하기 위해 고안된 모델입니다.그 동안 우리가 비동기 함수에 대해서 배웠던 걸 기억하시나요? setTimeout같은 비동기 함수의 실행 결과를 Promise 객체 안에 저장해서 then이나 async-await으로 활용해본 기억이 다들 있으실 텐데요. 동기식 입출력과 비동기식 입출력의 동기, 비동기도 같은 의미를 가지고 있습니다. 동기식 입출력은 사용자가 "입출력을 해줘!" 라고 요청을 했을 때 입출력 작업이 끝날 때까지 기다린 후에야 CPU 제어권이 사용자 프로그램으로 넘어갑니다. 그러나 비동기 입출력은 "입출력을 해줘!"라고 요청을 보낸 후에 다시 CPU 제어권을 얻어와서 다른 작업을 수행하는 게 가능해집니다. 이해를 돕기 위해 예시.. 개발일지/TIL(Today I Learned) 2024. 12. 23.

• 

  2024-12-22 <전송 계층> 전송 계층: IP의 한계를 극복하는 방법전송 계층이란?네트워크 계층과 응용 계층 사이에 존재한다.전송 계층의 역할IP의 한계를 보완해준다. => 신뢰할 수 있는 통신과 연결형 통신 기능을 제공한다.사용자가 사용하는 프로그램을 식별해준다. => 포트 번호를 통해 응용 계층의 프로세스를 식별한다.전송 계층의 역할(1) - 전송 계층은 IP의 한계를 보완한다!IP가 뭐였더라? 복습해보기인터넷 프로토콜의 주요한 역할은 데이터를 패킷 단위로 전달하는 것이었다. 그러기 위해 패킷에 주소(IP 주소)를 부여하고 최적의 경로(라우팅)를 설정하는 기능을 가지고 있었다.사실 이 방식에는 두 가지 특징이 있었으니, 바로 다음과 같다.Internet Protocol(네트워크 계층) => 신뢰성이 없는 통신 + 비연결형 통신... 개발일지/TIL(Today I Learned) 2024. 12. 22.

• 

  2024-12-20 <트러블 슈팅> 트러블1) EC2 서버에서 Redis가 구동되지 않아요!코드의 로직과 관련된 트러블은 아니었으나, EC2로 IP를 배포하고 Redis를 연동하는 과정에서 수많은 난관이 있었다. 아무리 시도해봐도 갱신되지 않는 데이터들. 분명 로컬에서는 아무 문제 없었는데 왜인지 알 수 없어 고민스러웠다. 그래서 구글링과 AI를 이용해 그 답을 찾아냈다.우선, Ubuntu 환경으로 가정하고 설명을 진행하겠다. Redis가 설치되어 있지 않다면 설치부터 진행하자.1. Redis 설치sudo apt updatesudo apt install redis-server다음과 같은 명령어로 Redis 설치 후 Redis 서버가 실행 중인지 확인할 수 있다.sudo systemctl status redis2. Redis 설정 파일 찾기.. 개발일지/TIL(Today I Learned) 2024. 12. 20.

• 2024-12-19 도전! 떡볶이 만들기소개하기에 앞서…컨셉을 잡게 된 배경=> 저의 처참한 프론트엔드 실력에 어찌할 바를 모르다가 옛날 게임 감성을 살리기로 결정했습니다T.T9n년생의 추억을 가득 담아 쥬니어 네이버 시절로 되돌아가보세요! 인스타 쳐내! 버디버디 나와!디렉토리 구조game_server_websocket├─ .gitignore├─ .prettierrc├─ assets├─ package-lock.json├─ package.json├─ public├─ README.md└─ src ├─ app.js ├─ constants.js ├─ handlers │ ├─ game.handler.js │ ├─ handlerMapping.js │ ├─ helper.js │ ├─ inventory.h.. 개발일지/TIL(Today I Learned) 2024. 12. 19.

• 

  2024-12-18 참고한 강의 영상[인프런] 비전공자도 이해할 수 있는 Redis 입문/실전 - YouTube [인프런] 비전공자도 이해할 수 있는 Redis 입문/실전풀버전 강의는 아래 링크를 참고해주세요😊 ✔️ https://inf.run/Puponwww.youtube.comRedis 설치하는 법https://share.note.sx/6zk3acwp#yiGZ8sKP2egqgIg8Bu3MpxEpocq0JRZGvaVe5kt7OGs(출처 : 챗 GPT+ 내 옵시디언 노트) https://share.note.sx/6zk3acwp#yiGZ8sKP2egqgIg8Bu3MpxEpocq0JRZGvaVe5kt7OGs...share.note.sxRedis의 기본 포트 번호6379Redis 기본 명령어 익히기데이터 저장하기set jaes.. 개발일지/TIL(Today I Learned) 2024. 12. 18.

• 

  2024-12-17 GitHub에 올라간 .env 파일 지우기.gitignore를 써도 .env 파일이 제대로 제외되지 않을 때가 있다. 처음엔 오류인 줄 알았는데 구글링을 해보고 나서야 깨달았다. .env파일이 이미 원격 저장소에 푸시가 되어있는 상황이면 원격 저장소가 .env를 계속 추적한다고 한다. 그렇다면 이미 잘못 커밋된 상황을 어떻게 되돌릴 수 있을까? 먼저 .env가 추적되지 않도록 원격에서 해당 파일을 지워야 한다. 이때 git rm이란 명령어를 사용한다.git rm .env --cachedgit commit -m "remove .env file from git repo"git push 하지만 이 방법만으론 한계가 있다. 파일은 지워졌지만 이전에 커밋한 기록은 남아있기 때문이다. 이럴 땐 커밋기록과 레포지토리.. 개발일지/TIL(Today I Learned) 2024. 12. 17.

• 

  2024-12-16 <OSI 7계층 - 네트워크 계층(IP, 서브넷 마스크, 라우터와 라우팅)> 네트워크 계층을 설명하기에 앞서 OSI에 대해 잠시 복습하고 들어가자.OSI 7계층이란?네트워크 통신이 일어나는 과정을 7단계로 나누어서 설명하는 모델이다. 이 모델에 의해 네트워크 프로토콜도 계층별로 구성된다. 그러나 아무리 계층을 체계적으로 나누어둔다 하여도, 어떤 양식으로 보낼지, 어떤 규칙을 준수해야 하는지 미리 정하지 않는다면 서로 소통할 수 없을 것이다. 여기서 프로토콜이란 개념이 설명되는데, 프로토콜은 서로 다른 네트워크 장치들이 메시지를 주고 받기 위한 통신규약이라고 할 수 있겠다. OSI 7 계층은 물리 계층, 데이터 링크 계층, 네트워크 계층, 전송 계층, 세션 계층, 표현 계층, 응용 계층으로 구성되어 있으며, 이번 게시글에서는 네트워크 계층에 대해 자세히 알아 보겠다.네트워크 계층의.. 개발일지/TIL(Today I Learned) 2024. 12. 15.

• 

  2024-12-13 내일배움캠프 Node.js 트랙 34일차웹소켓으로 게임 서버 제작하기 - 이게 트러블 슈팅…?TIL이라는 이름이 무색하게도 오늘 내게 남은 것은 좀처럼 답이 보이지 않는 버그와 싸운 기억 뿐이다. 아니, 어쩌면 배웠다고 해야할까. 이 에러와 사흘 가까이 분투하느라 Promise에 대한 개념도 바로잡게 되었고, 웹소켓과 아주 조금이나마 친해졌으니 말이다. 오늘은 다소 사담 같은 TIL을 작성해볼까 한다.발단: 서버에서 로직을 수행하자문제는 뭐 당연하겠지만 웹소켓에 대한 어정쩡한 이해도 때문에 발생했다. 대충 emit은 전송하는 거고 on은 듣고 있는 거 아님? 이 정도로만 생각하고 있다가 복잡한 코드 앞에서 급격히 머리가 아파지기 시작했던 것이다.태초에 (원흉이 되었던) 이런 코드가 있었다.class Sc.. 개발일지/TIL(Today I Learned) 2024. 12. 13.

• 2024-12-12 내일배움캠프 Node.js 트랙 33일차Joi로 유효성 검사하기왜 유효성 검사에 모듈을 사용해야 할까내가 Joi를 쓰기로 결심하게 된 건 지난 팀 프로젝트 때문이다. 그때 우리의 프로젝트는 풋살 온라인(피파 온라인을 벤치마킹한 이름)이었고, 내가 맡은 업무는 보유한 선수들을 조회하고, 정렬하고, 출전 선수들을 선발하고, 중복되는 선수들을 강화하는 API를 작성하는 것이었다. 짧게 설명하자면, 이래저래 입력 받아야 하는 값이 다양했다는 의미다. 실제 내가 작성했던 코드를 살펴보자.router.post('/myTeamMember', authM, async (req, res, next) => { const { accountId } = req.account; const { page, orderByTh.. 개발일지/TIL(Today I Learned) 2024. 12. 12.

• 2024-12-11 내일배움캠프 Node.js 트랙 32일차Q1. Promise는 함수인가?단도직입적으로 말하자면, Promise는 함수가 아니라 객체이다. 정확히는 JavaScript에서 제공하는 내장 객체로, 비동기 작업을 처리하고, 그 작업의 성공(resolve) 또는 실패(reject) 상태를 추적하고 관리한다.Promise의 정의Promise 는 JavaScript의 비동기 작업을 처리하기 위한 객체이다. 주로 시간이 걸리는 작업(예: API 호출, 파일 읽기, 데이터베이스 작업 등)을 처리한 뒤 그 결과를 다룰 때 사용된다.Promise 객체는 비동기 작업의 성공 또는 실패를 나타내는 값을 캡슐화한다.Promise는 pending(대기 중) → fulfilled(성공) 또는 rejected(실패) 의 상태로 전환.. 개발일지/TIL(Today I Learned) 2024. 12. 11.