📝 적어서 머릿속으로

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

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

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

🥸 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는 DOM 조작 외에는 다뤄볼 기회가 없었기에 이번에 prototype에 대한 개념도 처음 알게 되었다. JS는 prototype 기반 언어라고 불린다는데 기본도 몰랐던 거시였다... 한 동안 JS를 열심히 공부해야할 것 같다. prototype은 JS에서 객체의 상속을 다루는 간단하면서, 중요한 개념이었다. 사실 JS도 이런 기능을 제공한다는 것에 놀라기도 했다. 또 역시 JS답게 굉장히 심플했다. 🧐 자바스크립트 객체 생성 function MyObject(인자) { this.property1 = ... this.property2 = 인자 } class MyOb..

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

간혹 자바스크립트에서 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) 자바스크립트 코드

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