본문 바로가기

Programming/JavaScript

(8)

[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 / 랜던 번호 생성기 DOCTYPE html> 번호 생성기 웹 페이지 이름 랜덤 번호 추첨기 페이지 상단 제목 var lotto = []; lotto 라는 이름의 array(글자나 숫자를 담는 공간) 생성 while (lotto.length 0 이상 46미만의 실수를 생성 parseInt() -> () 안의 값을 '정수'로 변환 if (lotto.indexOf(num) == -1) { 조건문 if를 사용, '(조건)'을 만족하는 동안 '{내용}'을 진행 조건 lotto.indexOf(num) -> 변수 num이 lotto array 안에 존재 몇 번째 항목 나타냄 존재하지 않으면 -1 랜덤으로 생성된 숫자가 중복적으로 array에 들어가지 않게 해주기 위함 lotto.push(num); 조건을 만족한다면 lotto array..

이전 1 다음

728x90

티스토리툴바