간단한 블로그

웹 개발로 급여를 받는다면 꼭 알아야 한다고 생각하는 아주 기본적인 서비스와 간단한 설명을 작성했다. 회사 문서에 러프하게 적었던 내용이라 쓸모가 있을지는 모르겠다. Nginx 사용자 접속시 어플리케이션에 리버스 프록시로 연결하기 위해 사용 보안을 위해서 사용한다고 주로 알려져 있지만 인프라 측면에서의 관리 요소를 분리하기 위한 아키텍처 측면에서의 역할이 강함 추가 모듈들을 이용하여 다양한 기능을 추가할 수 있음 AWS Cloudfront (CF) AWS에서 제공하는 CDN 서비스로 다양한 기능을 제공하여 간편하게 사용할 수 있음 CDN: static한 에셋들을 캐싱하는 서버로 nginx 모듈을 이용해 직접 구현할 수도 있음 (그냥 돈 쓰는게 나음) 비용은 AWS S3보다는 저렴하지만 꽤 비싼 편이기에 ..

주판. 어릴 때 보이던 주판이 떠오른다. 많은 사람들은 전자제품이 흔해지며 금새 자취를 감췄다고 기억하고 있다. 하지만 나는 주판 학원의 광고지를 잊을 수 없다. 전자계산기는 부정확할 수 있다. 주판을 사용하면 머리가 좋아진다. 주산 자격증을 취득해 취업할 수 있다... 하지만 그들의 노력에도 시대의 변화에 주판은 사라졌다. 주판 기술자들은 어디로 간 걸까? 개발자로서 IT업계에 몸담고 사회 생활을 하다 보면 앞선 선배 개발자들이 개척해 온 문화, 그리고 시대가 변함에 따라 개선된 처우. 이 두 가지가 엮여 다른 직업보다 편한 생활을 하고 있다는 것을 느낀다. 하지만 이러한 '편한' 생활에 취해서인지 특이한 모습도 보인다. '개발자는 대단한 직업이다 - 우리는 특별하다 - 우리를 룰에 엮지 마라' 마치 ..

프론트엔드 프로젝트와 백엔드 프로젝트를 분리하여 개발하는 방법도 있지만, 개발 편의성 혹은 구조상의 문제로 합쳐야 하는 경우가 있다.이 글에서는 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/..

스칼라는 공변성(variance)와 반공변성(contravariance), 무공변성(invariance)을 지원한다.이 세 가지 성질에 대해 위키백과 설명을 보면 이해하기 어렵지만, 정리해서 보면 쉽게 이해할 수 있다. 타입 T를 받았을 때, [ +T ] 공변성 : 타입 T를 확장한 타입에 대해서 허용 [ T ] 무공변성 : 타입 T만 허용 [ -T ] 반공변성: 타입 T의 상위(부모) 타입에 대해서 허용 이 포스트에는 스칼라를 이용한 공변성 예제를 살펴보고, ECMAScript를 이용해 간단하게 만들어본 공변성-타입 제한 배열을 적어놓는다. 스칼라를 이용한 공변성 예제스칼라는 언어 레벨에서 세 개의 성질을 지원한다. /** * 예시 클래스. * People

테스트나 에러 확인, 진행 상황 체크 등을 위해 자주 사용하는 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 기능으로 논의되고 있다고 한다.

1. Nginx 설정 파일Nginx의 Localtion 설정 파일은 기본적으로 /etc/nginx/conf.d/default.conf 로 되어 있다. Location 설정 파일 위치 및 mime 타입, 로그 등의 설정은 /etc/nginx/nginx.conf 파일에서 설정할 수 있다. 설정 파일을 변경한 경우 적용을 위해 service nginx reload 명령어를 사용할 필요가 있다. 2. Location 설정http -> server 하위에 location을 설정한다. 1) 같은 서버의 다른 포트로 API 서버를 둔 경우 프록시 설정 location /api/test1 { proxy_pass http://localhost:3000; # /api/test1의 하위 호출은 localhost:3000로 ..

최근 의외로 자주(다시?) 사용하게 되는 것 중 하나로 Data URI를 꼽을 수 있다.Data URI는 data: 접두사가 붙은 데이터 문자열로, 이미지나 영상, 심지어 사운드 파일도 될 수 있다. 1. Data URIMozilla.org의 Data URIs 문서를 살펴보면 Data URI는 아래와 같은 형식을 가진다. data:[][;base64],여기서 은 jpg, png, wav, mp3등 데이터의 형식(MIME 타입이므로 실제로는 image/jpg 같은 형태로 적힌다), base64는 대상 파일을 base64 형식으로 변환한 실제 데이터를 뜻한다. 여기서 base64는 바이트를 아스키 코드 문자열로 변환하는 방식인데,원래 플랫폼 독립적인 형식으로 데이터를 전송하기 위해 만들어졌지만 이 포스트에서..