Share the knowledge

Front-End 개발을 하면서 Javascript를 사용하여 사칙연산을 하다보면 원하던 결과와 다른 결과가 나오는 경우가 가끔있다. ex) 예를들면 1 + 2를 했을때 원하는 결과는 3이 나와야 하는데, 문자열로 연결되어 12가 된다던가 하는.. 물론 자바스크립트에서 문자열을 숫자로 바꾸는 방법은 예전부터 알고 있었지만, 여러가지 방법이 있어서 정리도 할겸 글을 작성해본다. 여기서부턴 코드를 이용해서 설명.. 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 // Number을 이용하는 방법 const str1 = '5'; const str2 = '15'; console.log(str1 + str2); // 515 let result ..

최근 사내에서 개발을 하던 중 동시에 요청이 들어왔을 때 기존에 실행되던 기능이 새로운 요청이 들어오면 종료되는 문제가 있어서 자료구조중 큐를 이용해 순차적으로 수행할 수 있도록 하는기능을 구현했는데, 큐를 구현했던 경험을 정리하려고 한다. 먼저 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..

회사에서 개발을 하던도중 프론트엔드쪽에서 간단한 필터링을 구현해야 했었는데, 그 작업을 하면서 생겼던 이슈에 대해서 정리한다. 구현하고자 했던 기능은 흔히 웹사이트에서 자주볼 수 있는 기능으로 검색창에 특정글자를 입력하면 조건에 부합하는 리스트만 출력되는 기능이였는데, 대략 다음과 같은 데이터가 있고, 사용자에게 보여지는건 값만 보여지게 되어있다. key : value 기호1번 : 이재명 기호2번 : 윤석열 기호3번 : 안철수 기호4번 : 심상정 기호5번 : 오준호 기호6번 : 허경영 기호7번 : 이백윤 기호8번 : 옥은호 기호9번 : 김경재 기호10번 : 김재연 여기서 사용자가 보여지는건 value에 해당되고, 사용자가 검색창에 "이"라는 단어를 검색하면 이라는 단어가 들어가있는 이재명, 이백윤만 리스..

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..

최근 개발작업을 진행하다가 보니, 반복문을 순회하면서 새로운 object를 만드는 코드를 작성해야 했는데, object의 key가 동적으로 저장되어야 하는 상황이 있었다. 그래서 여러가지 방법을 찾아봤는데, 바보같이 assign, join, 연산자 등 별에 별 뻘짓을 다했었는데, 정답은 간단한 문제였다. 코드로 설명하면 다음과 같이 하면된다. 123456789let objectCreater = (data) => { let result = {}; // 새로운 object 선언 data.forEach(a => { // 반복문 순회하면서 동적인 key가진 object생성 result[a.key] = a.value; }) } return result;} Colored by Color Scriptercs 이 쉬운..