Backgrounds현제 개발 중인 서비스에서는 하나의 가이드 속 다양한 단계(Step)를 표현하기 위해 트리 구조의 데이터를 생성하고 관리하고 있습니다.각 Step은 수행할 작업, 다음 단계(next step)를 포함하는 형태로, 이를 통해 트리 구조를 생성하고 탐색할 수 있습니다. 이때 이러한 자료 구조 형태를 FE에서 UI로 표현해야 했습니다.BackEnd에서는 Step 목록을 단순히 가이드 하위에 존재하는 Step 배열로 반환해주고 있었고 이러한 배열 형태로는 각 node들 간의 부모-자식 관계를 나타낼 수 없었습니다. (index가 순서가 아니니까요) 따라서 FE 측에서 tree형태 UI로 나타낼 수 있도록 입력받은 node 배열을 변환해줘야 했습니다.요구 사항을 좀 더 구체적으로 얘기해 보면...

문제 상황 현재 사내 서비스는 자체적으로 개발/배포하는 github private package를 사용하고 있습니다. 해당 패키지에서는 각 운영 환경에 따라 달라지는 값들이 존재하는데... // some-module.ts class Module { // private BASE_URL = 'https://production.com'; // private BASE_URL = 'https://development.com'; } (대표적으로, 개발 OR 배포에 따라 end-point인 server 주소가 달라지는 모습) 이러한 값들을 개발자가 배포 시 일일이 변경해 상당한 비효율이 발생했습니다! 즉 개발 환경 배포 시에는 → BASE_URL을 development.com으로 프로덕션 환경 배포 시에는 → BAS..

이벤트(Event) 이벤트는 사용자의 행동이나 브라우저 자체에서 발생하는 사건을 의미합니다. 모든 DOM node는 특정한 이벤트를 만들어내며, 키보드 입력, 마우스 움직임 등이 대표적인 예시입니다. 이벤트 발생 시 브라우저는 이벤트 객체 를 생성합니다. 각 이벤트는 이벤트 객체에 의해 표현되며 해당 객체는 이벤트에 대한 상세한 정보를 포함합니다. 이벤트 흐름(Event Flow) 이벤트는 보통 세 단계로 진행됩니다. 캡처링 단계 (Capture Phase): 이벤트가 최상위(루트) 요소에서 시작하여 대상 요소로 향하는 단계입니다. 타겟 단계 (Target Phase): 이벤트가 실제 대상 요소에 도달하는 단계입니다. 버블링 단계 (Bubble Phase): 이벤트가 대상 요소에서 시작하여 최상위(루트)..

JavaScript는 기본적으로 Date 객체를 제공한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. developer.mozilla.org Date 객체의 메서드들을 통해 특정 시간을 더하거나 빼는 등의 작업을 아주 손쉽게 할 수 있다. 그런데 오늘 release 환경에서 이런 일이 있었다. server에서 생성된 신청지 데이터 속 날짜 를 Da..

styled-components의 `` ? const StyleComponents = styled.div` color : ${(props) => props.color}; styled-components를 사용하다보면... 숨쉬듯이 작성하는 코드들이다. 그런데 여기서, StyleComponents에 props로 전달한 값들을 어떻게 사용할 수 있는 걸까? Tagged Template Literal 우선 Template Literal이란? → 내장된 표현식을 허용하는 문자열 리터럴! $와 중괄호( $ {expression} )를 통해 표현식을 넣을 수도 있다. var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a ..

JS에서 정렬 기능을 사용할 땐 Array.sort() 메서드를 주로 사용한다. arr.sort([compareFunction) 이 때 compareFunction이 제공될 경우, 배열 요소는 해당 함수의 return 값에 따라 정렬된다. → return값이 0보다 큰지, 같은지, 작은지에 따라 정렬 index가 달라짐! 따라서 숫자가 담긴 Array의 경우 numbers.sort(function(a, b) { return a - b; }); 와 같은 형태로 간편하게 오름차순 정렬을 구현할 수 있겠다. 이 때 문제는... 현 서비스에서는 숫자가 아닌, 문자 정렬을 해야하는 경우가 대부분이라는 것! (고객 이름 순 정렬, 견종 이름 순 정렬 등등...) 문자열의 경우 // mdn 예제 items.sort(..

세상 긴 제목과 그렇지 않은 내용. JavaScript에서 addEventListener를 사용할 경우... 이런 식으로 사용하는 경우가 많다. 즉 addEventListener의 첫 번째 인자로 해당 event를, 두 번째 인자로 이벤트 발생 시 실행될 함수를 적어주는 것. 그런데 만약, 요 두번째 함수(콜백 함수)에 파라미터를 넘겨야 한다면? 이렇게 써주면 당연히 안된다. 왜? → 이러면 JS 파일을 읽어내려가는 순간 imgDragStart()란 함수가 실행되고 말 테니까! 우리가 원하는 건 touchstart라는 이벤트가 발생됐을 때 imgDragStart함수가 실행되는 것. 따라서 함수 실행을 잠시 미뤄야 한다 === 화살표 함수를 통해 가능! 쨔잔. 이렇게 써주면 된다. 그런데 이렇게만 하면....

React나 Next.js를 사용하면 배포 시 (거의) 자동으로 build 파일을 생성할 수 있다. 그런데 요 build 파일의 역할은? → 필요 없는 공백이나 주석을 삭제해 파일의 용량을 줄이고, 서버 측에서 이해할 수 있는 언어로 변환하거나, 아무나 해당 스크립트를 해석할 수 없도록 암호화한다! 여기서 문제, 그렇다면 라이브러리 없이 그냥 HTML, CSS, JS 파일을 배포해야 할 때는? 해당 JS 파일을 직접 build 해줘야 한다! https://github.com/terser/terser terser/terser 🗜 JavaScript parser, mangler and compressor toolkit for ES6+ - terser/terser github.com 관련된 여러 패키지 중 t..