간단한 블로그

프론트엔드 프로젝트와 백엔드 프로젝트를 분리하여 개발하는 방법도 있지만, 개발 편의성 혹은 구조상의 문제로 합쳐야 하는 경우가 있다.이 글에서는 Spring boot 프로젝트와 Vue 프로젝트의 소스가 합쳐진 프로젝트를 생성한다.추가로 크롤링을 위해 Prerendering 플러그인도 적용한다. 1. 스프링 부트 프로젝트를 생성한다. Spring Boot 프로젝트를 생성한다 2. 뷰 CLI를 이용하여 뷰 프로젝트를 생성한다. 이 예제는 webpack-simple 템플릿으로 생성했다 3. 뷰 프로젝트 폴더에 만들어진 파일을 스프링 프로젝트로 이동한다. From (Vue project)To (Spring project)비고src./src/main/vue Index.html./src/main/resources/..

테스트나 에러 확인, 진행 상황 체크 등을 위해 자주 사용하는 console 객체의 함수에 대해 정리해본다. 1. 로그 기본안드로이드의 로그캣과 마찬가지로 info, log, warn, error가 있다. 이 중 warn은 노란색, error는 붉은색으로 표시된다.console 함수의 파라미터로 객체를 전달하면 JSON 형태로, 배열을 전달하면 배열 전체가 출력된다. 또, 여러개의 인자를 전달하면 ' '(공백-띄어쓰기)로 구분하여 출력한다. // 기본적인 사용 console.info('This is a info message'); console.log('This', 'is a log message'); // console.log == console.debug (둘은 같은 함수다) console.warn(..

에라토스테네스의 Sieve of Eratosthenes 일정한 범위 내의 숫자 중 소수를 찾는 알고리즘. 재귀를 이용해 짧고 간결하게 구현할 수 있다.참고로 ECMA6에는 꼬리재귀 최적화(Tail call optimiztion)가 스펙으로 잡혀있다. const sieve = (numbers, primeNumbers) => { primeNumbers = primeNumbers ? primeNumbers : []; // primeNumbers가 없다면 빈 배열을 생성 if (!numbers.length) return primeNumbers; // 검사를 위한 숫자가 없다면 결과 리턴 const value = numbers[0]; return sieve(numbers.filter(i => i % value),..

전개 연산자(Spread Operator)는 배열, 제네레이터 함수 등의 이터레이터를 펼쳐내는 연산자다. Rest Parameter와 마찬가지로 변수 앞에 ...를 붙이면 된다. const arr1 = ["hello", "world", "!!!"]; console.log(...arr1); // hello world !!!console.log 함수는 1개 이상의 파라미터를 받는 함수다. 더 다양한 함수에 사용해 보자.const input = ['hello', 'jack']; const func1 = (str) => console.log('func1', str); func1(input); // func1 ['hello', 'jack'] // func1(...input); // Error const func2..

재직중 사내 위키에 작성했던 내용인데 최근 Generator를 다시 사용하게 되어 블로그에도 등록한다. Generator FunctionES6에 추가된 Generator 함수는 손쉽게 이터레이터를 만들 수 있게 해준다. JAVA의 Stream.iterate(...)와 유사하다. Generator 함수의 객체는 next()를 호출할 때마다함수의 완료 상태 여부를 뜻하는 프로퍼티 done과 yield로 반환된 value 프로퍼티를 가진 객체를 리턴한다. Generator 함수는 ES5에서 자신의 상태를 가지고 그 상태에 따라 다른 동작을 하는 함수로 변환된다. 현재 Arrow Function을 이용해 Generator 함수를 만들 수는 없다. 이 기능은 ES7 기능으로 논의되고 있다고 한다.

CSS사이트의 기능에 따라 스타일만을 변경해야 할 필요가 있다. 이 때 link 태그를 사용하는데 이 태그도 DOM 엘리먼트와 마찬가지로 아이디나 클래스를 적용할 수 있다. 이렇게 적용한 아이디나 클래스는 DOM 엘리먼트처럼 동적으로 조작이 가능하다. 스타일시트를 조작하면 브라우저는 이미 그려졌던 스타일을 다시 그려내기 시작한다. 이 기능은 익스플로러7 버전 이후의 모든 브라우저가 지원한다. // 모든 테마를 비활성화 한 후 red 테마만 활성화 $("link.theme").prop('disabled', true); $("link#red").prop('disabled', false); JQuery로 비활성화 Script재미있는 점은 script 태그 역시 클래스나 아이디를 설정하여 선택할 수 있다는 점이..

자바스크립트 코드를 작성하다 보면 배열을 이용하는 경우가 많은데, 늘 splice와 slice 메소드가 헷갈린다. 이번 기회에 정리해두려 한다. 1. Array.prototype.splice기존 배열을 변형하는 메소드다. Array.prototype. splice (start, deleteCount, items...) 배열의 start번째부터 deleteCount개 만큼의 요소를 '제거'한 다음, 그 자리에 items를 '삽입'한다. '제거'된 요소의 배열을 리턴한다.const array = [1, 2, 3, 4, 5, 6]; array.splice(0, 1); // [ 1 ] console.log(array); // [ 2, 3, 4, 5, 6 ] array.splice(3,1); // [ 5 ] co..

스칼라로 풀어보았던 문제 중 27번 문제의 알고리즘과 동일하게 작성해 보았다. flatMap 대신 배열의 concat 메소드를 이용해야 하는 점이 특이했다. 하지만 head나 tail을 직접 처리해야 한다는 점은 굉장히 까다로웠다. /** * 입력받은 배열의 조합을 만드는 함수 * @param n xCn 의 n 값 * @param values 조합으로 만들 값들 */ function combination(n, values) { return (function comb(n, values) { if(!values || values.length === 0) return []; else if(n === 1 || values.length === 1) return values.map(x => [].concat(x))..

프록시 패턴은 실제 데이터에 접근할 수 있는 일종의 인터페이스(상속구조의 인터페이스가 아니다)를 만드는 디자인 패턴이다. 자바의 ORM인 JPA에서의 예를 들자면, FetchType.LAZY로 설정되어 있을 때, 어떤 엔티티 객체와 이어진 엔티티 프로퍼티는 '진짜' 객체가 아닌 임시 객체로 실제로 사용될 때 데이터베이스에서 값을 조회해 '진짜' 객체가 만들어진다. ES6의 프록시는 JPA의 프록시와는 약간 다른 특성을 가진다. ES6의 프록시는 실제 객체와 핸들러 객체를 이용해 프로퍼티가 추가, 삭제, 변경 혹은 실행 될 때 특정 함수를 실행하는 객체를 만드는 클래스다. class Person { constructor(name) { this.name = name; } } const jack = new P..

많은 언어에서 쓰이는 콜렉션 중에는 Map이라는 콜렉션이 있다. Map은 Key-Value 콜렉션으로 특정 키에 대한 값을 가지는 형태다. NoSql이나 In-memory DB에서도 사용되는 아주 유용한 형태다. 아래 코드들은 모두 TypeScript에서 작성했다. 1. Dictionary ObjectES6 전까지의 자바스크립트에는 Map의 구현체가 없었다. 대신 객체 프로퍼티를 자유롭게 추가/삭제할 수 있다는 장점을 이용해 특정 프로퍼티에 값을 할당한 형태인 '딕셔너리(Dictionary)' 객체를 만들어 사용해 왔다.const dictObj = {}; dictObj['first'] = 1; dictObj['second'] = 'second'; dictObj[10] = '100'; // key인 10은..