본문 바로가기

Javascript139

express-generator로 node.js 기본 구조 구축하기 최근 회사에서 node.js를 쓸 일이 생겼다.오랜만에 쓰는 거라서 node.js 구조 자체를 어떻게 잡아줘야 하는지 생각이 안 났다.그래서 찾아본 결과 express-generator가 있다는 것을 기억해 내었다. 본 모듈은 쉽게 node.js의 구조를 잡아준다. 아래는 본 모듈의 사용방법 및 구조에 대해서 잘 설명해주고 있다. http://html5around.com/wordpress/tutorials/node-js-개발환경-구축하기/ 2017. 4. 13.
JS에서 정규표현식 모두 적용하기 최근에 문장에서 특정단어를 모두 replace하여 표현해 줘야하는 일이 있었다.하지만 js에서는 JAVA와 같이 replaceAll 함수를 지원해주지 않는다.고로 정규표현식을 사용하여 replaceAll과 같은 기능을 구현해주어야 한다.웹서핑을 통해 찾아본 결과 replace(/(특정단어)/gi, (바꾸고자 하는 단어))로 해주면 된다고 해서 그렇게 해보았는데 계속 안되었다.문제는 특정단어가 string 형으로 들어가는것이 아니라 object 형으로 들어가야 한다는 것이었다.그것을 위해서 RegExp() 함수를 사용해주어야 했는데, 아래 링크에 함수 사용법이 잘 정리되어 있었다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_.. 2017. 4. 11.
vue.js에서 jquery와 bootstrap을 쓰는 방법 아래의 링크에 세밀하게 잘 나와있다. https://vuejs-kr.github.io/jekyll/update/2017/03/02/vuejs-jquery-bootstrap/ 2017. 3. 31.
vue.js에서 컴포넌트를 사용해야 될때 vue.js의 핵심적인 기능중 하나가 바로 UI 컴포넌트화이다.이를 통해 우리는 UI 협업 개발이 가능해지며, 재사용성까지 높아진다. 하지만 최근까지 vue.js를 사용해본 나는 몇몇 문제에 부딫혔다.도대체 언제 컴포넌트를 사용해주면 되는 것과, 컴포넌트의 범위는 어디까지 정해놓고 개발해야 되는가 하는 문제이다.아직까지 대형 앱 개발을 안 해서인지 컴포넌트를 사용할 일이 많지 않았다. 초반에는 그냥 모든 UI를 컴포넌트화 시켜서 사용하면 되지 않을까? 하고 주구장창 만들었었는데,만들다가 이게 뭔 뻘짓인가 싶었다.그래서 컴포넌트를 꼭 사용하는 이유에 대해서 찾기 시작했고,두가지 결론에 이르렀다. 첫번째, 구조적인 웹페이지를 만들고 싶으면 컴포넌트를 사용해라.페이지를 컴포넌트로 구조화 시킴으로써 사이트 협업.. 2017. 3. 31.
vue.js computed와 methods의 차이2 vue.js에서 computed와 methods의 차이가 하나 더 있다면,바로 methods는 함수에서 매개변수를 받아올 수 있지만computed는 그럴수 없다. 또한 computed는 주로 배열 sorting이나 값 filter를 할때 많이 쓰이고,methods는 이벤트에 따른 어떠한 기능을 수행할때 주로 쓰는것을 발견할 수 있었다. 간단하지만 중요한 사항인거 같다. 2017. 3. 30.
vue cli의 .vue파일에서 sass사용하기 vue cli에서 .vue 확장자 파일로 개발하다 보면 css를 sass로 사용하고 싶을때가 많다.그래서 그게 가능한지 찾아보았는데, 4번의 시도를 해보아도 쉽게 적용되지 않았다.그래서 vue.js의 멘토이신 김청진님께 물었을때 아래와 같은 참조페이지를 소개해주었고, https://vuejs-kr.github.io/jekyll/update/2017/01/17/vuejs-external-css-library/ 잘 해결할 수 있었다. yeah~~ 2017. 3. 29.
vue.js에서 jquery를 쓰는 경우 vue.js를 공부하면서 jquery는 더이상 쓸 일이 없지 않을까?(bootstrap 불러오는거 빼고)라고 생각했었다.그런데 최근 vue.js를 가지고 코드를 짜다가 vue.js의 methods 속성 안의 함수에서 jquery를 사용하게 되었다. 사용의 발단은 input에서 텍스트를 입력하고 엔터를 치면 안에 있는 값을 판별하여 어떠한 기능을 수행하고자 함이었는데,컴포넌트의 data는 건들기 싫었다.그렇게 되었을때 결국에는 javascript나 jquery를 사용하여 input의 value에 접근할 수밖에 없었다. 이 경험을 통해 생각하게 된것이 만약 vue.js안에서 해당 컴포넌트에 속하지 않은 다른 컴포넌트의 속성이나 값을 받아와야 할때 jquery를 이용할 수 있지 않을까? 라는 생각을 하게 되었.. 2017. 3. 29.
vue.js의 methods속성에서 유의할 점 vue.js를 쓰다보면 이벤트 함수정의에서 methods 속성을 잘 쓰게 된다.이때 주의할 점이 있다.바로 methods 내부에서 es6 문법을 썼을때 생기는 문제다.대부분 methods 안에서의 함수는 어떠한 데이터 속성을 조작하는 경우가 많다. 이때 this라는 객체를 사용해주어 데이터에 접근하게 된다.하지만 여기에서 () => {} 같은 es6 함수 문법을 사용해 주면,this 객체로 데이터에 접근을 하지 못하게 된다. 원인은 es6안의 this가 함수 내 객체로 변경되기 때문이다.사소한 문제이지만 vue.js를 es6문법으로 작성한 사람에게는 원인을 알 수 없는 미스테리한 삽질 문제가 될 수 있다.(혹 모르는 분들이 있으면 주의하길 바랍니다. ㅎㅎ) 2017. 3. 29.
vue.js의 v-else-if 디렉토리 허용 버전 최근 vue.js를 공부하면서 v-else-if를 사용할 일이 생겼다.그런데 계속해서 에러가 났다... (10분을 낭비..)문제의 원인을 찾아보니 v-else-if는 vue.js 2.1.0 버전부터 지원하고 있었다.(내가 쓴 버전은 2.0.1 버전..) https://kr.vuejs.org/v2/guide/conditional.html#v-else-if(위의 문서를 참고했다.) 모두 참고하길 바래요. ㅎㅎ 2017. 3. 29.

티스토리툴바