WANZARGEN

https://dev.to/bespoyasov/clean-architecture-on-frontend-4311 위 글의 일부를 번역 & 정리한 글입니다. 아키텍처와 설계 시스템 설계는 나중에 다시 조립할 수 있도록 시스템을 분리하는 것입니다. 그리고 너무 많은 작업 없이 쉽게 조립할 수 있어야 한다는 것입니다. 아키텍처의 또 다른 목표는 시스템의 확장성입니다. 프로그램에 대한 요구사항은 지속적으로 변경되며, 새로운 요구사항을 충족하기 위해 쉽게 변경할 수 있어야 하는데, 클린 아키텍처는 이러한 목표를 달성하는 데에 도움을 줍니다. 클린 아키텍처 애플리케이션 도메인에 대한 근접성에 따라, 책임과 기능 부분을 분리하는 방법입니다. 도메인 이것은 실제 세계의 변환을 반영하는 데이터 변환입니다. 예를 들어, 제..

http://www.javapractices.com/topic/TopicAction.do?Id=205 위 링크의 글을 번역하여 나름대로 정리한 글입니다. 위 글은 자바의 package 를 어떤 기준으로 나눌지에 대한 글입니다. 되게 당연해보이고 이미 아는 것 같은 내용이지만, 생각보다 당연하게 뇌피셜 기준으로 디렉토리를 막 만드는 나를 발견합니다. 프로젝트 디렉토리 구조를 세울 때마다 제발 이 글 좀 보고 각성하라고 미래의 나에게 이 글을 바칩니다. 응용 프로그램을 빌드할 때 첫 번째 질문은 "어떻게 패키지로 나눌 수 있습니까?"입니다. 일반적인 비즈니스 애플리케이션의 경우 이 질문에 답하는 두 가지 방법이 있는 것 같습니다. 기능별 패키지 단일 기능과 관련된 모든 항목을 단일 디렉토리에 배치합니다. 그..

vue router 를 사용할 때 생기는 chunk 이슈를 다뤄보고자 한다. 문제 😱: Uncaught SyntaxError: Unexpected token '

마이크로 프론트앤드는 마이크로 서비스의 개념을 프론트엔드 세계로 확장한 개념이다. 마이크로 서비스처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식이다. Main Concept 기술 독립성 각 작동 단위들은 기술적으로 독립적일 수 있어야 한다. 각 작동 단위에 사용된 프론트앤드 기술(React, Vue, Vanilla JS 등)에 상관 없이 조합이 가능해야 한다. 컨텍스트 독립성 각 작동 단위들이 같은 프레임워크를 사용하더라도, 컨텍스트를 공유해선 안된다. 독립적인 애플리케이션을 자체적으로 구축해야 하고, 상태 공유나 전역 변수에 의존해서는 안된다. 네임스페이스를 활용한 분리 각 작동 단위의 격리가 불가능한 경우, 네이밍 컨벤션에 따라 prefix 등으로 네임스페이스를 활용한다..

Conventional Commits? 커밋 메세지에 사용자와 기계 모두가 이해할 수 있는 의미를 부여하기 위한 스펙 명확한 커밋 히스토리를 생성하기 위한 간단한 규칙을 제공 커밋 히스토리를 이용하여 더 쉽게 자동화된 도구를 만듦 이 컨벤션은 커밋 메세지에 신규 기능 추가, 문제 수정, 커다란 변화가 있음을 기술함으로써 유의적 버전(Sementic Versioning)과 일맥상통 git 으로 commit 시에 일괄된 양식을 유지 → 그 양식을 바탕으로 버전 관리나 Change Log 를 자동으로 만들 수 있음 커밋 메시지 구조 [적용 범위(선택 사항)]: [본문(선택 사항)] [꼬리말(선택 사항)]커밋 메시지 구조적 요소 Git hook에 Conventional Commit 적용하기 Commit 메시지를..

실행 컨텍스트 정의 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 = 실행 가능한 코드가 실행되기 위해 필요한 환경 자바스크립트 엔진은 실행 가능한 코드를 실행하기 위해 필요한 정보를 형상화하고 구분하기 위해 실행 컨텍스트를 물리적 객체의 형태로 관리한다. 실행 가능한 코드 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 내에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 Eval 함수? 문자로 표현 된 JavaScript 코드를 실행하는 함수. 인자로 받은 코드를 caller의 권한으로 수행하므로, 제 3자 코드가 eval()이 호출된 위치의 스코프를 볼 수 있으며, 비슷한 함수인 Function으로는 실현할 수 없는 공격이 가능하여 절대 쓰지 않는 것이 좋다. 실행..

프로토타입(Prototype) 뽀개버리기!! 함수도 객체다 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다. function add(x, y) { return x+y; } add.status = 'OK'; console.log(add.status) add( ) 함수를 생성할 때 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동으로 저장된다(이것은 ECMAScript 명세서를 참조한 것이다* ). add() 함수에 마치 일반 객체처럼 status 프로퍼티를 생성하고 저장한 것을 확인할 수 있다. status 프로퍼티도 일반 객체에서의 접근 방식처럼 add.status를 이용해 접근 가능하다. 이처럼 자바스크립트에서 함수는 특정 기능의 코드를 수행..

전역 수준 컴포넌트의 문제점 빌드 단계가 없음 ECMAScript 2015 이상, Typescript와 같은 최신 문법을 사용할 수 없음 CSS 빌드 & 모듈화 기능이 없음 template이 모두 고유한 id를 가지도록 개발자가 관리해야 함 그래서 생겨난게... ↓ ↓ ↓ 단일 파일 컴포넌트(Single File Component) 단일파일 컴포넌트: , 위 코드는 아래의 HTML로 생성된다. CSS Module을 적용한 버튼 Hello World hand, box, border과 같이 코드에 주어진 스타일명이 아닌, 충돌하지 않도록 생성된 다른 이름이 클래스명으로 사용된다. 슬롯 부모 컴포넌트에서 자식 컴포넌트로 전달할 정보가 HTML 태그를 포함하고 있다면, props를 사용해 전달하기 쉽지 않다. ..

Vue 컴포넌트? 작고 독립적이며 재사용할 수 있는 -> 뷰 세계에서 가장 기본적인 구성 요소 컴포넌트 시스템 = 컴포넌트의 조합 컴포넌트 여러개가 모여서 컴포넌트 시스템을 이루어 대규모 애플리케이션 구축이 가능하다. 각각의 컴포넌트들은 트리구조로 이루어져 있으며, 서로 상호작용을 하여 애플리케이션 서비스를 이룬다. 컴포넌트 작성과 사용 파라미터 태그명: 컴포넌트를 사용할 태그 태그명은 대소문자를 구별하지 않으므로, 가능한 케밥 표기법을 따르는 것이 좋다! 옵션: 기타 정보(template, props 등) 템플릿 작성 방식 1. 인라인 템플릿 위처럼, template 옵션에 템플릿 문자열을 사용하는 방식을 인라인 템플릿(inline template)이라고 한다. 그리 권장되는 방법은 아니다. 2. te..

Vue.js 공식 홈페이지에서는 단위 테스팅(Unit Testing)을 위한 테스트 러너로써 Karma를 적극 권장하고 있다. 어떤건지 궁금해서 한번 써본 적은 있지만, 실무에 적용해보기에 앞서 너란 놈에 대해 깊은 공부가 필요함을 느끼고... 정말 오랜만의 포스팅 주제로 삼았다. KARMA 공식 홈페이지에 가보면, 이렇게 소개하고 있다. A tool which spawns a web server that executes source code against test code for each of the browsers connected. 위의 영어가 너무 어려워서, 아래처럼 아름다운 한글로 풀어봤다. 카르마는 어떤 웹 서버를 생성하는 도구이다. 이 웹 서버는, 다양한 브라우저들과 연결되어 있다. 그리고,..