YG - 96년생 , 강아지 있음, 개발자 희망

class CSS 속성을 줄 때 클래스를 이용합니다. 그 이유는 CSS 속성을 고치기 위해 class 명을 고치게 되어도 사이트 로직에 영향을 주지 않게 하기 위함입니다. 예를 들어 회사에 퍼블리서와 개발자가 따로 있다면 퍼블리셔 - 개발자 간의 협업을 할 때 서로 건드리는 부분을 달리 해서 서로의 작업에 영향을 주지 않도록 하는 것입니다. id Javascript 코드에서 querySelector를 지정할 때 사용합니다. class와 id를 구분 지어 사용하는 컨벤션의 장점과 단점 id와 class를 나누어 사용하는 컨벤션을 사용한다면 CSS를 바꾸거나, 로직을 변경할 때 id 혹은 class를 변경해도 영향을 덜 준다는 장점이 있습니다. 단점으로는 불필요한 id와 class를 만들어 사용하는 경우가..

글이 전하려고 하는 정보 커스텀 엘리먼트와 쉐도우 돔을 이용하여 메서드 형식으로 사용하는 방법, CSS 속성을 주는 방법, 타입스크립트에서 타입 지정하는 방법 등등 사용하며 배운 지식을 전하려고 합니다. Custom-element를 사용하는 방법 https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_custom_elements 사용자 정의 요소 사용하기 - 웹 컴포넌트 | MDN 웹 컴포넌트 표준의 주요 기능 중 하나는 사용자 정의 페이지 기능을 제공하는 길고 중첩된 요소들의 묶음으로 만족하는 것보다는, HTML 페이지에서 기능을 캡슐화하는 사용자 정의 요소를 생성 developer.mozilla.org Shadow Dom을 사용하는 방법 htt..

Type vs Interface 타입스크립트에서는 값의 모양이나 구조를 정의하기 위해 type 과 interface 모두 사용되지만 , 둘은 약간의 차이가 있습니다 - 공통점 type과 interface 모두 타입스크립트에서 객체의 타입, 함수의 타입 등을 정의할 수 있습니다 변수 타입 , 함수의 반환값을 지정하는 데 둘 다 사용할 수 있습니다 type과 interface 모두 확장하여 새 유형을 만들 수 있습니다 - 차이점 type은 기존 타입의 새 이름을 정의하는 방법이며, interface는 새로운 객체를 처음부터 정의합니다. 즉 type은 타입의 타입 별칭(Type Alias)을 지정하는데 사용할 수 있고 interface는 완전히 새로운 유형을 정의하는 데 사용할 수 있습니다 type은 선언된 ..

ReferenceError: require is not defined Electron.js 에서 찾지 못한다는 에러를 만났을 경우 contextIsolation: false,​ 기능을 false로 해주면 해결이 됩니다. contextIsolation 컨텍스트 격리는 사전 로드 스크립트와 Electron의 내부 논리가 모두 웹 콘텐츠에 로드하는 웹 사이트와 별도의 컨텍스트에서 실행되도록 보장하는 기능입니다. 이것은 웹 사이트가 전자 내부 또는 프리로드 스크립트가 액세스할 수 있는 강력한 API에 액세스하는 것을 방지하는 데 도움이 되므로 보안 목적으로 중요합니다. 즉, 사전 로드 스크립트가 액세스할 수 있는 창 개체는 실제로 웹 사이트가 액세스할 수 있는 개체와 다릅니다. 예를 들어, 창을 설정한 경우.h..

원인 게임을 만드는 데 보통 다른 온라인, 콘솔 게임처럼 화면 전체를 이용해서 몰입감 있는 게임을 만들고 싶었습니다. 그래서 윈도우 ,mac에서의 상하단의 task bar 를 지우고 싶었습니다. 해결 main.js const { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow() { const win = new BrowserWindow({ show: false, fullscreen: true, frame: false, autoHideMenuBar: true, alwaysOnTop: true, webPreferences: { nodeIntegration: true, preload: p..

1. 설치하기 npm i ws ws Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js. Latest version: 8.12.0, last published: 6 days ago. Start using ws in your project by running `npm i ws`. There are 14226 other projects in the npm registry using ws www.npmjs.com 2. Node.js 환경에서 WebSocket 서버 만들기 WebSocket 환경에서의 서버만 사용한다면 아래의 코드처럼 만들 수 있습니다. import { WebSocketServer } f..

HTTP 모든 서버들이 작동하는 방식이다 예를 들어 유저가 request를 보내면 서버는 response를 반응하는 방식이다 http에서 중요한 점은 stateless라는 점이다. stateless stateless라는 점은 백앤드가 유저를 기억하지 못한다는 뜻이다. 유저와 백앤드 사이에 아무런 연결이 없다. request, response 과정 뒤에 백앤드는 유저를 잊어버린다. 백앤드는 response를 반응하고 그다음 request만을 기다린다. 예를 들어 서버로 메시지를 보내고 싶은데 이미 로그인이 되어 있다면 유저는 cookie만 보내면 된다. 아이디의 profile 페이지를 보고 싶다면 내가 누구인지 알려주는 cookie만 보내면 된다. 그러면 서버가 일치하는 profile로 response를 ..

기능 목록 9. 유닛 이동 - [ ] 유닛이 겹쳐지면 안되고 각자의 크기대로 공간을 차지한다. - [x] 유닛을 생성할 때 가운데를 기준으로 겹치지 않게 생성된다. - [x] 유닛을 이동할 때 겹쳐지면 안되고 이동하려는 위치 중심으로 움직여야 한다. 유닛이 겹쳐지지 않게 생성하고 이동했을 때도 서로 겹쳐지지 않게 기능을 구현하려고 했다. 처음에 2차원 배열을 활용한 그리드 기반으로 구현해볼까 했지만 지금 만들려는 게임에는 배열처럼 한 칸 한 칸 움직이는 것이 아닌 스무스하게 움직이게 기능이 되어야 하기 때문에 픽셀 시스템 기반으로 만들어야 했다. 따라서 Unit 클래스에서 현재 위치와 겹치는 다른 유닛이 있다면 위치를 조정하도록 기능을 구현했다. Unit.js class Unit { #stDx = -1;..