2018/027 i18next 사용기 최근 개발하고 있는 앱에서 다국어 지원 기능을 개발할 일이 있었다.물론 이전에도 i18next란 라이브러리를 써서 개발했었지만,이번에 다시 업데이트를 해야하는 상황이 와서 i18next 라이브러리에 대해 공부하게 되었다. 공부하면서 다시 알게된점은 i18next는 여러 프레임워크와 잘 붙을수 있게 설계한 점이다.그리고 .use()라는 함수를 통해서 사용하고 싶은 모듈을 쓰는데 여러가지로 편리했다.여튼 다국어지원에 있어서는 세계적으로 top 라이브러리가 아닐까 생각한다. 결론적으로 아래는 내가 짠 코드다.버튼을 통해 국가 변환이 발생하면 그것을 감지하고 언어를 바꿔주게 하였다.jquery 모듈을 붙여서 사용했으며, 이외에 아래 보는것과 같이 i18nextXHRBackend, i18nextBrowserLan.. 2018. 2. 28. 시작일 종료일 세팅 방법 html5에서 시작일 종료일 값을 받을때가 있다.당연한 이야기이지만 종료일은 시작일 보다 항상 뒤에 날짜여야 한다.이러한 부분에 있어 html5에서 validation을 지원해주는지 찾아보았는데,실상 없었기에 따로 구현해주어야 했다.이 부분에 있어 자료를 찾아보니 아래의 사이트에 그 구현 예제가 잘 설명되어 있었다. http://jsfiddle.net/int32_t/5zLeK/ 2018. 2. 26. node.js 스케쥴러 구현 최근 회사의 앱에서 매일 오후 8시에 PWA 알람을 보내주는 기능을 만들어야 했다.즉 node.js에서 스케쥴러 기능을 구현해야 했는데,찾아보니 이러한 기능을 쉽게 쓸 수 있게 지원해주는 모듈이 있었다.node-schedule이란 모듈인데, 아래의 블로그에서 한국어로 쓰는 방법에 대해서 자세히 알려주고 있다.그리고 그아랜 정식 페이지이다. http://avilos.codes/server/nodejs/node-js-scheduler-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/https://www.npmjs.com/package/node-schedule 2018. 2. 26. vue.js 공식 스타일 가이드 최근 vue.js를 사용하다보면서 파일 이름 형식에 대해 많은 궁금증이 생겼다.그런데 물어볼 곳이 없어서 vue.js 커뮤니티에 질문한 결과 아래와 같은 vue.js 팀의 공식 문서가 있었다.나와같은 궁금증을 가진 사람은 참고하길 바란다. https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended 2018. 2. 22. bootstrap3 이상 버전에서 주의할점 bootstrap3 이상 버전에서는 더이상 그리드시스템에서 float 기능을 자동으로 제공하지 않는다.즉 두 div에 col-md-6을 써도 서로 붙지 않는다는 점이다.처음에 내가 잘못했나 하고 한참을 찾았는데,찾아보니 3버전에서는 float: left 속성를 기본으로 제공하고 있지 않음을 알게되었다. 2018. 2. 12. jquery에서 contains 함수 jquery에서 키에 따라서 결과를 렌더링할때 쓰는 함수중에 contains라는것이 있다.해당 함수는 하위노드에 특정값을 포함하고 있을때 이벤트가 발생하게 된다.이 함수를 통해 쉽게 글자에 따라 결과가 가려지고 보여지는 기능을 구현할 수 있다.본 함수의 자세한 설명을 보고 싶다면 아래의 링크를 참고하면 된다. https://api.jquery.com/contains-selector/ 그나저나 최근에 규모있는 프로그램을 Node.js 및 jquery로 짜고 있는데,최신 프론트엔드 프레임워크로 앱 컴포넌트화를 하는것의 필요성을 느끼고 있다.(역시 사람은 겪어봐야 이게 왜 탄생하게 되었는지를 아는거 같다.ㅅ.) 2018. 2. 7. masonry 라이브러리 잘 사용하기 최근 masonry 때문에 정말 많은 고민을 하였다.좋은 라이브러리이긴 하지만 제대로 설정을 안 잡아주면 여러가지고 허점이 많은 라이브러리이기도 하다.특히나 이번에 고민했던것은 콘텐츠를 반응형 그리드 형식으로 출력하는 부분이었는데,아래의 링크를 통해서 영감을 얻어 원했던 완벽한 masonry를 구현할 수 있었다.쉽고 완벽하게 구현하기 위해서 bootstrap의 컬럼 class도 써 주었다. https://codepen.io/Axiol/pen/yzhGF?q=responsive%20masonry&order=popularity&depth=everything&show_forks=false 반응형이 될뿐더러 컨텐츠의 width나 height의 길이가 서로 달라도 빈틈이 생기지 않고 잘 표시해 준다. 2018. 2. 1. 이전 1 다음