Share the knowledge

최근 사내에서 개발을 하던 중 동시에 요청이 들어왔을 때 기존에 실행되던 기능이 새로운 요청이 들어오면 종료되는 문제가 있어서 자료구조중 큐를 이용해 순차적으로 수행할 수 있도록 하는기능을 구현했는데, 큐를 구현했던 경험을 정리하려고 한다. 먼저 javascript에선 Queue를 리스트를 이용해구현할 수 있고 난 다음과 같이 구현하여 사용하였다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 (function () { class Queue { constructor() { this.items = []; } enqueue(value) { // 큐에 값을추가 this.items.push(valu..

최근 작업을 하다보니 팝업을 띄워서 작업하는 부분을 구현해야 할 일이 있었는데, 그때 부모 컴포넌트의 데이터를 가져올 때 생겼던 이슈에 대해서 정리해보려고 한다. 대략 내가 구현했던 화면은 위 그림과 같았고, popup에서 특정 action시 mainview의 데이터를 수정해줘야 하는 기능이 필요했고, 코드는 대략 다음과 같은 구성이였다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 //생략 button action ((doc) => { var vue = new Vue..

vue js를 이용하여 화면단을 개발하던 도중 keyup 이벤트를 이용하여 필터하는 기능을 구현해야 했는데, 이 기능을 서버단에서 처리할지 클라이언트단에서 처리할지 고민하다가 결국 클라이언트단에서 처리하기로 결정하고(필터되는 부분이 복잡하고 자원이 많이들었다면 서버단에서 처리했을 것 같긴하다.) 코드작성을 시작헀는데, 처음에는 v-model과 v-on:keyup 이벤트를 이용해서 다음과 같이 작성했었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 {{item}} (function() { let vm = new Vue({ el: '#vi..

최근 Front-end 단에서 사용자가 데이터를 변경한 뒤 화면을 이동하거나 종료할 때 저장여부에 대한 알림을 띄워주는 기능을 개발해야 했는데, 그 기능중 이전 데이터 Object와 변경된 데이터 Object를 어떻게 비교했는지에 대해서 정리해보려고 한다.(Vue.js에서는 이런기능을 따로 구현할 필요는 없는것으로 알고있다.) 사실 별다른 내용은 없고, Object를 비교하는 내용만 정리할거라 바로 코드로 정리한다, 코드는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 function compareData() { let object = {name : 'kim', age : 32, gender : 'M'}; let object2 = {name : 'park', age : 20, gender : 'M'..

view단 작업을 하던도중 radio버튼을 클릭했을 때 값이 변경된 후 다음로직이 수행되는 부분을 구현해야 했는데, 처음에는 @click(v-on:click)이벤트를 이용해서 작업하다보니 내 생각과는 다르게 작동했다. 의도했던것은 @click가 눌렸을 때 해당 태그의 값이 변경되고, function이 실행될 것 같았는데, 막상 실행해보니 click이벤트가 발생한 뒤 값이 변경되었는데, 이 부분을 코드로 보면 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // 값이 변경된 후 함수가 실행되게 하고싶으면 @change를 사용... //스크립트 최대한 간략화함... let vm = new Vue({ el..

이번에 표같은 구조로 되어있는 화면에서 표내의 열의 모든 라디오버튼을 일괄선택 해주는 기능을 구현해야했었는데, 내가 구현했던 방법을 기록하고, 비슷한 기능을 구현하는 사람이 있을까 해서 기록해본다. 대략 화면 UI는 다음과 같다. 설명 [버튼] : 전체 예 [버튼] : 전체 아니오 1 라디오버튼(O) 라디오버튼(X) 2 라디오버튼(O) 라디오버튼(X) 3 라디오버튼(O) 라디오버튼(X) 4 라디오버튼(O) 라디오버튼(X) 카카오 오븐이나, 파워포인트 등 툴로 UI를 그릴수도 있지만 귀찮아서 그냥 블로그내의 표로 대체.. 위 UI에서 필요한 기능은 헤더부 상단 버튼을 누르면 아래 모든열(세로)의 라디오버튼이 예또는 아니오로 선택되어야 하고, 각 행(가로)의 라디오버튼 태그들의 name은 같은 상황이였다. ..

티스토리를 이용해서 블로깅을 하시는분들은 다들 아시겠지만 티스토리에는 블로그 내의 HTML파일을 수정하거나 추가 할 수 있다. (일부 로직과 함께 추가되는 부분들은 수정하기 쉽지않다.) 일단 나의경우는 최근에 티스토리 페이지 템플릿을 변경하면서, 간단한 부분들을 HTML을 수정하던 도중 블로그에 로또번호를 뽑아주는 기능이 있으면 좋겠다고 생각해서 작업하게 되었다. 방법은 볼로그관리 -> [꾸미기] 스킨 편집 -> html편집 버튼을 누르면 다음과 같은 html 페이지들을 볼 수 있다. 사실 개발자 분들이 아니라면 생소할 수도있지만, 대부분 이 블로그를 방문하시는 분들은 개발자분들이라고 생각하고 진행하겠다. 블로그의 HTML을 확인했으면 원하는 위치에 특정액션을 취했을 때 로또번호를 생성하기 위한 html..

최근 Front-End작업을 많이 하게 되어서 화살표 함수를 자주 사용하고 있는데, 이 화살표 함수를 사용하다보니 매우 편리한 것은 물론이고, 코드 까지 간결해져서 애용하고 있다. 그래서 오늘은 화살표 함수에 대해서 정리하려고 한다. ※ 화살표 함수의 주의점은 IE의 경우 지원자체를 안하기때문에 사용할 떄 고려할 부분이 많다. 먼저 화살표 함수의 기본작성법은 다음과 같다. 123456789101112131415161718(param1, param2, …, paramN) => { statements }(param1, param2, …, paramN) => expression// 다음과 동일함: => { return expression; } // 매개변수가 하나뿐인 경우 괄호는 선택사항:(singlePara..

Vue를 이용해서 Front-End 개발 작업을 진행하다보면 특정 태그의 Dom을 직접 컨트롤 하고 싶을 떄가 있다. 물론 자바스크립트의 querySelector를 이용해서 dom에 접근할 수 있겠지만, 뷰에서도 dom에 접근할 수 있는 방법이 있기 떄문에 vue.js에서 dom에 접근 하는 방법을 정리하려고 한다. 일단 다음과 같은 input태그가 있다고 가정했을 때 해당 input태그에서 비밀번호 유효성체크를 하는 과정에서 조건을 만족하지못하면 해당 input태그에 포커싱되게 하고싶다면 태그에 ref속성만 추가해주면 된다. 해당 태그에 ref속성을 추가했다면 스크립트 코드에서는 $refs를 통해 접근하면 되겠다. // 생략 password : function() { alert('비밀번호 유효성체크')..

Front-End 개발을 하다보면 특정문자를 치환 할 일이 많은데, 자바스크립트에서도 문자열을 치환하는 기능을 제공한다. 함수명은 replace로 JAVA의 문자열 치환 메소드인 replace와 같은 이름을 사용한다.(단어 뜻도 치환, 변경이니까..) 사용법은 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /** * var newStr = str.replace(regexp|substr, newSubstr|function) - 공식문서 설명 * 첫 번쨰 매개변수는 문자열 or 정규식 , 두 번째 매개변수는 변경될 문자열 or 함수가 들어갈 수 있다. */ let str = 'This is Test & Test'; console..