간단한 블로그

FE 개발자가 자주 사용하지만 직접 구현해보는 사람은 많지 않은 썸네일 서버 로직에 대해 정리한 글이다. 회사에서 팀 내에 공유한 문서였는데 쓰는 글이 없어 허전하길래 다시 정리해서 업로드한다. Thumbnail 썸네일이란? 트래픽 문제 → 용량의 문제 → 비용의 문제 사용자 경험 (UX) 증대도 있지만 클라우드 비용 감소에 있어 아주 큰 영향을 차지한다. 결국 사용자/제공자 모두에게 있어 비용 감소가 주요 목표라고 할 수 있음 최근 IOS에서도 webp가 지원되어 (webm은 아직) 많은 사이트에서 썸네일을 webp로 제공하는 추세 webp/webm: 구글에서 공개한 이미지 코덱(포맷)으로 webp는 정적, webm은 동적(gif) 이미지에 사용됨 대부분의 경우 용량을 아주 큰 폭으로 줄일 수 있지만 ..

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

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

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