Frontend6 웹게임 개발기 (14) - UI google material design으로 전환하기 전반적인 웹서비스의 UI의 개선을 진행했다. google material design 을 활용하여 세련되게 표현하려고 해봤다. 요소를 배치하고 부드러운 행동전환이 가능하도록 고민하며 개발하는 것은 상당한 시간을 소요시켰다.추후에는 아직 제대로 반영되지 않는 부분들에 대해 데이터를 연결지을 수 있는 부분을 개발할 예정이다. 기존 홈화면 개선 홈화면 기존 회원가입화면 개선 회원가입화면 기존 게임대기화면 개선 게임대기화면 기존 게임화면 개선 게임화면 아직 몇몇 컴포넌트(card 등)는 android/ios에서만 지원이 되고, web용도로는 지원하지 않는 컴포넌트가 있는 것을 확인하였다.이러한 부분은 추후 업데이트되면 조금 더 연구를 해봐야할 것 같다. https://github.com/material-com.. 2025. 2. 3. 웹게임 개발기 (13) - Google Material Design 으로 UI 구성하기 / favicion 적용하기 이번에는 아무런 라이브러리 없이 빈약하게 구성된 화면을 좀 정상적으로 꾸며보기로 했다. 1. Google Material Design 으로 UI구성하기현재 사이트는 아래와 같이 단순하고 조잡한 형태를 띄고있어 흡사 정상적이지 않은 사이트처럼 보인다.이를 위해 google의 material design을 활용하여 UI를 더 보완하기로 했으며, 우선 아래와 같이 material/web을 패키지에 추가해야한다.npm install @material/web 그렇게 설치하고 나면, material/web은 Module JS 기반으로 동작하기 때문에, 전체프로젝트 관점에서는 Common JS 와 혼재한 상태가 된다. 그래서 이번에 webpack과 babel을 추가하여 이러한 문제를 해결하기 위한 번들링과 트랜스파일.. 2025. 1. 30. [javascript 탐닉] 제너레이터와 async / await 알아보기 지난번 javascript 탐닉에 이어서 오늘은 js의 제너레이터와 async / await 개념에 대해 공부해보고자 한다. 1. 제너레이터, generatorasync / await를 이해하기 위해서는 먼저 제너레이터의 동작방식에 대한 이해가 필요하다.제너레이터 함수는 ES6에서 도입된 함수로, 코드블록의 실행을 일시중단한 뒤 다시 필요한 시점에 해당 부분부터 실행할 수 있게 만들어진 함수이다.위 설명처럼 일반함수와 달리 한번 호출하고 나면 함수안에서의 로직은 호출자(caller)가 제어하지 못한다는 것이 함수에 대한 일반적인 지식이었는데, 제너레이터는 중간중간 함수 호출자에게 제어권을 양도(yield) 가능하다. 또한, 함수 실행 중간에 호출자와 상태를 주고 받을 수 있으며, 함수호출과 동시에 ite.. 2025. 1. 24. 웹게임 개발기 (9) - 배포 시 발생하는 mongoDB 에러 해결 nodejs와 mongoDB를 docker compose를 통해 서비스를 하고, nodejs에서 서비스하는 웹서비스에서 유저정보를 조회하는 qeury를 날릴 경우, 장시간 지체되다가 MongoServerSelectionError가 발생한다. 오늘은 이 원인을 찾아보려한다. 처음 nodejs에서 아이디중복 체크를 위해 아이디를 기재하고 (여기서는 'madaniel'로 기재하였다.) 웹서비스 상에서 아이디중복체크 버튼을 누르면 아래 log처럼 nodejs 서비스에서 정상적으로 logging이 되는 것을 확인할 수 있었다.nodejs-server | userId: madaniel 어느정도 시간이 지나면서 정상적인 출력이 되는가 싶더니, 아래의 코드블럭처럼 mongoseverselcetionerror: co.. 2025. 1. 18. 이전 1 2 다음
