박스여우 - BoxFox

React를 처음 배우기 시작할때는 React의 State 관리 도구가 Redux뿐인줄 알고 있었습니다. 그래서 reducer와 action 정의 등 번거로운 redux가 당연한 줄 알고 사용하고 있었습니다. 하지만 mobx라는 다른 state 관리 도구가 있다는 사실을 알게되었고 이 역시 사용해보면서 두 도구의 장단점과 써보면서 느낀점들을 정리해보고자 합니다. ■ Reduxredux의 컨셉은 flux로부터 시작되었습니다. 기존에 UI와 데이터를 관리하기 위해 많이 사용됐던 MVC 패턴은 View와 모델이 많아질수록 구조와 데이터의 흐름이 복잡해져서 추적하기가 어려워진다는 문제점이 있었습니다. 이러한 문제를 해결하기 위해 페이스북에서 Flux 아키텍처를 고안하였습니다. MVC의 데이터흐름 Flux의 구조..

■ Introducing the Web Share API안드로이드용 Chrome 61에서 웹 사이트에서 호스트 플랫폼의 기본 공유 기능을 호출 할 수있게 해주는 navigator.share() 메소드가 출시되었습니다. 해당 메소드는 Web Share API의 일부이며 공유 할 URL이나 텍스트를 전달하여 기본 Android 공유 Dialog를 쉽게 사용할 수 있습니다. Web Share API는 Promise 기반 단일 메소드입니다. share 메소드 호출시에 공유할 데이터의 속성은 title, text, url등이 있으며 text, url 두 속성중중 하나 이상을 필수로 넣어주어야 합니다. 123456789if (navigator.share) { navigator.share({ title: 'Web F..

React를 처음으로 배우게 만들었고 지금까지도 진행중인 CC-Show라는 프로젝트를 진행하면서 좀더 코드를 고도화 시킬 수 있는 방법은 없을까 하고 여러 오픈소스들을 많이 찾아보았다. React-Router이 Plain Router를 사용하려다 보니 require.ensure라는 함수를 통해 라우터에 컴포넌트를 넘겨주는 코드를 보았다. 처음보는 코드라 찾아봤는데 꽤 재미있는 내용이 나왔다. ■ Single Page ApplicationSingle Page Application - SPA는 말 그대로 페이지가 하나인 웹사이트이다. Single Page Application이면 진짜 페이지가 한개인가? 라는 생각이 들 것이다. 대부분의 어플리케이션의 경우 페이지 하나로는 절대적으로 구현을 못하는것이 대부분..

■ GDG Daejeon - DevFest 2018대전에서 GDG Daejeon DevFest 2018이 진행되었다. 행사를 진행하면서도 각각의 세션내용에 관심을 가지고 나도 무언가를 배워가고자 열심히 필기를 했다. 가장 와 닿았던 세션들은 조은님의 Progressive Web Apps와 장인수님의 Flutter 세션이였다. Flutter는 최근에 React Native를 새롭게 시작해서 경쟁 플랫폼인 Flutter에 대해 관심을 가지고 있었고, PWA는 기존에 알고있던 개념이기도 하고 한번 시도는 해보고 싶은데 기회가 없어서 못해봤고, 무엇보다 조은님께서 세션을 쉽고 재미있게 진행해주셔서 기억에 많이 남았다. 그래서 이번 포스팅에선 PWA에 대해서 간단하게 정리를 해보고자 한다. ■ Progressiv..

React는 Facebook에서 개발한 웹 프론트엔드 라이브러리 입니다. MVC중의 V - View 만을 담당하는 라이브러리 입니다. 기존의 DOM은 자주 변하는 동적인 UI에 최적화 되어있지 못해서 웹 기술이 발전하고 웹페이지의 규모가 커질 수록 성능상의 이슈가 빈번히 발생했습니다. 그래서 페이스북에서는 이 DOM의 조작을 최소화 시켜서 UI업데이트를 최적화 해 주는 React라는 라이브러리를 개발하였습니다. React는 Virtual DOM이라는 기존의 DOM을 추상화해서 업데이트 되는 UI를 반영하고, 업데이트가 완료되면 이 Virtual DOM을 이전의 Virtual DOM과 비교해서 달라진 부분만 실제 DOM에 반영하는 방식으로 레이아웃 계산을 최소화 시킴으로써 성능을 향상시켜줍니다. 따라서 성..

안녕하세요 박스여우입니다. 얼마전에 NodeJS를 다루던 중 POST Request를 받을 때 파라미터를 사용할 수가 없었습니다. 그래서 이번에는 NodeJS에서 Get과 Post Request의 Paramater를 사용하는 방법에 대해서 알아보도록 하겠습니다. ■Get Request우선 Get 방식부터 살펴보도록 하겠습니다. 일반적인 파라미터 사용1234567//http://localhost:8080/test/users?id=test&name=boxfoxapp.get('/test/users', function(req, res) { var user_id = req.param('id'); var user_name = req.param('name'); res.send(user_id + ' ' + user_n..

안녕하세요 박스여우입니다. 요즘 새로운 서비스를 준비중이라 NodeJS를 다루고 있는데요, 그래서 이번에는 NodeJS와 MongoDB연동하고 사용하는 방법에 대해서 알아보도록 하겠습니다. ■MongoDB 설치지난 포스팅에 이어서 진행되는 프로젝트이므로 이전 포스팅을 보지 않으셨다면 읽고 오시는것을 추천합니다. 그럼 MongoDB연동을 시작해 보도록 하겠습니다. MongoDB를 사용하기 위해서는 MongoDB를 사용해야겠지요? MongoDB를 설치하는 방법은 매우 다양합니다. 저의 경우 여러가지 방법을 시도해 보았지만 대부분 되지않는 방법이 많아서 제가 성공한 MongoDB 설치 방법을 적어보도록 하겠습니다. 1234[root@localhost ~]# cd /usr/local/[root@localhost..

안녕하세요 박스여우입니다. 이번 포스팅은 요즘 프로젝트를 진행하며 사용하고 있는 Spring에 대한 포스팅을 작성해 보도록 하겠습니다. Spring에서는 JDBC를 사용하지만, Mybatis라는 프레임워크를 사용합니다. 따라서 이번 포스팅에서는 Spring에서 Mybatis를 이용하여 Mysql을 사용하는 방법에 대해 알아보도록 하겠습니다. ■Mybatis란?우선 Mysql을 연동하기 전에 Mysql을 관리하게될 Mybatis라는 녀석에 대해서 알아보고 넘어가도록 하겠습니다. Mybatis는 JDBC로 처리하는 상당 부분의 작업을 대신해주고 SQL 문을 코드로부터 완전히 분리해줄 수 있는 퍼시스턴스 프레임워크 입니다. Spring에서 직접 JDBC를 사용하여 DB를 사용할 수 있지만, Mybatis를 사..

안녕하세요 박스여우입니다.오늘은 바로 어제 해커톤에서 처음 시도해 보았던 javascript에서 AJAX나 form 태그 없이 POST를 전송하여 Google URL Shortener API를 사용하는 방법에 대해 다뤄보고자 합니다. ■ With JQueryWebView를 이용해 사이트 내에 있는 data-src 정보를 받아오는데 url의 길이가 너무 길어 코드로 넘어올때 자동으로 중간이 ...으로 요약되서 넘어와 문제가 발생했습니다. 그래서 javascript에서 url정보를 넘겨받을때 url을 단축시켜 받고자 Google URL Shortener를 사용하였습니다. Google URL Shortener API를 사용하는 방법은 그냥 POST 방식으로 request를 보내면 되서 간단하게 사용할 수 있습..

안녕하세요 박스여우입니다.최근 AngularJS에 관심이 생겨서 AngularJS에 대해 공부를 하고 있습니다. 그리고 공부한 AngularJS의 내용을 블로그에 포스팅 하고자 합니다. ■ AbgularJS지난 포스팅에서도 소개해 드렸듯이 AngularJS는 JavaScript로 만들어진 웹 애플리케이션 프레임워크 입니다.라이브러리 : JQuery와 같이 유용한 함수의 집합이다. 개발자의 코드가 필요한 시점에 해당 함수들을 호출하고 애플리케이션의 전체 흐름을 제어합니다. 프레임워크 : AngykarJS등과 같이 개발자의 코드가 프레임워크의 빈 공간을 채우고, 프레임워크가 필요시점에 개발자의 코드를 호출하고 애플리케이션의 전체 흐름을 제어하게 됩니다. ■ AbgularJS의 특징 ■ 작성해야 하는 JS의 ..