[Javascript] 문자열 자리수 채우기 - padStart, padEnd
2023. 8. 17. 01:09
Basic/JavaScript
예를 들어 숫자를 표현할 때, 네자리 고정으로 출력하기를 원할 때가 있다. 예를 들어, 네자리를 채우고 싶고 100을 입력하면 0100, 5를 입력하면 ***5 등등.. 보통 비밀번호 표시, 혹은 숫자 카운팅에 많이 쓰인다. 이를 구현하기 위해 padStart와 padEnd를 사용하면 구현하기 쉽다. padStart 내장함수를 사용하면 입력한 문자열 앞에 원하는 문자 또는 문자열로 만족하는 문자열 길이까지 채워준다. 반대로 padEnd는 입력한 문자열 뒤에서 채워준다. MDN의 예시를 한 번 보자 "abc".padStart(10); // " abc" "abc".padStart(10, "foo"); // "foofoofabc" "abc".padStart(6, "123465"); // "123abc" "ab..
[Javascript] 자바스크립트는 싱글 스레드 (+비동기 심화 학습)
2023. 5. 15. 23:37
Basic/JavaScript
자바스크립트는 단일 쓰레드(single-threaded) 언어이다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 처리할 수 있다는 것을 의미한다. 다른 많은 프로그래밍 언어들은 멀티 쓰레드(multi-threaded)를 지원하여 동시에 여러 작업을 처리할 수 있다. 멀티 쓰레드 언어에서는 한 쓰레드가 작업을 처리하는 동안에도 다른 쓰레드가 다른 작업을 처리할 수 있다. 그러나 자바스크립트는 단일 쓰레드 언어이므로 한 번에 하나의 작업만 처리할 수 있다. 이는 자바스크립트 코드가 순차적으로 실행되는 것을 의미한다. 자바스크립트는 이벤트 루프(event loop)와 비동기 콜백(callback)을 통해 비동기적인 작업을 처리할 수 있게 한다. 이벤트 루프는 콜백 함수를 대기열에 추가하고, 대기열의 작업이..
데이터 캐싱으로 웹소켓 성능 개선하기 (불필요한 네트워크 트래픽 없애기)
2023. 5. 10. 19:20
Basic/JavaScript
이전에 받은 데이터를 캐싱하여, 같은 데이터를 여러 번 받을 필요가 없도록 하여 웹소켓 로직의 성능을 개선할 수 있다. 객체를 이용하여 해당 기능을 구현해보도록 하자 class WebSocketManager { constructor() { // WebSocket 연결 this.socket = new WebSocket("ws://localhost:8080"); // 데이터를 캐싱하기 위한 객체 this.dataCache = {}; // WebSocket에서 데이터가 도착하면 호출되는 콜백 함수, 데이터 캐싱 this.socket.onmessage = (event) => { const data = JSON.parse(event.data); this.dataCache[data.id] = data; }; } /..
[JavaScript] 세미콜론 자동 삽입(Automatic Semicolon Insertion, ASI) 주의하기 - 코드 컨벤션
2023. 5. 9. 20:00
Basic/JavaScript
세미콜론 자동 삽입(ASI, Automatic Semicolon Insertion)은 줄바꿈이 자동으로 세미콜론으로 대체되는 것을 의미한다. 때로 의도하지 않은 동작을 초래할 수 있기 때문에 코드를 작성할 때 주의해야 한다. 특히, 함수 이름과 중괄호를 다른 줄에 작성할 경우, JavaScript에서는 이를 한 줄로 인식하여 세미콜론이 삽입되어 함수가 올바르게 작동하지 않을 수 있다. 다음 예시 코드를 보자 function someFunction() { // 코드 블록 } 위 코드에서는 함수 이름과 중괄호가 다른 줄에 작성되어 있다. 이 경우, 세미콜론을 자동으로 삽입하여 다음과 같이 해석한다. function someFunction(); { // 코드 블록 } 이 경우, someFunction은 함수 ..
[JavaScript] 익명함수와 화살표 함수 이해하기
2023. 5. 9. 00:11
Basic/JavaScript
2015년, 자바스크립트 ES6 버전이 디벨롭되면서 화살표 함수(arrow function)라는 문법이 생겨났고, 이 화살표 함수를 사용함으로 함수 코드의 작성 시의 간결함과 가독성을 높여주었다. 하지만 화살표 함수가 기존의 함수 작성 문법인 익명 함수(anonymous function)을 완전히 대체하지 못하는데, ES6 이상의 모던 자바스크립트로 학습을 시작한 학습자, 또는 심지어 많은 주니어 개발자들이 이를 모르고 있는 경우가 많아, 이 둘의 특징과 차이점을 정리해보았다. 1. 구문 익명 함수는 'function' 키워드를 사용하여 함수를 작성한다. 함수 이름이 없으며, 변수에 할당하거나 다른 함수의 매개 변수로 전달할 수 있다. const anonymous = function() { // 함수 내..
[JavaScript] BigNumber.js를 활용하여 정확한 계산, 큰 수 및 작은 수 다루기
2023. 5. 8. 12:13
Basic/JavaScript
JavaScript에서 숫자는 내장 데이터 유형으로 Number를 사용한다. 그러나 Number는 64비트 부동 소수점 수로 구현되어 있으며, 이는 매우 큰 또는 매우 작은 숫자를 처리하는 데 제한이 있다. 매우 큰 또는 매우 작은 숫자를 '정확'하게 다룰 필요가 있는 경우, BigNumber와 같은 라이브러리를 사용하는 것이 좋다. 어떤 이유로 제한이 있을까? JavaScript에서 숫자는 64비트 부동 소수점 수로 구현되어 있다. 이는 64비트로 이루어진 이진수로 부호 비트, 지수 비트, 가수 비트로 구성되어 있다. 이진수로 숫자를 표현하므로, 숫자는 2진수로 저장되고, 이진수 연산으로 처리된다. 이진수는 0과 1로만 이루어져 있으므로, 숫자를 표현하는 데 있어서 제한이 있다. 가수 비트에 저장할 수..
[JavaScript] 객체 변환하기
2023. 5. 3. 14:57
Basic/JavaScript
obj라는 객체가 있다고 가정하자. const obj = { a: 1, b: 2, c: 3 }; 위의 객체의 key값을 소문자에서 대문자, value값을 2배로 변환하여 새로운 객체로 변환하는 방법을 알아보자. 1. 라이브러리없이 구현 function mapObject(obj, fn) { const newObj = {}; for (const [key, value] of Object.entries(obj)) { const [newKey, newValue] = fn(key, value); newObj[newKey] = newValue; } return newObj; } const obj = { a: 1, b: 2, c: 3 }; const newObj = mapObject(obj, (key, value) =..
[JavaScript] 나머지 매개변수 - 함수 인수 유동적으로 받기
2023. 4. 2. 16:36
Basic/JavaScript
매개변수의 모든 합을 구하는 함수를 구현한다고 치자. 아래와 같은 함수는 매개변수를 고정적으로 두개밖에 받지 못한다. const sum = (a + b) => { return a + b; }; console.log(sum(1,2)); // result: 3 고정적으로 받지 않고 유동적으로 매개변수의 모든 값을 더하는 방법은 '나머지 매개변수'를 사용하면 된다. const sum = (...numbers) => { return numbers.reduce((pre, cur) => pre + cur, 0); }; console.log(sum(1, 2, 3, 4)); // result: 10 인자를 spread를 사용하면 고정적인 인수를 받는 것이 아닌 유동적으로 받는 것이 가능해진다. 예시로 sum(덧셈) 함..
[JavaScript] 문자형(string) 실수(숫자) 데이터, 세자리마다 콤마 구현하기
2023. 3. 30. 00:16
Basic/JavaScript
let numberString = "1000000.000000"; let parts = numberString.split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); let result = parts.join("."); console.log(result); // "1,000,000.000000" split() 메소드를 사용하여 원래 문자열을 소수점 기준으로 두 부분으로 나눈다. 정규표현식를 사용하여 replace() 메소드를 호출하여 첫 번째 부분의 숫자 문자열을 변경한다. 이 정규표현식은 세 자리의 숫자 그룹 앞에 오는 자리를 찾는다. 찾은 후, replace()는 해당 경계 뒤에 있는 문자열을 ","로 대체한다. join() 메소..