간단한 블로그

컴포넌트에 대해 FE 개발을 할 때 제일 중요한 것은 컴포넌트다. 사실 거의 모든게 컴포넌트다. 막말로 컴포넌트를 대충 끄적이면 프로젝트 개발이 끝난다. 하지만 시간이 지날수록 생산성은 저하되고 심리적 부담감은 커진다. 유지보수와 개발을 진행하며 기능이 추가되고 변경되어 코드가 어려워지는 것은 어쩔 수 없지만, 최대한 그 시점을 늦추기 위해서 나는 아래 내용들을 고려한다. 컨텐츠를 기준으로 구조를 만들자 프론트엔드는 결국 기획과 디자인, 그리고 백엔드에 종속되어 있다. 특히 FE 개발자로서 가장 자주 충돌하는 대상은 기획자다. 그리고 기획자는 개발자가 아니다. 이 버튼을 저리로 옮기는 '단순한' 작업에 왜 그렇게 시간이 오래 걸리는지, 어렵다고 하는지 이해할 수 없다. 컴포넌트의 데이터가 어쩌고 저쩌고 ..

이직하기 전에 말해줬어야 하는 내 개인적인 의견에 대해 정리해봤다. 쓰다보면 별거 없을 거 같아서 다 쓰고 공유해줄지 고민해봐야 할 것 같다. 내가 대단한 사람도 아니고 흔한 개발자 중 하나에 불과하니 이 사람은 이렇게 생각하는구나 정도로 봐 줬으면 한다. FE 프로젝트에 대해 우리는 서비스를 유지보수한다. 개발은 쉽지만 유지보수는 어렵다. 왜 그럴까? 대부분의 경우 유지보수에 대한 생각 없이 개발하기 때문이다. 최근 몇 년 사이 급격하게 생태가 변했고(심지어 채용관련해서도), 상대적으로 룰이 정립되지 않은 프론트엔드에서 그 문제는 더욱 크게 다가온다. 만든지 몇 년, 아니 몇 달만 지나도 단순한 변경에 큰 리소스가 소모되기 시작한다. 나 역시 그리 많은 경험이 있다고 자신할 수는 없지만, 여러 프로젝트..

웹 개발로 급여를 받는다면 꼭 알아야 한다고 생각하는 아주 기본적인 서비스와 간단한 설명을 작성했다. 회사 문서에 러프하게 적었던 내용이라 쓸모가 있을지는 모르겠다. 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 기능으로 논의되고 있다고 한다.