자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

오늘은 그동안 스킵되었던 신규 기능 게임 가이드 기능을 개발했다. 역시나 기획은 아직 나오지 않고 목록 화면 디자인만 나와서 해당 디자인을 기반으로 테이블 설계를 작업했다 그리고 목록 조회, 검색 조회, 목록 페이지네이션 API를 만들고 상세보기 API를 만들었다. 그 외에 글 작성이나 수정 등은 컨셉이 나와야 작업이 가능할 것 같아 다시 스킵되었다. 현재 채팅기능이 완료되서 주석 달고 코드 정리 중이다. 아마 내일은 코드와 함께 리뷰 일지를 작성할 수 있을 것 같다.

오늘도 어김없이 어제 공부의 연장선이다. https://pa-pico.tistory.com/3?category=839605 [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (1) - 설계 및 기획 [PROJECT] Socket.io 채팅 어플리케이션 (1) - 설계 및 기획 Socket.io 채팅 애플리케이션 (1) - 설계 및 기획 앞으로 여러 차시를 거쳐서 채팅 애플리케이션을 만들 것 이다. 기본적으로 준비해야 할 것들 IDE (.. pa-pico.tistory.com 이 곳에 올라와있는 포스트를 기반으로 디자인이나 코드작업을 진행하고 있다. 단 코드가 jQuery 기반 코드여서 이를 JavaScript 기반으로, 서버는 TS를 첨가해서 변환하여 작업하고 있다. 그리고 템플릿은 pug..

오늘도 어제의 공부 내용의 심화 학습이다. 네임스페이스를 학습하여 여러 채널을 띄우는 방법을 터득했다. 이제 회원가입, 로그인, 로그아웃을 소켓 통신으로 구현하여 적용하고, 이후 채팅방을 선택하여 접속, 채팅할 수 있는 기능을 만들 것이다. 오늘은 템플릿 만들고 디자인하고 학습하는데 시간을 다 써서 딱히 만들어진게 없다...

아직 기획이 안나와서 공부 중이다. 그래서 개인 프로젝트를 어떻게 해야할 지 좋은 아이디어도 안떠오르고 해서 언젠가 한번 공부해야지 했던 소켓을 학습하는 시간을 가졌다. Socket.IO란? 소켓은 브라우저와 서버간의 실시간 양방향 및 이벤트 기반 통신을 가능하게 해주는 라이브러리다. Socket.IO 특징 신뢰성 프록시 및 로드 밸런스 환경에서도 연결이 가능하다. 개인 방화벽 및 바이러스 백신 소프트웨어로부터 신뢰를 얻을 수 있다. 자동 재 연결 지원 별도의 설정이 없는 한 연결이 끊긴 클라이언트는 서버에 다시 연결할 수 있다. 연결 해제 감지 HeartBeat 메커니즘으로 서버와 클라이언트 모두 어느 한 쪽이 응답이 없을 때를 알 수 있다. 바이너리 지원 브라우저의 ArrayBuffer 및 Blob에..

오늘은 어제에 이어서 계속해서 로그인에 관련된 문제들을 점검했다. 우선 프론트팀에서 webpack dev server로 개발을 진행하고 있는데, vue-cli로 프로젝트를 생성하지 않고 직접 webpack.config 등 설정 파일들을 수기로 작성하여 사용하고 있었다. 여기서 개발 중 프론트 개발 서버에서 백엔드 개발 서버로 요청을 보내고 응답을 받았을 때 응답에 Set-Cookie 헤더 정보가 있어도 클라이언트 브라우저에서 쿠키를 생성하지 못하는 문제가 있었다. 해당 문제는 웹팩 설정에 대한 이해도가 깊지 않은 상태에서 개발을 하다보니 발생한 문제였다. 해결 방법은 다음과 같은데, webpack dev server의 webpack config 설정 중 proxy 속성을 설정해야 한다. 이 속성은 API..

이 날은 테스트 환경으로 인한 착각으로 로그인 기능에 고생을 좀 했다. 현재 백엔드 서버와 클라이언트 서버가 각각 나뉘어있고, 이를 Cross Origin 설정을 해놓아서 상호 통신이 정상적으로 이루어지게 설정해놨다. 그런데 클라이언트 서버에서 로그인을 할 경우 세션 쿠키가 클라이언트 브라우저에 생성이 되지 않는 문제가 발생했다. 이를 하루종일 찾아봤는데 도메인이 달라 발생하는 문제로 파악이 되었다. (클라이언트) localhost:5000 요청 => (서버) localhost:3000 이 경우 응답이 성공하고 쿠키가 생성되는 것이 확인되었다. 그런데 아래와 같은 환경에선 쿠키가 생성되지 않았다. (클라이언트) 192.0.0.1:5000 요청 => (서버) 192.0.0.2:3000 같은 도메인에 포트번..

현재 진행 중인 프로젝트에서 개발해야 할 큰 기능이 하나정도 남았는데 기획이 나오지 않아 진행을 임시 중단한 상태다. 그래서 현재 개인 프로젝트를 만들어볼까 한다. 생각 중인 건 (TypeScript + Node.js) + IOS 앱을 하나 만드려고 한다. 대충 느낌은 푸시 알림이 메인이 되는 서비스이며, 선택한 내용에 대한 정보를 매 일 랜덤하게 하나씩 푸시를 발송한다. 기능만으로 보면 간단해서 오래 걸리거나 하는 문제는 아니지만 처음이라 기획부터해서 어떠한 UI 컨셉을 잡아야하는지 감이 오질 않는다. 뭐 어쨌든... 그래서 일단 상세한 시나리오는 차차 생각하기로 하고 일단 서버의 기본 설정부터 하기로 했다. 사실 타입스크립트 핸드북의 모든 챕터를 보고 시작하려고 했는데 도저히 진도가 안나가는데다가 요..

오늘은 로그인 기능에 이슈가 있어서 이슈 확인 및 수정을 좀 했다. 이슈 내용은 다음과 같다. 클라이언트 서버에서 백엔드 서버로 로그인을 시도하면 응답은 가지만 클라이언트 PC에 Cookie가 만들어지지 않음 해당 이슈는 Cross Domain 이슈 중 하나다 클라이언트 서버에서 백엔드 서버로 서로 다른 아이피와 포트로 통신을 주고 받으니 브라우저의 보안 정책으로 인해 쿠키 생성을 차단한 것이다. NPM 패키지 중 cors 모듈을 통해 Cross Origin 설정을 컨트롤한다. const cors = require('cors'); module.exports = () => { const app = express(); ... app.use(cors({ origin: true, credentials: true..