차곡차곡 차곡차곡

Plugins Loader는 특정 유형의 모듈을 변환하는데 사용되지만 Plugin을 활용하여 번들 최적화, 에셋 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행할 수 있습니다. Plugin을 사용하려면 require() 해야하고 Plugins 배열에 추가해야 합니다. 대부분의 플러그인은 옵션을 변경하여 사용자 정의할 수 있습니다. const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm을 통한 설치 const webpack = require('webpack'); // 내장 플러그인에 접근 module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugi..

왜 webpack을 사용해야 하는가? webpack은 Javascript Bundling Tool입니다. 즉, 자바스크립트 소스들을 하나로 묶는 도구입니다. 1. Entry 설정을 통한 Javascript 리소스 모듈화 2. CommonsChunkPlugin 자동생성 3. npm으로 Javascript 리소스 일원화 4. Loader를 활용한 Node.js 도구의 활용 5. Webpack Configuration으로 간편한 로컬/테스트/리얼 환경별 빌드 관리 6. Webpack-dev-server 활용한 개발 편의성 증대 라는 장점이 있다고 하는데 아직은 잘 모르겠네요. 일단 공식문서를 읽어보며 천천히 알아가야겠습니다. webpack의 6가지 핵심 개념이 있습니다. 1. Entry 2. Output 3...

Representational State Transfer REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐입니다. 최근 서버 프로그램은 다양한 브라우저와 모바일 디바이스에서 통신을 할 수 있어야 합니다. 이러한 멀티 플랫폼에 대한 지원을 위해 서비스 자원에 대한 아키텍처를 세우고 이용하는 방법입니다. REST의 특징 1. Server-Client (서버-클라이언트 구조) - server의 자원을 바탕으로 API를 제공하고, client에서 자원을 요청합니다. 2. Stateless (무상태) - server는 각각의 요청을 별개의 것으로 인식하고 처리..

3. Behavioral Design Patterns - 객체 간의 통신을 개선합니다. Chain of Responsibility Pattern 더보기 느슨하게 결합 된 객체의 체인을 제공하는 동작 디자인 패턴입니다. 책임 패턴의 좋은 예는 일련의 중첩된 DOM 요소를 통해 전파되는 DOM의 이벤트 버블링입니다. 그 중 하나에 이벤트를 수신하고 그에 대해 작동하기 위해 연결된 "이벤트 리스너"가 있을 수 있습니다. class CumulativeSum { constructor(intialValue = 0) { this.sum = intialValue; } add(value) { this.sum += value; return this; } } // usage const sum1 = new Cumulative..

소프트웨어 아키텍쳐에서 일반적으로 발생하는 문제점들에 대한 일반화되고 재사용 가능한 솔루션입니다. 소프트웨어 디자인 패턴과 유사하지만 더 큰 범주에 속합니다. 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", "..