전체 글
-
TIL_200912([JS33] 2. Primitive Types)Today I Learned 2020. 9. 12. 23:37
Number Type 자바 스크립트의 숫자는 국제 IEEE 754 표준에 따라 두배 정확도의 부동 소수점 숫자로 저장됩니다. 숫자를 64 bits로 저장합니다. 이 유형은 정수와 분수를 모두 저장하는 데 사용되며 Java 및 C의 'double' 데이터 유형과 동일합니다. 그래서 1이 저장될 때 이렇게 저장됩니다. 0011111111110000000000000000000000000000000000000000000000000000 또한, 부동 소수점 형식을 사용하는 언어에서 0.1 + 0.2는 0.3이 아니고 0.30000000000000004으로 출력됩니다. 실제로는 0.3000000000000000444089209850062616169452667236328125입니다. 숫자가 저장되는 방법의 이해 가장..
-
TIL_200911(PixiJS-character)Today I Learned 2020. 9. 11. 02:46
캐릭터를 화면에 만들어 봅니다. 먼저 캐릭터를 다운로드합니다. lhteam.itch.io/finn-sprite Adventure Time | Finn Pixel Sprite by LHTeam 32x32 Animated Pixel Fan Art Spirite Finn the human from Adventure Time lhteam.itch.io 이러한 이미지 파일을 받게 되죠. 이전에 타일을 잘라서 화면을 만들었듯이 이번에도 이미지를 잘라서 사용합니다. 이미지의 크기는 32x32 const tileSize = 16; const characterSize = 32; // 캐릭터 사이즈 app.loader.add("tileset", "asset.png"); app.loader.add("character", "..
-
TIL_200910(PixiJS-Container)Today I Learned 2020. 9. 10. 19:22
잘린 타일을 여러 개 이어붙여서 배경을 만들어 봅시다. const app = new PIXI.Application({ width: 480, height: 320, }); const tileSize = 16; // map을 선언합니다 let map = { width: 4, height: 4, tiles: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], }; document.body.appendChild(app.view); app.loader.add("tileset", "asset.png").load((loader, resources) => { let tileTextures = []; for (let i = 0; i < 7 * 11; i++) { let x = ..
-
TIL_200909(PixiJS-tileTexture)Today I Learned 2020. 9. 10. 03:04
하나의 커다란 이미지를 잘라서 sprite로 불러와서 화면을 구성하는 작업입니다. 여러 요소들이 있는 하나의 이미지를 잘라서 퍼즐처럼 끼워 맞출 수가 있어요. 옆에 있는 이미지는 rottingpixels.itch.io 에서 가져왔어요. 무료로 사용할 수 있다니 정말 고맙죠. 먼저 이미지의 사이즈 알아야 합니다. 112 × 176 하나의 타일 사이즈는 16이라니까 계산하면 7×11 const tileSize = 16; app.loader.add("tileset", "asset.png").load((loader, resources) => { // This creates a texture from a 'asset.png' image let tileTextures = []; for (let i = 0; i < ..
-
TIL_200907(PixiJS - sprite)Today I Learned 2020. 9. 7. 23:58
PixiJS Part 5: Sprites - CJ Gammon Pixi에서 texture로 이미지를 불러옵니다. const canvas = document.getElementById("mycanvas"); const app = new PIXI.Application({ view: canvas, width: window.innerWidth, height: window.innerHeight, }); const texture = PIXI.Texture.from('sprite.png'); texture를 sprite로 정합니다. let sprite1 = new PIXI.Sprite(texture); app.stage.addChild(sprite1); sprite의 위치설정 let sprite1 = new PIXI..
-
TIL_200906(React Hook 공식문서)Today I Learned 2020. 9. 6. 23:57
자신만의 Hook 만들기 여러 컴포넌트에 특정한 로직을 공유하길 원할때가 있습니다. 이때 두가지의 공유하는 방법이 있습니다. 1. render props 2. higher-order components 커스텀 Hook을 추출하기 커스텀 Hook은 "use"로 시작하는 Javascript 함수이고, 다른 Hook을 부를 수 있습니다. import { useState, useEffect } from 'react'; function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnli..
-
TIL_200905(React Hook 공식문서)Today I Learned 2020. 9. 5. 22:55
왜 React에서 Hook을 사용해야하는가? Hook은 Class없이 React 기능들을 사용하는 방법을 알려줍니다. 그렇다면 왜 Class없이 React를 사용하려 할까요? 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다. Hook은 컴포넌트로부터 상태관련 로직을 추상화할 수 있기 때문에 독립적인 테스트와 재사용이 가능합니다. Hook은 계층 변화없이 상태관련 로직을 재사용할 수 있도록 도와줍니다. 복잡한 컴포넌트들은 이해하기 어렵습니다. 생명주기 메서드에 자주 관련없는 로직이 섞여서 이로 인해 버그가 쉽게 발생하고 무결성을 쉽게 해칩니다. componentDidMount와 componentDidUpdate로 데이터를 가져오는 것 componentWillUnmount로 cleanup을 수행..
-
(준비중) socket.ioweb 2020. 9. 4. 02:12
'이인용' 프로젝트에서 사용한 socket.io를 정리해봅니다. 양방향 통신 채널 대부분 소켓은 실시간 채팅 시스템을 구현하는데 사용합니다. 채팅 메시지를 작성할 때마다 서버가 메시지를 받아서 다른 연결된 클라이언트에 메시지를 푸시해줍니다. socket.io는 서버 소켓과 클라이언트 소켓으로 구성됩니다. connect // 서버 const app = require('express') (); const http = require('http') .createServer(app); const io = require('socket.io') (http); io.on('connection', (socket) => { console.log('connected'); }); const PORT = 3000; http.l..