글이 전하려고 하는 정보 커스텀 엘리먼트와 쉐도우 돔을 이용하여 메서드 형식으로 사용하는 방법, 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은 선언된 ..
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;..
errorHandler // 1번 방법 function errorHandler(tryFunc, errorFn) { try { tryFunc(); return true; } catch (error) { errorFn(); return false; } } function errorHandler(tryFunc, catchFunc, nextFunc) { try { tryFunc(); return true; } catch (error) { Console.print(error.message); catchFunc(nextFunc); return false; } } // 2번 방법 const inputErrorHandler = (validate, input) => { try { validate(input); retur..
설치 1. eslint, prettier 패키지 설치 npm install -D eslint prettier 2. airbnb eslint 설정 패키지 설치 npx install-peerdeps --dev eslint-config-airbnb 3. prettier eslint 플러그인 및 설정 패키지 설치 npm install -D eslint-config-prettier eslint-plugin-prettier eslint-plugin-prettier: prettier 규칙을 생성하는 eslint 플러그인 eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정 4. package.json 을 git discard 해주기 discard ..
graphQL이란? 그래프 QL은 페이스북이 2012년에 개발하여 2015년에 공개적으로 발표된 데이터 질의어이다. 그래프 QL은 REST 및 부속 웹서비스 아키텍처를 대체할 수 있다. 클라이언트는 필요한 데이터의 구조를 지정할 수 있으며, 서버는 정확히 동일한 구조로 데이터를 반환한다. 장점 1. Overfetching을 없앨 수 있다. 예를 들어 모든 사용자 이름을 GET으로 가져오는데 사용자 이름과 더불어 프로필 사진, 전화번호, 이메일 등 필요한 정보보다 더 많이 서버로부터 받는 것을 Overfetching이라고 하는데 graphQL을 사용한다면 필요한 정보만 가져올 수 있어서 Overfetching을 막을 수 있다. 2. UnderFetching을 막을 수 있다. UnderFetching이란 화..
- Total
- Today
- Yesterday
- NextRequest
- 북클럽
- 노개북
- javascript
- TopLayer
- nextjs
- 프리온보딩
- error
- NextApiRequest
- CLASS
- 아차산
- Storybook
- createPortal
- nodejs
- jest
- env
- C언어
- 윤성우 열혈C프로그래밍
- 스토리 북
- import/order
- 우아한테크코스
- 원티드
- 프론트앤드
- 노마드코더
- 초보
- electron
- 위코드
- WSL2
- React
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |