본문 바로가기

Programming/JavaScript

(9)

[JS] Promise 활용 - 사용자 입력에 의한 동작 진행 / 미진행 JS를 활용하는 front 소스에서 사용자 입력을 통해서 함수를 더 진행시킬지 중단할지 정해야하는 경우가 많이 생깁니다. 모든 Modal 창을 통해서 callback 처리를 각각 함수에서 받아서 처리하면 문제가 생길 일이 없지만, 복잡한 비지니스 로직해서하나의 함수에서 연속적으로 사용자 입력을 받아할 경우가 생길 수 있습니다. 최근 실무에서 위와 같은 문제가 생긴적이 있는데 이를 해결하기 위해서 사용한 간략한 기법을 정리해 봅니다. 예시코드let success = '' //resolve를 담을 변수let fail = '' //reject를 담을 변수const returnPromise = () => { console.log("returnPromise call") return new P..

[JS] setTimeout 사용법과 await / sleep 만들기 JavaScript에서 setTimeout은 비동기(async)로 특정 시간 후의 로직을 수행시킬 수 있다. setTimeout 수행 예제console.log('start');// async로 3초(3,000ms)뒤에 {}안의 로직 수행setTimeout(() => { console.log('call it after 3s');}, 3000);console.log('end') setTimeout 수행 결과>>> start>>> end// ...약 3초 뒤...>>> call it after 3s setTimeout에 await를 사용하기 setTimeout await 사용console.log('start');// async로 3초(3,000ms)뒤에 {}안의 로직 수행await setTimeout(() ..

[JS] 보안 키패드 입력 error 예외처리(ft. isNaN) 회사에서 운영하고 있는 앱의 보안 키패드를 사용하는 서비스에서 잘못된 입력 값으로 인한 오류의 트러블 슈팅을 진행했습니다. 서버에서 input 값 검증을 통해서 업무 오류를 뱉어내 잘못된 정보가 업데이트 되지는 않았었지만, 화면 소스(front end)에서 예외처리 미흡으로 잘못된 input 값을 서버(back end) 측으로 보내고 있음을 확인했습니다. 😮 문제 상황보안 키패드의 사용하는 이벤트의 value를 처리하는 부분에서 numberic의 검증이 되지 않아서 숫자형 값만 들어와야하는 부분에 실제 string이 들어오는 경우가 발생하였습니다. 🛠️ 조치방법키패드 이벤트를 통해서 들어오는 value 값을 화면에서 isNaN를 사용해 한번 더 예외처리 하였습니다. 기존 로직의 경우, value가 s..

[JS] Object 변수 데이터 추가, 문자열(String)을 이용한 동적 접근 방법 🥸 JavaScript Object 객체 문자열을 이용해 동적으로 데이터 추가, 삭제하기 자바스크립트의 Object 객체는 key, value 형태도 데이터를 저장합니다. 🤔 프로퍼티 접근법으로 데이터 추가, 대체 하기 var object = {}; object.arr = [];// obect에 arr가 없다면 빈 배열([])을 추가, 존재한다면 대체 console.log(object); // { arr: [] } object.arr.push('first');// object 안의 arr에 문자열 'first' 추가 console.log(object.arr); // [ 'first' ] object.arr = [];// 기존에 있는 arr를 빈 배열로 대체 console.log(object.arr); /..

[JS] 자바스크립트의 상속과 prototype 이번에 회사에서 배치받은 팀은 모바일 서비스 팀이었다. 네이티브 앱 아래에 웹 뷰를 제공하는데 당분간은 프론트 부분을 다루게 될 것 같다. JS는 DOM 조작 외에는 다뤄볼 기회가 없었기에 이번에 prototype에 대한 개념도 처음 알게 되었다. JS는 prototype 기반 언어라고 불린다는데 기본도 몰랐던 거시였다... 한 동안 JS를 열심히 공부해야할 것 같다. prototype은 JS에서 객체의 상속을 다루는 간단하면서, 중요한 개념이었다. 사실 JS도 이런 기능을 제공한다는 것에 놀라기도 했다. 또 역시 JS답게 굉장히 심플했다. 🧐 자바스크립트 객체 생성 function MyObject(인자) { this.property1 = ... this.property2 = 인자 } class MyOb..

[JavaScript] String-boot 웹 소켓(WebSocket)을 이용한 실시간 채팅 구현 - Session Storage 활용하기 소개 왜 WebSocket을 사용하였나? Spring-boot WebSocket 사용법(설정법) 순수 자바스크립트로 작성해보기 발생한 문제와 해결 방법 ㄴ HTTP session 가져오기 -> interception 사용 ㄴ DB를 사용하지 않고 기존 메시지 저장하기 -> Session Storage 사용하기 최근 작성 중인 개인 프로젝트에서 웹에 접속한 클라이언트와 실시간 채팅을하는 기능을 구현해보려고 했다. 🤔 왜 WebSocket을 사용하였나? 여기서 말하는 웹 소켓은 Spring Framework의 STOMP가 아닌 순수 JavaScript를 활용한 예제 입니다. jquery도 사용하지 않습니다. WebSocket이 필요했던 이유 앞서말했듯 실시간 라이브 채팅 기능을 구현하고 싶었다. 하지만, 기..

[JavaScript] 바닐라 자바스크립트 disabled, display 속성 추가, 해제(변경) 간혹 자바스크립트에서 disabled 속성과 display 속성을 변경할 때 헷갈리는 경우가 있다. 필요할 때 찾아보기 위해서 글을 씁니다. JavaSctript로 disabled 속성 활성화 or 해제 하기 function disabledFalse() { document.querySelector('#name').disabled = false; document.querySelector('#email').disabled = false; document.querySelector('#phone').disabled = false; document.querySelector('#message').disabled = false; } 위 처럼 내가 원하는 선택자를 선택해준 후 .disabled 속성을 변경해주면 된다...

자바 스크립트 기초 / 글자수 계산기 글자수 계산기 만들기 with 자바스크립트 필요지식 1. getElementById를 이용해 ㄴ DOM(Document Object Model)의 id 가져오기 2. onkeydown 이벤트 HTML 코드 자기소개 // 제목 입력 입력하세요 (0/200) 자바스크립트 코드

이전 1 2 다음

728x90

티스토리툴바