동글이의 STORY

커밋할때 처리에 대한 구분을 위해 접두어를 붙여서 사용하면 리뷰나 이후 과거의 히스토리를 찾을때 도움이 된다. [ Subject ] type (커밋 종류)feat: 새로운 기능 추가fix: 버그 수정docs: 문서 수정style: 코드 스타일 변경 (코드 포매팅, 세미콜론 누락 등)design: 사용자 UI 디자인 변경 (CSS 등)test: 테스트 코드, 리팩토링 (Test Code)refactor: 리팩토링 (Production Code)build: 빌드 파일 수정ci: CI 설정 파일 수정perf: 성능 개선chore: 자잘한 수정이나 빌드 업데이트rename: 파일 혹은 폴더명을 수정만 한 경우remove: 파일을 삭제만 한 경우출처: https://nohack.tistory.com/17 [luc..

프로젝트에서 로컬 테스트용 설정과 배포용 설정이 달라서 webpack.config.js를 매번 수정하는 상황이 반복되었다.개발할 때 → HtmlWebPackPlugin 필요배포할 때 → ProvidePlugin(jQuery) 필요이 문제를 해결하기 위해 webpack-merge를 사용해 환경별 설정을 분리했다. 1. 기존 문제 plugins: [ new HtmlWebPackPlugin(...) // 개발용 ] plugins: [ new webpack.ProvidePlugin(...) // 배포용 ] 매번 파일 수정 → 실수 잦고 귀찮음 2. 해결 전략공통 설정 → webpack.common.js개발 설정 → webpack.dev.js배포 설정 → webpack.prod.js병합 도구 → webpack-..

AI 시장이 점점 커지고 사회에 큰 역활로 자리잡고 있는 지금 "MCP"라는 키워드가 화제가 되고 있다.일단 간단하게 말하면, MCP란? AI 에이전트와 다양한 외부 시스템, 데이터 소스를 안전하고 일관되게 연결해주는 개방형 프로토콜 MCP는 Model Context Protocol의 약자로 앤트로픽(Antropic)이란 회사에서 만들었습니다. 클로드(Claude)란 모델과 서비스를 만들어 제공하는 회사인데요. 앤프로픽에서 내놓은 소개에 대해 살펴보면 자세한 내용을 알 수 있습니다.https://modelcontextprotocol.io/introduction Introduction - Model Context ProtocolGet started with the Model Context Protocol ..

초기 프로젝트를 생성할때 기본적으로 세팅하는 것에 대해 소개해보려고 합니다. 1. 프로젝트 초기화npm init을 하면 package.json이 기본적으로 자동 생성됩니다.npm init // 프로젝트명, 설명 등 작성할 내용이 있을 경우npm init -y // 입력할 내용없이 package.json 생성 package.json : 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일{ "name": "Project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exi..

동적으로 엘리먼트 내부로 script 코드를 추가하려고 한다.그때 바로 append 등으로 html를 삽입하는 것이 아닌script 태그를 생성해서 속성을 지정해준 다음 삽입해줘야 script가 로드된다는 것을 알게되었다. const script = document.createElement("script");script.src = "..."; // 설정할 script의 src 정보script.async = true;document.head.appendChild(script);script.onload = () => { // script load 된 이후에 실행될 코드};

🔶 전략 패턴?객체 지향 디자인 패턴 중 하나로 동일한 문제를 해결하기 위한 여러 알고리즘을 정의, 각가의 캡슐화하여 상호 교환 가능하도록 만드는 패턴런타임 시에 알고리즘을 선택하고 적용할 수 있게 됨장점유연성 : 새로운 전략을 추가하거나 기존 전략을 수정하기 쉬움재사용성 : 전략을 재사용 할 수 있어서 개발비용과 시간을 절약할 수 있음테스트 용이성 : 각 전략을 독립적으로 테스트할 수 있기 때문에 테스트가 용이단점클래스 개수 : 각 전략이 별도의 클래스로 캡슐화 되기 때문에 클래수 수 증가 → 코드 복잡성을 높이고 유지보수 어려워짐오버헤드 : 런타임에 전략을 교체하기 때문에 오버헤드 발생 가능성 있음정렬 알고리즘BubbleSort, QuickSort, insertionSort 등Sorter 클래스가 ..

🔶 장식자 패턴(Decorator pattern)객체에 동적으로 새로운 행위를 추가할 수 있도록 해주는 구조 패턴동작이나 기능을 동적으로 추가하는데 초첨을 둔 것장점서브 클래스에 의전할 필요 없음객체는 새로운 행동에 유연하게 사용될 수 있으며 본 객체를 계속 사용할 수 있다.단점관리가 되지 않으면 아키텍처가 복잡해 질 수 있다.🔹 예시 코드class Book { constructor(title, author, price) { this._title = title; this._author = author; this.price = price; } getDetails() { return `${this._title} by ${this._author}`; }}// decorator ..

🔶 샌드박스 패턴(sandbox pattern)샌드박스 패턴은 어떤 모듈이 다른 모듈과 그 모듈의 샌드박스에 영향을 미치지 않고 동작할 수 있는 환경을 제공하는 것샌드박스에서는 단일 전역 변수가 생성자 ( 격리된 샌드박스에 있는 코드를 전달하는 이 생성자를 이용하여 객체를 생성함)장점단 하나의 전역변수에 의존하는 네임스페이스 패턴의 단점을 여러 개의 샌드박스 객체를 생성함으로 극복외부 요인으로부터 코드를 격리할 수 있다.점으로 연결된 긴 이름을 쓸 필요가 없다런타임(Runtime)에 탐색 작업을 거치지 않게 해준다.🔹 예시 코드function Sandbox() { // argument를 배열로 바꾼다 var args = Array.prototype.slice.call(arguments), ..

🔶 네임스페이스 패턴(NameSpace pattern)변수 이름이 겹치는 상황을 보완하기 위해 사용됨이름들을 한곳에 모아 충돌 방지네임스페이스 패턴은 애플리케이션 또는 라이브러리를 위한 하나의 전역객체를 생성 후 그 안에 필요한 모든 기능을 프로퍼티로 정의하는 것장점변수명 중복 방지신뢰도 증가🔹 예시 코드//전역 객체 하나 생성var globVariable = {}; //객체의 프로퍼티로 추가globVariable.num = 1; //함수도 추가globVariable.increaseNum = function(){ console.log('increase!');} globVariable.decreaseNum = function(){ console.log('decrease!')}ES6 이후, let,con..

🔶 팩토리 패턴(factory pattern)객체 생성 부분을 떼어내 추상화하는 패턴두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴장점 유연성 증가 : 객체 생성하는 부분(CarFactory)과 객체를 사용하는 부분(Car)을 분리하여 객체 생성과 사용에 대한 유연성을 높유지 보수성 증가 : 캡슐화하여 객체 생성 과정을 추상화 → 한 곳만 고쳐도 되기 때문에 유지보수 및 코드 변경이 용이코드 의존성 낮춤단점코드 복잡도 증가 : 팩토리 클래스 추가 작성해야하기 때문유지보수 어려움 : 팩토리 클래스의 존재로 인해 객체 생성 로직이 복잡해짐객체의 생성 과정이 추가로 이루어지므로 약간의 성능 손실이 발생🔹 예시 코드// Product in..