티스토리

Programming Note

검색하기

블로그 홈

Programming Note

dev-momo.tistory.com/m

개발하면서 겪었던 기록의 나날들

구독자: 5

방명록 방문하기

주요 글 목록

CSS Transition Height 100% 를 주는 방법 요소의 높이를 100%로 늘리는 애니메이션을 만들려면 다음과 같은 단계를 따르면 됩니다: 1. 요소에 대한 CSS 속성을 설정합니다. 이때 요소는 상위 요소(부모 요소)의 크기를 기준으로 높이를 조정합니다. .parent { height: 400px; /* 부모 요소의 높이 */ } .child { height: 0; /* 자식 요소의 초기 높이 */ transition: height 0.5s ease-in-out; /* 높이가 바뀔 때 애니메이션 속성 */ } 2. 자식 요소의 높이를 100%로 늘리는 애니메이션을 작성합니다. 이때 자식 요소의 높이를 100%로 설정하면 부모 요소의 높이와 동일하게 됩니다. .child.active { height: 100%; /* 자식 요소의 높이를 100%로 설정 .. 공감수 1 댓글수 0 2023. 2. 16.
React Fast Refresh 최근에 React 프로젝트르 세팅하다가 React-Hot-Loader 문서를 보니, React Fast Refresh라는 새로운 도구가 나온 것을 발견했다. React-Hot-Loader를 만든 페이스북 개발자 Dan Abramov는, 기존 핫 로더에 한계가 있다고 평가하면서, 앞으로는 React Fast Refresh로 대체될 것이라 생각한다고 의견을 밝혔다. 기존의 핫 로더는, 대규모 앱에서 코드변경, export/import 문제, Typescript관련 문제 등 앱이 매우 느리게 동작하는 것이 문제였다. 그 대안으로 나온게 Fast Refresh이며, 2019년 React Native 0.61에 처음 도입 되었다. 그렇다면 React Fast Refresh가 하는 일은 무엇인가? 앱 전체를 다시 .. 공감수 2 댓글수 0 2021. 1. 10.
Spread Syntax와 Rest Parameter 전개 구문(Spread Syntax)와 Rest Parameter를 딱히 구분해서 공부하진 않았는데, 확실하게 기억해 두지 않으니 사용할때마다 헷갈린다. 이번 기회에 확실하게 정리해 두도록 하자. Spread Syntax 전개 구문은 반복 가능한 배열, 문자열 또는 이터러블에 대해서 사용이 가능하다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6 위 예제와 같이 함수의 파라미터로 넘길 때 "..."를 사용하여 넘기면 내부적으로 풀어서 인자를 전달 해준다. const numbers = [1, 2, 3]; const num = [...numbers, 'four', '.. 공감수 6 댓글수 0 2019. 11. 3.
패턴 매칭(Pattern Matching) in JavaScript TC-39 Github에 패턴 매칭(Parttern-Matching)이 Stage 0에서 1로 한단계 등급이 상향됬었다. Stage1은 proposal 단계로 앞으로 TC-39 위원회에서 논의할 예정이며, 구체적인 데모에 대한 코드도 포함되어야 한다. 아직 Stage2(draft)와 Stage3(candidate), 그리고 stage4(finished)를 거쳐 정식으로 스펙에 추가되려면 갈 길이 멀지만 어떤 기능을 가지고 있고 또 어떻게 사용할 수 있는지 간단하게나마 미리 알아보도록 하자. 패턴 매칭은 Scala, F#, Rust 등 다른 언어에도 있는 기능인데, 앞서 언급한 언어에 대해서는 잘 모르지만, 비교적 단순하므로 다른 언어를 통해 알아보도록 하자. Scala object MatchTest1 e.. 공감수 5 댓글수 0 2019. 9. 30.
현재 해당하는 월(Month)의 일(day)수 가져오기 날짜 기능을 개발하다보면 현재 해당하는 월(Month)에 몇일까지 있는지를 알아야할 필요가 있다. 다음 코드를 사용하면 해당하는 연도의 월에 몇일까지 있는지 계산할수 있다. function getDayOfMonth(year, month) { return 32 - new Date(year, month-1, 32).getDate(); } 공감수 2 댓글수 0 2019. 8. 23.
HTML Video Tag의 자동재생(auto play) 조건 Chrome autoplay가mute속성과 함께라면 항상 자동재생가능 Sound가 있을 때는 다음의 경우에만 허용된다 유저의 Interaction(click, tap)이 있을 경우 MEI(Media Engagement Index)지수가 특정 기준보다 높을경우 MEI: 간단히 말하면, 유저의 브라우저의 기록되는 점수로서 특정 사이트에서 유저가 얼마나 많이 영상을 소리와 함께 봤는지에 대한 지표 지표에 적용되려면 소리를 틀고 7초이상 재생 Audio버튼 나타나야 함 200x140보다 비디오 사이즈가 커야함 브라우저에서 MEI 보는 방법Chrome://media-engagement접속 유저가 모바일에서 홈화면에 바로가기를 추가했거나, 데스크탑에서 PWA로 설치한 경우 Browser history가 없는 경우 .. 공감수 2 댓글수 0 2019. 8. 16.
어댑터 패턴 Adapter Pattern 두세 번 정리하고, 더 이상 쓰지 않을 것 같았던 JavaScript로 디자인 패턴 정리하기 그 네 번째. 이번 주인공은 Adapter Pattern(어댑터 패턴) 이다. 어댑터 패턴이란 무엇인가? 코드를 보기 전에 간단한 예시를 보도록 하자. 한국에서는 220V를 쓰는데, 일본은 110V를 사용한다. 그렇다면 220V모양으로 만들어진 전자제품을 일본에서 쓰려면 어떻게 해야 할까? 110V로 변환해주는 무언가를 사용해주면 된다(돼지코라 불리는 변압기/어댑터를 사용한다). 간단하다. 중간에서 한번 변환해주면 되는 것이다. 이 간단한 생각을 코드에 녹여보도록 하자. 여기에 글자를 출력하는 프린터 클래스가 있다고 하자. 프린터는 pushText(text); 메서드를 통해 출력할 글자들을 저장하고, print(.. 공감수 8 댓글수 0 2019. 5. 26.
빌더 패턴 Builder Pattern 추상 팩토리 패턴과 팩토리 메서드 패턴에 이은 세 번째. 빌더 패턴(Builder Pattern)이다. 개인적으로 빌더 패턴은 앞의 두 패턴보다 자주 사용하고 있는데, 오늘은 design-patterns-JS의 예제를 가지고 설명을 해보도록 하겠다. 빌더 패턴은 무언가를 뭔가를 조합해주는 패턴이라 이해하면 쉽다. 웹에서 많이 사용하는 Request Query를 예를 들어보도록 하자. Request(리퀘스트)는 크게 URL, METHOD(GET, POST, PUT, DELETE), 그리고 데이터 부분으로 이루어져 있다. 이제 우리는 어떤 리퀘스트 정보를 담고 있는 클래스를 만들어 보도록 하자. class Request { constructor(url, method, data) { this.url = url.. 공감수 13 댓글수 0 2019. 4. 28.
팩토리 메서드 패턴 Factory Method Pattern 지난 포스트에서 다뤘던 추상 팩토리 패턴(Abstract Factory Pattern)에 이어, 이번엔 팩토리 메서드 패턴(Factory Method Pattern)에 대해 정리해 보도록 하자. 이전 포스트의 "마지막에 라떼의 종류가 여러 가지가 된다면 어떻게 하면 좋을까?"라는 질문을 던졌었는데, 이 문제를 해결하기 위해 팩토리 메서드 패턴을 이용하면 좋다. 거두절미하고 예제 코드를 보도록 하자. class CafeLatte { constructor() { this.price = 3000; } getPrice() { return this.price; } } let latte = new CafeLatte(); latte.getPrice(); // 3000 latte.gerPrice(); 함수는 특정 인스.. 공감수 8 댓글수 0 2019. 4. 18.
추상 팩토리 패턴 Abstract Factory Pattern 디자인 패턴(Design Pattern)은 학부생 때 열심히 공부했었는데, 지금은 딱히 패턴을 생각하며 코드를 짜고 있는 것 같진 않다. 필요한 부분에 적절하게 기능별로 모으고, 추상화를 하다 보면 자연스럽게 패턴이 되기 때문이다. 하지만 다른 사람에게 설명하거나 표준화(?)된 코드를 더 잘 짜기 위해선 다시 한번 복습해보면 좋을 것 같다는 생각도 든다. 따라서 최근 GoF의 디자인 패턴을 JavaScript로 이식한 깃허브 저장소를 보고 있다. ES5와 ES6로 잘 구현을 해놨지만 다소 설명이 충분해 보이지 않았다. 이번 기회에 한 땀 한 땀 따라가 보면서 정리해 보도록 하자. 디자인 패턴 책이나 구현 방법에 대한 글을 찾아보면, 클래스 다이어그램이나 코드 위주로 설명이 되어있다. 물론 다이어그램과 코.. 공감수 16 댓글수 4 2019. 4. 11.
Hello Nestjs Google에서 만든 V8엔진이 JavaScript의 성능을 비약적으로 개선되면서, JS를 이용해 서버도 돌릴 수 있지 않을까 하는 의문이 시작됐고 Nodejs가 탄생하게 되었다. 최근에는 Nodejs를 이용해서 프로덕트를 구축하는 기업도 많이 늘어나는 추세이며, 앞으로 더욱 발전할 것이라 기대된다. 보통 노드를 이용해서 서버를 구축한다고하면, 기본(default)으로 제공되는 모듈을 이용해서 만드는 사람은 거의 없다고 봐도 무방하다. 노드 진영에서 대표적으로 많이 사용하는 프레임워크로는 Expressjs가 있다. 미들웨어(Middleware) 패턴을 이용해서 빠르게 서버를 구축할 수 있으며, 미니멀(Minimal)하고 러닝 커브(Learning Curve) 또한 적어서 쉽게 적용할 수 있다. 현재 V4.. 공감수 13 댓글수 1 2019. 4. 4.
Beginning Javascript Iterator and Generator 이전에 Javascaript의 Iterator에 대해서 몇가지 다뤄보았었는데, 도입된지 얼마 안된 스펙이다보니 자유 자재로 다루기가 아직 버겁다는 생각이 많이 들었다. 또한 최근 이터레이터와 제네레이터를 이용해 멋지게 구현한 코드들을 접하고 나서, 연습을 많이 해야겠다는 생각이들어 여기에 정리해 보고자 한다. 아래 함께보면 좋은 글들을 같이 링크하므로 관심있는 사람은 먼저 읽어보는 것도 좋겠다.Javascript IteratorES6의 심볼, 이터레이터, 제네레이터ES6의 제너레이터를 사용한 비동기 프로그래밍Async-await는 어떻게 구현하는가?Iterator를 사용하면 좋은 점? 아무리 좋은 기능이라도 적절하게 사용하지 않으면 독이 될 수 있다. 이번 기회에 Iterator를 사용했을 때 얻을 수 .. 공감수 3 댓글수 2 2019. 1. 12.
Why React Hooks 최근 React v16버전으로 업데이트되면서 여러가지 개발 효율성을 높여주는 API들이 추가되고 있다. 최근 회사에서 시작한 스터디에서 이번에 React Conf 2018에서 소개된 Hooks에 대해 공부하기로하여 여기에 정리해 본다. Why Hooks ? 어떤 기능에 대해 깊게 이해하고 싶다면, 그 기능이 왜 생겼는지에 대하여 알아보는 것이 가장 좋은 방법이라 생각한다. 따라서 이 글에서는 Hooks을 다루는 API보단 도입 배경에 초점을 맞추도록 하겠다. Hooks 문법을 모르는 사람은 사람은 간단히 Hooks at a Glance를 읽고 오도록 하자. 다시 돌아와서 Facebook은 React Hooks을 왜 도입되게 되었을까? 사실 공식 문서인 Intoducing Hooks Motivation에 .. 공감수 15 댓글수 0 2019. 1. 5.
Javascript Optional Chaining ES2015가 나온지 꽤 오랜 시간이 지났다. function-bind, rest spread, decorator 등 개발을 편하게 도와주는 문법들이 정의되면서 개발을 하는데 한층 더 수월해지는 것 같다. 오늘은 최근 개발하면서 사용하기 도입하기 시작한 꿀같은 기능. Optional Chaining에 대해서 정리해 보고자 한다. Optional Chaining? Optional Chaining. 말 그대로 특정 값에 대한 참조에 대해서 값이 존재하지 않을 때 선택적으로 체이닝 할 수 있는 문법이다. 이 문법은 C#의 conditional operator, Swift의 Optional Chaining, 또 CoffeeScript의 Existential operator와 매우 유사하다. 다른 언어들에서도 유.. 공감수 16 댓글수 1 2018. 11. 10.
Async-await는 어떻게 구현하는가 지난 포스트였던 Javascript Iterator에서 잠깐 언급했었던 async-await에 관해 이야기해 보도록 하자. 시작하기에 앞서 이 포스트에서는 async-await에 대한 문법을 다루지 않는다. async-wait가 어떤 배경을 가지고, 어떤 방법을 통해 구현이 되어있는지 그 근원에 대한 탐구를 할 생각이다. 따라서 iterator, promise, generator, async-wait, 그리고 Babel에 대한 사전 지식이 필요한 사람들은 아래 링크에 있는 글들을 먼저 읽어보길 바란다.Javascript IteratorES6의 제너레이터를 사용한 비동기 프로그래밍Async Function Async-await? Async-await는 ECMA-262에서 초안으로 처음 등장했으며, ECMA.. 공감수 6 댓글수 1 2018. 10. 28.
Higher-Order Function 이란 무엇인가 Higher-Order Function. 한국어로 고차함수라 부르는 이 함수는 Functional Programming을 할 때 많이 사용 한다. Higher-Order Function(이하 HOF)를 사용하면 보다 유연하고 반복을 줄일 수 있는 코드를 작성할 수 있다. 이번 기회에 간단한 개념 정리와 어떻게 써먹을 수 있을 지 정리해 보도록 하자. HOF?? 컴퓨터 과학(Computer Science)에서 적어도 아래 중 하나 이상을 만족하면 HOF라 할 수 있다.하나 이상의 함수를 인자로 받는다.함수를 결과로 반환한다.쉽게 말하면, 함수를 다루는 함수라고 말할 수 있겠다. 말로 설명하는 것보다 간단한 예제 코드를 보도록 하자. twice() 는 함수를 인자로 받아 2번 반복해주는 HOF이다. 이 함수.. 공감수 13 댓글수 1 2018. 10. 28.
Javascript Iterator ECMA2015 문법이 추가되면서 javascript는 큰 변화를 겪어가는 중이다. 개발하는데 정말 유용한 개념들이 되었는데, 한꺼번에 많은 스펙들이 추가되면서 생각보다 조명받지 못한 개념들도 많다. 그 중에서 우리가 많이 사용하지만, 또 간과하기 쉬운 개념인 Iterator(반복자)에 대해 알아보도록 하자. for-of Iterator에 대해 이야기 하자마자 갑자기 for-of가 나온 것인지 의아할 것이다. 하지만for-of 가 그 무엇보다 Iterator와 매우 밀접한 연관을 지닌 문법인데 이제부터 차근차근 알아가 보도록 하자.for-of 가 생긴 배경에 대해 알아보기 위해서 약간 과거로 거슬러 올라가보도록 하자. ES5 시절, 자바스크립트에서 object 를 순회하는 방법은 한가지 뿐이었다. 바로 .. 공감수 6 댓글수 1 2018. 10. 12.
알아두면 쓸만한 Chrome Console 기능 나는 개발할 때 Chrome 개발자도구의 console을 굉장히 자주 사용하는데(대부분의 개발자들이 그럴 것이라 생각한다), 오늘은 크롬 개발자도구의 편리한 기능과 잘 쓰진 않지만 알아두면 좋은 기능들을 한 번 정리해 보고자 한다.Console OpenWindows / Linux: Ctrl+Shift+JMac: Cmd+Opt+J개발자 도구가 열린 상태: ESCConsole Clearclear() 입력Ctrl+LLog Options console 오른쪽 상단위 톱니바퀴를 누르면 옵션을 볼 수 있다. 주로 사용하는 기능은 다음과 같다.Hide network: 404 또는 500 오류 등은 보여주지 않는다.Log XMLHttpRequst: XML Request를 기록Preserve log: refresh나 탐.. 공감수 26 댓글수 0 2017. 12. 31.
React v16 무엇이 바뀌었나 React의 새로운 버전이 Fiber란 코드 네임으로 개발 된 지 꽤 시간이 지났다. 대략 한달 전 v16의 RC버전이 릴리즈 된 후 이제 정식버전이 출시되었다. 최근 저작권 이슈를 겪으면서 한번 위기를 맞이 했던 React. 과연 v16에서는 어떤것이 바뀌었을까. 하나씩 알아보도록 하자. 먼저 React v16(이하 v16)을 만들게 된 이유는 무엇일까? 가장 먼저 생각나는건 Virtual DOM의 성능이다. 초창기 V-DOM을 도입한 프레임워크였던 React는 최근에 V-DOM을 사용하는 프레임워크들(예를들면 vue)에 대해 벤치마크 성능이 떨어진다. 이에 문제를 느꼈던 페이스북 개발자들은 React의 Core 알고리즘을 다시 짜야 할 필요성을 느꼈을 것이다. 이렇게 핵심 코드가 다시 만들어진게 Re.. 공감수 2 댓글수 1 2017. 10. 8.
Currying in Javascript 지난 포스트(Functional Programming in Javascript)에서 함수형 패러다임에 대해 간략히 소개했었는데, 이번에는 그 중 Currying에 대해서 좀 더 자세히 알아보도록 하자. 함수형 프로그래밍이 뭔지 궁금한 사람은 이전 포스트를 참고하길 바란다.Currying ? 우선 커링에 대한 정의에 대해 알아보도록 하자.수학과 컴퓨터 과학에서 커링이란 다중 인수 (혹은 여러 인수의 튜플)을 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. 모지즈 쇤핑클에 의해 도입되었고, 이후 하스켈 커리에 의해 발전하였다. 무슨말인지 잘 모르겠다. 쉽게 풀어 쓰면 이렇다. 여러개의 인자(parameter)를 갖는 함수를 단일 인자를 갖는 함수들의 연결로 바꾸는 것을 의미한다. 한가지.. 공감수 7 댓글수 0 2017. 7. 23.
Functional Programming in Javascript 이번 포스팅에서는 자바스크립트에서 함수형 프로그래밍(Functional Programming) 하는 방법을 정리해 보고자한다. 함수형 패러다임 개념이 생소한 사람은 다음 포스팅을 읽어보도록 하자. (번역) 함수형 프로그래밍이란 무엇인가? 위 포스팅에서 말하고자 하는 핵심은 다음과 같다. 함수형 프로그래밍은 순수 함수를 작성하는 것, 그러니까 숨겨진 입력이나 출력을 최대한 제거하여 가능한한 우리 코드의 대부분이 단지 입력과 출력의 관계를 기술하게끔 하는 것을 말한다. 부작용을 완전히 피할 수는 없다. 대부분의 프로그램은 반환 값을 얻기 위해서가 아니라 어떤 동작을 하기 위해 실행하기 때문이다. 하지만 프로그램 내부에서는 엄격하게 통제하고자 한다. 우리는 가능한 모든 곳에서 부작용(과 부원인)을 제거하고, .. 공감수 4 댓글수 8 2017. 7. 22.
TDD & Mocha - Javascript Test Framework TDD, BDD. 테스트 주도 개발 방법론에 대한 관심이 많이 있었는데 실제 써볼 기회는 많지 않았다. 이번 기회에 TDD에 대한 개념을 정리해 보고 javascript에서 사용할 수 있는 Test Framework에 대해 한번 공부해 보고자 한다. 찾아보니 Jasmine, Karma, JUnit, 또 최근 페이스북에서 만든 오픈소스 Jest 등 정말 종류가 다양하다. 그중 평소에 눈여겨 보았던 Mocha에 대해 다뤄보려 한다. TDD? TDD(Test-driven development)에 대해 간단히 정리해 보자. 기존 개발 방식 Flow에 대해 생각해 보면 보통은 이런 방식으로 진행된다고 볼 수 있다. 함수 설계 → 코드 작성 → 수동 테스트 만약 새로운 기능이 추가된다거나 유지 보수를 위해서 코드를.. 공감수 2 댓글수 0 2017. 5. 14.
Javascript Image Filter - convolution 저번 포스팅에서 Javascript를 이용해서 간단한 이미지 필터를 만들어 보았다. 이번에는 컴퓨터 비전 분야에서 주로 사용하는 Mask를 이용해 좀 더 고차원 필터를 만들어 볼 것이다. 소스 코드는 저번에 만들었던 이미지 필터에서 발전시켜 나갈 예정이므로 코드가 없는 사람은 아래 github repository에서 다운받길 바란다. 아울러 앞에 내용에 대해 모르는 사람은 다음 아티클은 참고하도록 하자.Javascript Image Filter 만들기Image Filter Basic Source CodeMask ? 코드를 짜기에 앞서 Mask란 무엇인지 부터 알아보도록 하자. Mask는 이렇게 생겼다.[그림] Mask 위 그림과 같이 보통 3x3, 5x5, 7x7 정방형 행렬로 이루어져 있으며 위 그림에.. 공감수 6 댓글수 0 2017. 5. 2.
React Server Side Rendering + 추가SSR에 대해 아티클을 작성한지 어느덧 2년이 되어간다. 그동안 Webpack, Babel, React 버전이 올라감에 따라 프로젝트의 설정방법과 몇몇 API가 변경되었다. 따라서 가장 최신으로 SSR 프로젝트를 구성하는 방법으로 다시 글을 작성했다. Next.js 같은 좋은 프레임워크도 있지만 프레임워크에는 커스터마이징에 한계가 있으므로, 이 글에서는 직접 만들 경우엔 어떻게 하는지에 초점을 맞춘다. 소스코드는 Github에 올려두었으므로 참고하길 바라며, 사용한 라이브러리와 툴은 아래와 같다. Babel 7Webpack 4React 16.7.x 작년과 올해 들어 가장 각광받는 JavaScript Library를 뽑아보면 React도 그 안에 들어갈 것이다. React의 장점을 생각해보면 Vir.. 공감수 7 댓글수 5 2017. 4. 30.
nodejs error handling 오늘은 nodejs framework로 많이 사용하는 Express의 error handling에 대해서 정리해 보도록 하자. Express에서 어떻게 어플리케이션을 구조화하는지에 대한 가이드를 제공하지 않는다. 그 이유는 어플리케이션의 규모 및 참여하는 팀의 규모에 따라 구조가 달라질 수 있기 때문에, 최대한 유연성을 유지하기 위하여 구조에 대한 전제조건을 배제하려했기 때문이다. 따라서 Express를 사용해 보면 Spring이나 Nginx에 비해서 굉장히 자유롭다는 것을 느낄 수 있다. 그렇다면 error handling은 어떻게 해야 할까? 공식 문서를 보더라도 오류 처리에 대한 설명이 매우 간결하다. 정말 별 내용이 없다. 따라서 error handling을 하면서 궁금했던 몇가지 점이 있었는데,.. 공감수 4 댓글수 0 2017. 4. 23.
Javascript ES6 Proxy 여기저기서 자바스크립트의 새로운 표준인 ECMA2015(ES6) 문법이 많이 쓰이고 있다. arrow, spread부터 class까지 정말 다양한 스펙들이 추가되었다. 그 중에서 아무리 봐도 잘 이해가 안가는 객체가 있었으니 바로 Proxy이다. 구글링을 해봐도 명쾌하게 이해되는 글은 찾아볼 수가 없었다. 이번 기회에 proxy가 뭔지 파헤쳐 보도록 하자. 처음 Proxy 객체를 접하고 이 글을 적은지 2년이 되어가는데, 다시 보니 많이 부족한 글인 것 같다. 따라서 그 동안 공부했던 내용을 약간 보충해 보았다.Proxy ? 먼저 Proxy란 단어의 사전적 의미부터 알아보자. 네이버 사전에서 Proxy를 검색해 보았다.Proxy란 대리, 대리인, (측정・계산하려는 다른 것을 대표하도록 이용하는) 대용물... 공감수 6 댓글수 1 2017. 4. 16.
Javascript Image Filter 만들기 최근 어플리케이션 보면 셀카/셀피를 찍어 이미지 필터를 적용할 수 있는 앱을 쉽게 찾아볼 수 있다. Facebook, Instagram, B612 등 사진을 올릴 때 필터를 쉽게 적용해서 올릴 수 있다. 사실 이런 필터 기능들은 예전부터 포토샵을 이용하면 쉽게 적용할 수 있었다. 사실 필터란, 레스터 그래픽으로 이루어진 사진들의 픽셀(화소)값들을 특정 규칙에 따라 색을 바꿔주는 것이다. 구글에 javascript Filter를 검색해보면 몇몇 Filter Library를 찾을 수 있다. Filter Library를 이용하면 쉽게 필터를 적용할 수 있지만 내 입맛에 맞게 바꾸는 것은 쉽지가 않다. 이번 포스트를 통해 이러한 이미지 필터를 직접 만들어보자. 플랫폼은 물론 웹 기반이 되겠다. 로컬에 저장된 이.. 공감수 25 댓글수 5 2017. 4. 15.
Webpack2 시작하기 Webpack2 시작하기 오늘날 javascript를 빌드하지 않고 사용하는 경우는 드물다. 때문에 js를 빌드할때 사용하는 빌드툴이 매우 다양한데 최근에는 grunt, gulp, browserify를 거쳐 webpack을 이용해서 빌드를 많이 하는 것 같다. 이번 기회에 webpack2에 대한 소개를 해 보고자 한다. 또 새로운 프로젝트를 만들 때마다 빌드 환경을 설정해 주고 있는데, 그때마다 공식 문서를 찾아보며 빌드 세팅을 하다보니 너무 귀찮아져서 나만의 boilerplate를 만들어 보기로 했다. 먼저 webpack에 대해 간단히 소개하자면, 웹 프로젝트에서 asset들을 bundle(하나의 단일 파일)로 만들어 배포하기 쉽게 빌드해주는 도구이다. js를 예를 들면, 여러 개로 쪼개진 스크립트 파.. 공감수 5 댓글수 3 2017. 4. 8.
LINE Bot 만들기 - 3. Nodejs 서버 만들기 이제 Nodejs를 이용해서 AWS에 올라갈 서버를 만들어 보도록 하겠습니다. 비지니스 로직 구현에 참고할 문서는 Messaging API(https://devdocs.line.me/en/)를 참고하였습니다. 여기서는 서버 설정과 간단히 응답하는 코드에 대해서만 설명하도록 하겠습니다. 아래 내용은 express module에 대해서 알고 있다는 전제하에 진행하도록 하겠습니다. 1. SSL 설정하기 우리가 만든 서버에서 https protocol을 사용하기 위해서는 서버에 SSL 설정을 해주어야합니다. 인증 설정을 하기 위해서는 .ca-bundle 파일 / .key 파일 / .crt파일이 필요합니다. 위 파일들은 인증서를 발급할때 인증기관을 통하여 얻을 수 있습니다. (comodo 인증기관의 경우 인증이 .. 공감수 3 댓글수 4 2016. 10. 29.
LINE Bot 만들기 - 2. AWS 서버 & SSL 인증서 앞에서 설명한 callback URL에 등록할 서버를 만들어 보도록 합시다. Messaging API는 https 프로토콜을 사용해야 하기 때문에 SSL 인증서가 필요합니다. 여기서 SSL인증서는 comodo 업체의 인증서를 사용해서 만들어 보도록 하겠습니다. AWS 서버 구축하기 아마존 웹 서비스(AWS)는 처음 가입하면 12개월 무료로 사용할 수 있는 프리티어 서비스를 제공합니다. (쉽게말하면 12개월 공짜!) 우리는 AWS 프리티어 서비스 중 EC2 라는 클라우드 서버 서비스를 사용해서 우리의 봇 서버를 돌려보도록 하겠습니다. 1) AWS 가입하기 이미 계정이 있으신분들은 이부분은 넘어가셔도 좋습니다. 이 포스트에서는 가입하는 부분은 다른 분들이 작성하신 포스트를 참조하도록 하겠습니다. AWS 가입.. 공감수 2 댓글수 1 2016. 10. 29.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.