차곡차곡 차곡차곡

소프트웨어 아키텍쳐에서 일반적으로 발생하는 문제점들에 대한 일반화되고 재사용 가능한 솔루션입니다. 소프트웨어 디자인 패턴과 유사하지만 더 큰 범주에 속합니다. 1. Layered pattern 더보기 이 패턴은 n-티어 아키택쳐 패턴이라고도 불린다. 그룹으로 나눌 수 있는 구조화된 프로그램에서 사용할 수 있다. 일반적인 정보 시스템에서 공통적으로 볼 수 있는 계층 4가지입니다. Presentation layer - UI layer Application layer - Service layer Business logic layer - Domain layer Data access layer - Persistence layer 장점 하위 레이어는 다은 상위 레이어에 의해 사용됩니다. 레이어 표준화가 쉬우며 레이..

개발자는 유지 관리 가능하고 읽기 쉬우며 재사용 가능한 코드를 작성하려고 노력합니다. 애플리케이션이 커짐에 따라 코드 구조화가 더욱 중요해 집니다. 디자인 패턴은 특정 상황에서 일반적인 문제에 대한 조직 구조를 제공하여 이러한 문제를 해결하는 데 매우 중요합니다. Gang of Four Design Patterns 1. Creational Design Patterns - 객체의 생성 과정을 제어하여 문제를 해결합니다. Constructor Pattern 더보기 클래스 기반 디자인 패턴입니다. 사실, 패턴이라기보다 기본 언어 구조에 가깝습니다. 그러나 자바스크립트에서는 객체를 생성자 함수나 클래스 없이 만들 수 있습니다. 다음 예제는 메서드를 가진 클래스를 정의하고 생성자 메서드를 호출하여 객체를 인스턴스..

Javascript의 암시적 강제 변환은 예상하지 못한 값의 유형을 예상 유형으로 강제하려는 Javascript를 말합니다. 피해야하는 js의 특징입니다. 3 * "3" // 3 * 3 3 * Number("3") // 3 * 3 Number("5") // 5 + 연산자의 경우는 다른 수학 연산자와 달리 두 가지 기능을 합니다. 1. 덧셈 2. 문자열 연결 // 문자열 연결 1 + "2" // "12" 1 + "AB" // "1AB" // 덧셈 1 + 2 // 3

자바 스크립트는 value 타입과 reference 타입으로 나뉩니다. value 타입은 5가지가 있습니다. (primitives) Boolean, null, undefined, String, Number reference 타입은 3가지가 있습니다.이들은 모두 기술적으로 객체이므로 Object라고 합니다. Array, Function, Object Primitives let x = 10; let y = 'abc'; 메모리에 x라는 변수에 10(Number)이 할당되고, y라는 변수에 'abc'(String)이 할당됩니다. 변수에 할당되는 값을 다른 변수에 저장한다면 ' = '을 사용하여 복사할 수 있습니다. let x = 10; let y = 'abc'; let a = x; let b = y; 이제는 메..

Number Type 자바 스크립트의 숫자는 국제 IEEE 754 표준에 따라 두배 정확도의 부동 소수점 숫자로 저장됩니다. 숫자를 64 bits로 저장합니다. 이 유형은 정수와 분수를 모두 저장하는 데 사용되며 Java 및 C의 'double' 데이터 유형과 동일합니다. 그래서 1이 저장될 때 이렇게 저장됩니다. 0011111111110000000000000000000000000000000000000000000000000000 또한, 부동 소수점 형식을 사용하는 언어에서 0.1 + 0.2는 0.3이 아니고 0.30000000000000004으로 출력됩니다. 실제로는 0.3000000000000000444089209850062616169452667236328125입니다. 숫자가 저장되는 방법의 이해 가장..

캐릭터를 화면에 만들어 봅니다. 먼저 캐릭터를 다운로드합니다. 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", "..

잘린 타일을 여러 개 이어붙여서 배경을 만들어 봅시다. 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 = ..

하나의 커다란 이미지를 잘라서 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 < ..

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..

자신만의 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..