봉보로봉봉

숫자에 콤마 찍기, 한국 날짜로 변경하기 num.toLocaleString() 숫자 세 자리 마다 콤마(,)를 찍는 방법을 정규 표현식으로만 사용했었는데 날짜에만 사용할 수 있는 줄 알았던 toLocaleString을 숫자에도 사용할 수 있다는 사실을 알게 되었다. 아주 간편하다! 하지만 정규식 좋아잉... // 정규식 const addComma = (money) => { if (money === '' || typeof money === 'undefined') return ''; return money?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; // toLocaleString() const addComma = (money) => { if (money ..

지난주 주말에 html, css, js로 화면 구현 테스트를 봤다. 오랜만에 React가 아닌 js로만 구현하려니 아쉬운 코드라고 느끼면서도 그렇게 제출할 수밖에 없었다...🥺 어떻게 해야할지 모르겠어요.... 시험을 본 뒤로 계속 머릿속을 떠나지 않아서 찾아보고 기록해두려고 한다. - 문제 - fetch 후 데이터를 활용한 모든 코드를 2번째 then 안에 넣을 수 밖에 없는가..? fetch로 받아온 목데이터로 html 태그를 생성했는데 원래 html에 존재했던 태그는 fetch 밖에서 선언해 가져올 수 있었지만 데이터를 가지고 생성한 태그는 fetch 밖에서 접근하려고 하면 null이 들어왔다. 그래서 어쩔 수 없이 fetch 뒤에 2번째 then에 모든 코드를 다 넣을 수밖에 없었다. 이것보다 좋..

문자를 아스키코드로 변환하기 이 메소드로 알고 있는데 'A'.charCodeAt() // 65 'ABC'.charCodeAt() // 65 이것도 바꿔진다.....🤔 'A'.codePointAt() // 65 'ABC'.codePointAt() // 65 위 메소드들은 여러 개는 바꿔지지 않고 첫 글자만 바꿔준다. 아스키코드를 문자로 변환하기 이 메소드로 하는 걸로 알고 있는데 String.fromCharCode(90) // 'Z' String.fromCharCode(90, 89, 87) // 'ZYW' 이것도 바꿔진다....🤔 String.fromCodePoint(65) // 'A' String.fromCodePoint(65, 66, 67, 68, 69, 70) // 'ABCDEF' 위 메소드들은 여러..

동기가 과제로 채팅 프로그램을 구현하는데 최신 채팅이 채팅 목록 아래로 추가되는 형태였다. 스크롤을 항상 아래로 내려서 최신 메시지를 보여주고 싶어 했다. 집단지성으로 모두를 불러 모아 찾아보다가 나도 언젠가 쓸 일이 있지 않을까 싶어서 기록해둔다. const chatBox = document.getElementById('chatBox') chatBox.scrollTop = chatBox.scrollHeight; 찾아보니 메소드 scrollTop()은 제이쿼리 메소드 같다. 바닐라 JS는 scrollTop에 할당을 해줘야 하는 것 같다.

TypeIt 글자가 적히는 애니메이션을 추가할 수 있다. https://www.typeitjs.com/ TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com Scrollout2 재미있는 스크롤 애니메이션을 추가할 수 있다. https://scroll-out.github.io/ ScrollOut Effects and CSS Vars on Scroll! scroll-out.github.io Animejs 재밌는 애니메이션을 추가 할 수 있다. https://animejs.com/ anime.js Javascript animation engine animejs.com Rellax js 페이지를 ..

switch 문을 사용하는 이유 조건문 중 하나에 속한다. if문 보다 간결성과 가독성이 좋다. 다양한 조건에 따라 서로 다른 구문을 수행해야 할 때 사용한다. 예 : 과일 가격 알려주기, 테마 고르기, 방향에 따른 캐릭터의 움직임, 평가된 값에 따라 변환을 해주어야 할 때 switch문은 조건이 많아져도 인터럭션(*CPU가 명령을 수행하기 위해서 메모리 상에서 명령어를 읽어오는 과정)이 늘어나지 않으므로 조건이 많은 경우에는 switch문을 사용하는 것이 if문을 사용하는 것보다 더 좋다고 할 수 있다. switch syntax switch문은 ===를 사용해서 엄격하게 비교한다. (===, using the strict comparison) switch (expression) { case value1..

클래스(Class) ES6에 추가 된 스펙 // 기존 생성자 함수 const User = function (name, age) { this.name = name; this.age = age; this.showName = function () { console.log(this.name); }; }; const mike = new User("Mike", 30); // ES6 클래스 class User { constructor (name, age) { this.name = name; this.age = age; } showName() { consle.log(this.name); } } const mike = new User("mike", 30) constructor는 객체를 만들어주는 생성자 함수다. show..

백준 문제를 푸는데 for문 안에 if문에서 return을 썼더니 오류가 났다. Illegal return statement 잘못된 반환문 이유 return을 function 밖에서 사용했기 때문이다. 해결하려면 명명된 함수나 화살표 함수 안에서 반환문을 사용해야 한다. if문이나 for문에서는 return 사용이 허락되지 않으므로 if문을 함수로 감싸면 된다고 한다. 참고