전체 글
npm 설치시 ENOSELF 오류 해결 방법
프로젝트 진행을 위해 필요한 라이브러리 설치를 위해 npm 명령어를 사용했는데 다음과 같은 오류가 발생하였다. [명령어] jeongcheol-ui-MacBook-Pro:gridstack jeongcheol$ npm install gridstack --save [에러내용] npm ERR! code ENOSELF npm ERR! Refusing to install package with name "gridstack" under a package npm ERR! also called "gridstack". Did you name your project the same npm ERR! as the dependency you're installing? npm ERR! npm ERR! For more informa..
npm 특정버전 설치하기
NPM을 사용하여 특정 모듈을 설치할 때 다음과 같이한다. npm install webpack 하지만 이럴경우 가장 최신버전이 설치 되기 때문에, 해당 모듈에 dependency를 가지고 있는 다른 모듈에서 에러가 발생될 수 있다. 이를 해결하기 위해서는 그 프로젝트에서 사용하는 특정 버전을 설치해야한다. 특정버전의 모듈을 설치하기 위한 명령어는 다음과 같다. [명령어] 1npm install -g npm@4.6.1cs
NPM 사용시 의존 모듈 관리 package.json
NPM 사용시 모듈들에 대한 버전관리가 필요하게 되는데 이때 사용하게 되는 것이 package.json이다. 12345678910111213141516171819// package.json 파일 형태 { "name": "application-name" , "version": "0.0.1" , "private": true , "dependencies": { "express": "2.3.11" , "jade": ">= 0.0.1" }}cs 생성 방법cmd 창에서 "npm init"이라고 명령어 입력시 해당 폴더에 필요로 하는 package.json파일을 생성해준다. 모듈 기입필요로 하는 모듈을 모두 설치 시 마다 일일히 기입하게 될 경우 굉장히 귀찮은 작업이 될 것이다. 이것을 조금더 쉽게 관리하게 위해서 ..
Context Menu를 내 마음대로 변경하는 Jquery-ContextMenu.js 사용방법 소개
프로젝트 진행 중 contextmenu를 커스텀해서 사용하고 싶어서 검색하던 중 jquery-contextmenu를 찾았다. 생각보다 사용법도 간단하고 icon도 다양해서 소개하고자 한다. [필요사항] - jquery 1.8 이상의 버전이 필요 - jquery-contextmenu 필요 - jquery-ui의 경우 필수는 아니다. [설치방법] - npm i jquery를 사용하여 jquery를 설치한다. - npm i jquery-contextmenu 명령어를 사용하여 jquery-contextmenu를 설치한다. [적용] - 적용하고자 하는 페이지에 다운받은 js, css 파일을 임포트 한다.123456 Colored by Color Scriptercs [jquery-contextmenu 옵션 설명] ..
dom element를 자유롭게 움직이고 수정할 수있게 하는 gridstack.js 소개
기존에 jquery-ui에서 sortable 메서드를 사용하여 element들을 자유롭게 움직일 수 있다. 하지만 미세한 이동이 어렵고, 크기 조절까지 한번에 하기에는 부적절하다. 그래서 검색결과 gridstack.js를 사용하면 편리하게 크기 조절 및 위치 이동까지 자유롭게 할 수있다는 것을 알았다. [필요 라이브러리] gridstack.js를 사용하기 위해서는 하단의 정보와 같이 몇몇 라이브러리가 필요하다. [예제 코드] 1. package.json -> 필요라이브러리가 추가된 package.json 12345678910111213141516171819{ "name": "gridstack_test", "version": "1.0.0", "description": "gridstack_test", "ma..
webpack 소개 및 환경 구축
Webpack - webpack은 모듈 번들러이다.- 여러 js 파일을 하나의 번들로 만들 수 있다.- SCSS를 CSS로 돌릴 수 있다.- EM6를 사용할 수 있다.- 스타일로더와 CSS 로더등 다양한 로더를 사용할 수 있다.- 코드 압축을 해주는 UglifyJsPlugin 등 다양한 플러그인등을 사용할 수 있다. 설치방법- node.js를 설치한다. https://nodejs.org/ko/ - npm install -g webpack (npm을 이용하여 webpack을 설치한다)- npm install --save-dev style-loader css-loader (css loader)- npm install --save-dev sass-loader node-sass webpack (scss load..
Junit 정리 - 서비스 테스트 하기
전장에서 컨트롤러 테스트 방법을 공부하였다. 이번에는 서비스를 가지고 테스트 하는 방법을 설명한다. Assert 시리즈로 검증하기 - Assert 시리즈를 활용하면 해당 메소드의 결과값이 true인지 검증 뿐만 아니라 null 인지 등도 테스트를 진행할 수 있다. Assert로 설정한 대로 동작하지 않으면 테스트 도중 실패로 끝나기 때문에, 잘못된 결과 값이 나온다는 것을 확인하고 코드를 수정할 수 있다. Assert 관련 메서드 종류는 다음과 같다. Assert 메서드 종류설명assertArrayEquals(a, b)배열 a와 b가 일치함을 확인한다.assertEquals(a, b)객체 a와 b가 일치함을 확인한다. (객체에 정의되어 있는 equals를 통해 비교한다.)assertSame(a, b)객체..
Junit 정리 - MockMvc를 이용한 컨트롤러 테스트
입사 후 개발을 한지 벌써 3년 차가 되었다. 개발을 처음 접할 때는 어떻게 구현해야 할지 어떻게 만들어야 하는지에 대한 관심이 더 컸다. 하지만 요새는 개발 후 어떻게 테스트를 진행하여 먼저 버그를 예방(?)할 수 있는지 고민하기 시작했다.성격이 덜렁거리거나 대충 하는 스타일은 아니었는데, 요즘 열정이 많이 식어서 그런지 단순한 부분에서 버그를 유발하는 것 같아서 TDD를 통해 고쳐보려고 Junit을 공부하기로 했다.스프링의 각 영역인 Controller. Service, Dao에 대한 테스트를 총 3장에 걸쳐서 설명하겠다.그리고 Mockito에 대한 설명을 추가로 진행하겠다. 0. 공통 우선 스프링에서 테스트를 진행하기 위해서는 몇가지 라이브러리가 필요하다. 1 2 3 4 5 6 7 8 9 10 11..
스프링 마이크로서비스 (MSA) 소개
많은 회사에서 마이크로서비스를 주목하고 있고 도입하고있다. 그 이유가 무엇인지 궁금했고, 알아보기 위해서 마이크로 서비스관련 책을 하나 구입하였다. 생각보다 책이 두껍지만 외국 저서 같지 않게 설명이 자세하게 되어있다. (사례도 많다.) 그럼 이제 마이크로 서비스가 무엇인지 알아보자. 아래 사진을 보자. 우리회사도 그렇고 기존에 웹 애플리케이션은 왼쪽의 사진처럼 하나의 구조로 이루어져있어 war 형태로 배포된다. 모든 서비스가 하나의 애플리케이션으로 구성되어있을 경우에는 새로운 기능을 추가하거나, 성능을 위해 시스템을 나누기 위하는 작업 등등이 너무 어렵다. 그래서 요새 대형 서비스에서는 서비스를 새로 추가하기도 쉽고, 더 많이 사용하는 서비스에 물리적인 자원을 더 할당할 수 있도록 마이크로서비스를 지원..
애플리케이션 확장 방법 스케일 큐브 (Scale Cube)
A애플리케이션을 확장하는 데 필요한 세 가지의 주요 접근방식이 있다. 크게 x, y, z 축으로 구분하여 설명한다. 먼저 x축 방향의 확장은 애플리케이션을 복제해서 수평적으로 확장하는 것을 의미y축 방향의 확장은 서로 다른 기능을 분리하는 것을 의미z축 방향의 확장은 데이터 파티셔닝(Partitioning) 또는 샤딩(Sharding)을 의미 y축 방향의 확장이 일체형 애플리케이션에서 마이크로서비스를 적용하여 분리하는 것을 의미한다.예를 들면, 항공사 예약에서 검색 500건당 예약 1건이 발생한다고 한다. 그럴경우 하나의 일체형 애플리케이션으로 만들경우 성능을 좋게 하기 보다는 두 개의 서비스를 분리하여 검색 서비스에 물리적은 리소스를 더 부여하고 예약에 상대적으로 낮게 부여 함으로써 효과적으로 애플리케..