공부 및 일상기록

오델로 프로젝트에서 DB로 mySql을 사용하면서 sequelize라는 ORM을 사용하게 되었다. 사실 프로젝트 초기에 아주 잘 만들어 놓았다고 착각한 모델이 있었는데, 여러 블로그들과 지피티와, 지인들에게 물어보니 하나의 테이블 안에 너무 자주 불리는 자료가 있다면 목적에 맞게 분리시키고 1:1 관계를 맺어주는게 좋다고 하였다. 생각해 보니 나는 User라는 테이블안에 회원정보, 그리고 게임 상태, 게임 전적을 볼 수 있는데, 이 세가지는 각기 다른 상황에서 자주 이용될것 같아서 분리 하게 되었다. 그래서 User, GameStatus, Record 라는 이름으로 세 개의 모델을 만들고, sync를 시켜주는데.. 문제는 sync가 User만 되고 나머지가 일어나지 않는 것이였다. 분명 sequelize..

현재 백엔드에서 로그인 인증방식 및 소켓 방 입장의 처리 시점등의 문제들이 있어서 디비를 수정중이다. 내가 너무 더딘 속도로 개발중에 있고, 집중도 안되서 중간 내용을 정리 할 겸 블로그에 정리를 해야겠다는 생각에 쓰는 글이다. 서버를 뒤엎고 다시 만들어놓은 기능 - 회원가입, 로그인, 로그인 인증(JWT) 더 개선해야 하는 코드 - DB테이블 변경 (기존 User 테이블에 너무 많은 정보가 담김, User, GameStatus, Recoad 로 세분화) - socket에 접속 ➡️ GameStatus 디비조회 ➡️ 모델 업데이트 ➡️ 상태에 따른 처리 순서로 코드 변경해야함 - 기존 서버 메모리에서만 사용하던 User객체를 지우고 DB User모델에 비즈니스로직 옮기기 - 방 입장, 레디, 게임시작과..

오델로 프로젝트를 진행한지 거의 3주가 지났는데 너무 제자리 걸음이다. 그래서 오늘부터라도 하루마다 진행한 내용과 어떤 삽질이 있었는지 기록해둬야겠다는 생각이 들었다. 그래야 이전에 어떤 생각으로 이렇게 구현했고 저렇게 구현했고.. 이런걸 알 수 있을 것 같다. 일단.. 이전에 다음과 같은 방식으로 인증과 소켓연결을 시도했다. 로그인 ➡️ 서버에서 토큰 발급하여 리스폰스 ➡️ 액세스토큰과 간단한 유저 정보를 로컬스토리지에 저장 ➡️ 클라이언트에서 로컬스토리지에 토큰이 존재하면 바로 게임 로비로 리디렉션 ➡️ 로비페이지에 접속하면 자동으로 socket.io 연결 시도 ➡️ 서버에서 연결 이러한 과정을 구현했다. 그리고... 지금 문제가 되는 부분이 있다. 소켓에 연결된 로비페이지에는 방 목록 (다른 유저들..

일탈 프로젝트를 모바일 화면까지 반응형으로 만드는 와중에 Footer를 하단 메뉴바로 이용하다가, 화면이 커지면 내려가면서 웹페이지의 하단 푸터가 되도록 만들고 있었다. 문제는 미디어쿼리를 이용하여 특정 크기 이하에서 position:fixed, bottom:0 을 만들어 줬는데도 작동하지 않았다. 구글에 검색하면 수많은 이유로 안된다고 하는데.. 사실 다 해봤는데 난 계속 안됐다. 그러다 우연치않게 스택오버플로우에서 비슷한 현상의 글을 발견했다. https://stackoverflow.com/questions/44679794/position-fixed-on-chrome-mobile-causing-element-to-move-on-scroll-up-down Position fixed on chrome m..

프론트 3명, 백엔드 3명, 디자이너 1명의 팀으로 만들었던 프로젝트인 일상의 방탈출을 리팩토링 하려고 한다. 그 제일 큰 목적은 처음으로 팀 단위로 만든 프로젝트이며, 애착 남아있고, 실제 사용자를 받아보고 싶어서 이다. 그리고 부수적인 목적으로 깔끔한 코드 작성 공부와 타입스크립트 공부, 반응형 공부가 있다. 이 리팩토링은 프론트엔드 부분은 나 혼자 진행하고, 백엔드 부분은 같이 했던 백엔드 개발자 한분이 하기로 했다. 나의 계획은 이렇다. 1. 타입스크립트로 마이그레이션 점차 기능이 많이 붙고, 이미 내가 만든 코드가 아닌것들도 많아서 어떤 데이터가 받아지는지 헷갈릴 때도 많고, 누군가가 합류하게 된다면 그 사람도 헷갈릴 가능성이 있기 때문에 타입스크립트로 마이그레이션 하려고 한다. 2. 코드 분할..