본문 바로가기

JS

 (7)
ReactJs에서 addEventListener 사용하기 INDEX Stack #ReactJs, #useEffect, #addEventListener Preview 보통 리액트에서는 토글 기능이나 Toast, window 와 같은 status가 'ON', 'OFF' 인 컴포넌트를 구현할 때 useState를 사용합니다. 만약 아래와 같은 상황에서 어떻게 구현해야 할까요? 위 이미지에서 왼쪽에 있는 버튼은 공지사항 내용이 있으면 빨간 동그라미가 있고 없으면 표시하지 않도록 구현을 하려 합니다. 노티 이미지를 클릭했을 때 위 이미지처럼 공지사항 내용이 보여져야(show) 하고 해당 공지사항 영역 외의 영역을 터치하거나 노티 이미지 영역을 다시 클릭하면 공지사항 영역이 다시 hide 되어야 합니다. Methodology 처음엔 단순하게 생각했습니다. "useStat..
Delaying of Function INDEX Stack #VanillaJS Preview JS로 개발하다 보면 비동기 처리에 항상 신경을 쓸 수밖에 없습니다. *https://sieon-dev.tistory.com/56 이전 포스팅에서 한 번 다뤘었는데 좀 부족한 듯해 추가로 다뤄보려 합니다. (나중에 보면 이 글도 많이 부족해보이겠죠..ㅎ) Methodology 만약 얼마나 걸릴지 알수없는 함수 longTimeFunc(Function) 가 있고 그 함수를 호출해야 하는 함수는 오래 걸리는 메서드의 프로세스가 끝난 뒤에 결과 값을 출력해야 하는 경우라면 어떻게 해야 할까요? const RandomTimeSec = parseInt(Math.random() * 10); const longTimeFunc = () => { setTimeout(..
PM2를 사용해 PUSH서버 구축하기 INDEX Stack Nodejs,PM2,Javascript,CentOs Javascript Preview PUSH 서버는 사용자에게 보낼 메시지 정보를 받아 Google Firebase Cloud Messaging 로 전송하는 중간 브릿지 역할을 합니다. CentOs 위에서 Nodejs로 구현되어 있으며 무중단 배포 및 운영을 위해 PM2를 사용했습니다. What is PM2 ? PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, i..
[JS] 계층(hierarchical) 구조의 데이터를 JSON 데이터로 변환하기 INDEX 다음과 같은 구조의 데이터가 있다. var obj =[ {'level' : 1, 'name' : 'grandParent1'}, {'level' : 2, 'name' : 'parent1'}, {'level' : 3, 'name' : 'child1'}, {'level' : 3, 'name' : 'child2'}, {'level' : 3, 'name' : 'child3'}, {'level' : 2, 'name' : 'parent2'}, {'level' : 1, 'name' : 'grandParent2'}, {'level' : 2, 'name' : 'parent3'}, {'level' : 3, 'name' : 'child4'}, {'level' : 3, 'name' : 'child5'} ] 이를 도식..
[JS] new Date() 함수의 위험성 JS의 Date 객체는 쉽게 말해 JS로 현재 시스템 날짜를 제어할 수 있게 도와주는 JS에 내장된 객체입니다. 그래서 Date.prototype을 찍어보면 다음처럼 나옵니다. *시스템 날짜이기 때문에 휴대폰에서는 기기의 시간, PC에서는 PC에 설정되어 있는 시간대를 이용하죠. constructor을 찍어보면 native code 라고 나오고 실행시켜보면 현재 시간을 계산하여 return 해줍니다. 더보기 constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다. 내부 코드를 볼 순 없지만 사실 개발하면서 굳이 내장 함수를 들여다볼 일이 별로 없긴 해서 저도 찾아보다 포기했습니다ㅠ 이 Date 함수의 사용법에 대한 자료는 찾아보시면 많습니다. 이번 포스팅을 통해 얘..
[JS] Object Sorting Issue Preview json 파일을 object로 parsing해 사용하려고 봤더니 순서가 이상하다. 분명 원본 파일과 다르다. { "fruits": { "001" : "사과", "002" : "배", "003" : "메론", "301" : "수박", "999" : "참외" } } 이 json object는 과일 항목을 KEY VALUE 로 정의해놓은 값이다. 이 json object를 읽어 콘솔에 찍으면 웬걸.. 당연히 정의된 object 그대로 불러올 줄 알았으나 JS 엔진은 Object를 호출할 때 자동으로 Key 값 기준으로 정렬을 해준다고 한다. 그런데, Key 값을 기준으로 정렬한다고 해도 001, 002, 003, 301, 999 이 순서대로 돼야 하지 않나 싶었다. Methodology 그래서 ..
localstorage를 활용한 메뉴 History 저장 본 게시글은 재직 중인 증권사 MTS를 개발하면서 localstorage를 활용해 개인이 들어갔던 메뉴를 저장하고 불러오는 로직을 기록하기 위함입니다. 자사 메뉴는 기본적으로 다음과 같은 구성으로 되어있습니다.(예시) 1) 주식 1-1) 국내주식 현재가 1-2) 국내주식 주문 . . 위 방식처럼 쭉 대분류, 중분류, 소분류로 메뉴가 이어지면 사용자 입장에서 필요한 기능은 다음과 같을 것입니다. 1) 검색기능 2) 최근 메뉴 3) 자주 찾는 메뉴 검색 기능은 다음에 기회가 되면 정리하도록 하고, 최근 메뉴와 자주찾는메뉴를 어떻게 구현했는지 소개하겠습니다. 최근메뉴 우선 자사 앱은 하이브리드 앱으로 네이티브 위에 웹뷰를 얹어 웹 개발 방식으로 개발되어 있습니다. 하이브리드 앱은 IOS, android 구분 ..
반응형

티스토리툴바