news0516 님의 블로그

chat 기능 정리- 실시간 웹 소켓 통신을 위한 라이브러리 socket.io 설치- http 모듈로 서버 생성- 생성된 서버에 Socket.IO를 바인딩하여 실시간 통신 기능 활성화. const server = http.createServer(app);const io = socketIo(server);주요 코드 정리- app.js에서 socket.io 이벤트 처리// app.jsio.on('connection', (socket) => { // 사용자 입장 socket.on('newUser', (name) => { socket.name = name; io.emit('update', { type: 'connect', name: 'SERVER', message: `${name}님이 ..

userProfile 페이지에 저장한 프로필 정보를 가져와 띄우기 위해 파일 코드를 수정하였다.// static/userProfile/userProfile.hmtl... // profile 정보 띄우는 곳 채팅에 들어가기 전송 ...일단 프로필 저장 버튼을 통해 로그인한 userId에 프로필 정보를 저장하는 API를 구성하였다.router.post('/save-profile', authMiddleware, async (req, res) => { // 인증을 통한 userId 판별 const { userId } = req.user; // 입력창에서 받은 정보 cons..

이번 주에 라이엇 API를 활용해서 유저 정보를 코드로 가져오는 작업을 했다. 평소에 롤이나 다른 게임의 Open API를 활용한 사이트들을 자주 사용했지만, 이번에 직접 구현해보면서 이러한 사이트들이 어떻게 만들어지는지에 대한 이해가 깊어졌다. 처음에는 웹소켓을 활용한 채팅 기능을 맡았고, 클라이언트 측 코드를 구성하는 데 어려움이 있었다. 회원가입, 로그인, 프로필 생성 등 다른 팀원들이 만든 라우터를 기반으로 클라이언트에서의 구동을 실현하는 과정이 많아 시간이 많이 소요되었다. 그래도이러한 작업이 흥미로웠고, 성취감을 느꼈다. 서버와 클라이언트 측 코드를 직접 구성하고 정보를 주고받는 과정을 통해 전체적인 시스템 구조를 이해하는 데 큰 도움이 되었다. 양적으로 힘든 한 주였지만, 많은 것을 배울 수..

금일 작업import express from "express";import axios from "axios";import dotenv from "dotenv";import authMiddleware from "../middlewares/auth.middleware.js";dotenv.config();const router = express.Router();const RIOT_API_KEY = process.env.RIOT_API_KEY;/**닉네임과 태그를 입력받아 소환사 정보를 반환하는 API */router.post("/summoner-info", authMiddleware, async (req, res) => { const { gameName, tagLine } = req.body; const ..

로그인, 회원가입 페이지의 js, css 파일 수정한 후 유저 로그인, 회원가입 라우터와 연계하여 프론트엔드에서 테스트 완료.HTML 요소의 ID가 잘못 사용되어 발생한 문제를 해결하기 위해 ID를 수정하였다하나의 라우터를 합치는 과정에서 오류 메시지를 통해 문제를 진단하고, 코드에서 어떤 부분이 잘못되었는지를 파악하는 방법을 익혔다.

내가 프로젝트 중 맏은 실시간 채팅 기능은 일단 기본적인 프론트엔드 구성 후 반응을 확인하는 방식으로 진행하였다.웹 소켓을 통해 클라이언트와 서버 간의 실시간 양방향 통신이 가능하므로 다른 깃허브를 참고하여 실시간 채팅서버를 구현하였다.socket.emit 메서드를 통해 서버에 이벤트를 전송하고, socket.on 메서드를 통해 서버로부터의 메시지를 수신하는 방식으로 채팅기능이 구현된다.웹에 연결되자마자 닉네임을 적고 채팅에 참여하는 형태였기 때문에 채팅 참여 버튼을 만들고 클릭 시 채팅에 참여할 수 있도록 script.js를 수정하였다.const socket = io();document.addEventListener("DOMContentLoaded", () => { /* 채팅에 들어가기 버튼 클릭 시..

길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이)function solution(a, b) { let sum = 0; for (let i = 0; i 웹서버 신규 프로젝트 시작, 웹 소켓 이용한 실시간 채팅을 구축하는 것을 하기로 했다.팀 노션, API 명세서, 와이어프레임 등 기본 준비 마친 후 내일부터 본격적인 구현을 시작할 예정

이번 주는 면접 준비와 개인 프로젝트를 통해 많은 배움을 얻었다. 처음에는 IP, IP 주소 체계, 서브넷 마스크, 라우터 및 라우팅(동적, 정적)에 대한 정의를 정리하며 면접 준비를 했다. 이를 통해 네트워크 관련 지식을 다시 한 번 되새길 수 있었다.모의 면접을 진행하면서 꼬리 질문에 집중하느라 본 질문에 소홀했던 점이 아쉬웠다. 특히, 예상치 못한 질문에 당황했던 경험은 앞으로의 면접 준비에 있어 다양한 경우의 수를 고려해야 한다는 중요한 교훈을 주었다. 간결한 답변도 중요할 수 있지만, 필요할 경우 자세한 설명도 준비해야겠다고 생각했다.개인 프로젝트에서는 서버와의 통신 로직을 수정하고, 스테이지 변경 및 아이템 획득 로직을 구현하는 데 힘썼다. 처음에는 혼란스러웠던 부분이 점차 명확해지면서 성취감..

금일엔 리얼타임과제를 제출하고 해설영상을 참고해 어떤 부분이 부족하였는지 알 수 있었다.검증 과정에서 실시간으로 획득하는 점수에 대한 부분을 제대로 구성하지 못한 것 같다.또한 이전 프로젝트 처럼 배포에 어려움이 있어 이전 강의 내용을 다시 한번 찾아봐야 할 것같다.다음주에는 결정한 웹서버 프로젝트가 시작되어 팀이 바뀌게 되므로 새로운 강의에 집중할 예정.

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.function solution(s) {// 짝수인경우 가운데 2글자// 홀수인경우 가운데 1글자if (s.length%2===0) {return s.substr(s.length/2-1, 2 )} else {return s.charAt(Math.floor(s.length/2))}}str.substr( start, length )substr( ) 의 가장 큰 차이점은 두번째 인자가 끝점의 Index가 아니라 '시작점부터 출력할 문자열의 길이' 라는 점이다.String.charAt(Index)는 문자열에서 Index에 해당하는 문자 1개를 리턴합니다. 따라서, 특정 Index의 ..