자바스크립트의 map메소드는 배열을 매핑하는 함수입니다.배열 내 데이터를 특정 규칙으로 정제하는 방법으로 주로 사용합니다. 그러나 map 메소드는 배열을 전부 순회하는 O(n)의 복잡도를 가집니다.데이터 정제 로직이 복잡하거나 배열 자체가 크다면 처리시간이 기하급수적으로 늘어날 수 있습니다. 때문에 map 메소드를 사용할때는 성능을 고려하며 코드를 작성해야 합니다.이번 글에서는 async 비동기 처리로 가속할 수 있는 방법에 대해 알려드리겠습니다.1. Async로 병렬 처리function test() { const data = [1, 2, 3, 4, 5] const data2 = data.map(async (v) => { return `데이터: ${v}` }) data2.forEach((v)..

Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다.실무에서 협업할 때, Enum을 올바르게 사용하면 가독성이 좋아져서 프로그래머가 실수할 확률을 줄여줍니다.그럼 어떻게 작성해야 Enum을 "잘" 썻다 라고 말할 수 있을까요?? 일반적으로, Enum은 DB 저장 효율성을 위해서 각 숫자에 의미를 부여해 저장합니다.예컨데 1은 손님, 2는 사용자, 3은 관리자 ... 이런 식이죠. 그러나 데이터를 화면에 표시할 때, 사용자의 화면에서는 숫자가 아닌 읽을 수 있는 텍스트로 표시되어야 합니다.그래서 프론트엔드 개발을 한다면 Enum을 어떻게 작성하냐에 따라 향후 유지보수성이 크게 갈리는데요.만약 Enum을 사용하지 않고 개발하면 프론트엔드 코드를 읽을 때, DB까지 봐야하는 불상사가..

Enum Enum은 상수 값 중 비슷한 것들을 묶어두는 역할을 하는 자료형입니다. 자바에서는 enum형을 지원하지만 자바스크립트에서는 지원하지 않습니다. 하지만 자바의 enum처럼 비슷한 기능을 간단하게 만들 수 있습니다. const SEASON = { spring: "봄", summer: "여름", autumn: "가을", winter: "겨울" }; Object.freeze(SEASON); const data = "가을"; console.log(data === SEASON.autumn); // true 자바스크립트의 JSON을 활용해서 enum형을 구현했습니다. 단, 자바스크립트의 JSON은 값이 변경될 수 있다는 문제가 있습니다. 따라서 Object.freeze 로 Enum이 더 이상 수정되지 못하..

이제 막 취업에 성공하신 분, 대학생 혹은 프로그래머로 취업을 준비중이신 분들은 현업에서 코드를 작성하는 방법에 대해서 궁금해 하시는 분들이 많으실 겁니다. 특히, 코드의 가독성은 신입이나 경력 상관없이 프로그래머라면 항상 관심을 가지는 주제인데요. 안그러면 다 지워집니다. 그만큼 프로그래머에게 있어서 가독성 좋은 코드를 작성하는 능력은 매우 중요합니다. 예제는 자바스크립트로 작성되었지만 파이썬, C++ 등 다른 언어에서도 통하는 방식입니다. 자바스크립트를 읽을 줄 아는 분이시라면 다른 언어에서도 활용해 보시길 바랍니다. 예제를 통해 가독성과 성능을 끌어올릴 수 있는 몇가지 상황을 알려드리겠습니다. 1. 조건문이 반복되는 if문의 경우 Array.includes를 활용하자 Bad Case if (data..

Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다. 최신 문법으로 체크박스 전체 선택 / 전체 해제 구현하는 방법을 소개합니다. HTML 삽입 미리보기할 수 없는 소스 JS const checkAll = document.querySelector("[name=checkAll]"); const items = [...document.querySelectorAll("[name=items]")]; // 아이템 선택 이벤트 items.forEach(async (item) => { item.onchange = (e) => { checkAll.checked = items.every((item) => item.checked); } }); // 전체 선택 이벤트 checkAll.onchange..