728x90 반응형 source-code/JavaScript17 esbuild 번들링 시 환경변수 관리하기 문제 상황 현재 사내 서비스는 자체적으로 개발/배포하는 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.. 2024. 3. 5. 이벤트 캡처링(Event Capturing)을 통한 이벤트 우선 순위 제어 이벤트(Event) 이벤트는 사용자의 행동이나 브라우저 자체에서 발생하는 사건을 의미합니다. 모든 DOM node는 특정한 이벤트를 만들어내며, 키보드 입력, 마우스 움직임 등이 대표적인 예시입니다. 이벤트 발생 시 브라우저는 이벤트 객체 를 생성합니다. 각 이벤트는 이벤트 객체에 의해 표현되며 해당 객체는 이벤트에 대한 상세한 정보를 포함합니다. 이벤트 흐름(Event Flow) 이벤트는 보통 세 단계로 진행됩니다. 캡처링 단계 (Capture Phase): 이벤트가 최상위(루트) 요소에서 시작하여 대상 요소로 향하는 단계입니다. 타겟 단계 (Target Phase): 이벤트가 실제 대상 요소에 도달하는 단계입니다. 버블링 단계 (Bubble Phase): 이벤트가 대상 요소에서 시작하여 최상위(루트).. 2024. 1. 9. JS invalid date error 에러 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.. 2023. 8. 21. Tagged Template Literal 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 .. 2023. 8. 21. localeCompare을 통한 문자열 정렬 JS에서 정렬 기능을 사용할 땐 Array.sort() 메서드를 주로 사용한다. arr.sort([compareFunction) 이 때 compareFunction이 제공될 경우, 배열 요소는 해당 함수의 return 값에 따라 정렬된다. → return값이 0보다 큰지, 같은지, 작은지에 따라 정렬 index가 달라짐! 따라서 숫자가 담긴 Array의 경우 numbers.sort(function(a, b) { return a - b; }); 와 같은 형태로 간편하게 오름차순 정렬을 구현할 수 있겠다. 이 때 문제는... 현 서비스에서는 숫자가 아닌, 문자 정렬을 해야하는 경우가 대부분이라는 것! (고객 이름 순 정렬, 견종 이름 순 정렬 등등...) 문자열의 경우 // mdn 예제 items.sort(.. 2023. 8. 21. JavaScript _ addEventListener Callback함수에 파라미터 넘기기 세상 긴 제목과 그렇지 않은 내용. JavaScript에서 addEventListener를 사용할 경우... 이런 식으로 사용하는 경우가 많다. 즉 addEventListener의 첫 번째 인자로 해당 event를, 두 번째 인자로 이벤트 발생 시 실행될 함수를 적어주는 것. 그런데 만약, 요 두번째 함수(콜백 함수)에 파라미터를 넘겨야 한다면? 이렇게 써주면 당연히 안된다. 왜? → 이러면 JS 파일을 읽어내려가는 순간 imgDragStart()란 함수가 실행되고 말 테니까! 우리가 원하는 건 touchstart라는 이벤트가 발생됐을 때 imgDragStart함수가 실행되는 것. 따라서 함수 실행을 잠시 미뤄야 한다 === 화살표 함수를 통해 가능! 쨔잔. 이렇게 써주면 된다. 그런데 이렇게만 하면.... 2021. 7. 12. terser 사용하기 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.. 2021. 6. 22. JaveScript _ Ajax 맛보기 비동기 방식을 사용하기 위해 Ajax의 맛을 봐보자! 전체적인 흐름! 하나하나 무슨 소리인지 알아보자. js가 Ajax를 사용할 때 쓰는 객체인 XMLHttpRequest를 생성! 객체이므로 new를 통해 만들어 준거다! XMLHttpRequest 객체의 open() 메서드를 사용해 해당 요청의 전송 방식, 전송 위치, 방식 을 지정해준다. 배치 순서는 → open(전송 방식 , 전송 위치 , 방식) 형태로! 역시 XMLHttpRequest 객체의 send() 메서드를 통해 XMLHttpRequest를 보낼 수 있다! 성공적으로 보내질 경우 responseText란 속성으로 답이 오는데, 요 녀석도 XMLHttpRequest 객체의 속성! 아하... 이를 통해 지난번 PNU Quiz에서 사용된 Ajax .. 2021. 2. 6. JavaScript _ 문서 객체 모델 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다! 1. DOM 관련 용어 문서 객체 모델(DOM)! 그런데 태그니, 문서 객체니, 노드니 하는 용어가 등장한다. 우선 태그는? 우리에게 익숙한, HTML 페이지에 존재하는 , 같은 녀석들! 이 태그를 js에서 이용할 수 있는 객체로 만들면? → 요놈이 문서 객체다! (var header = document.getElementById('header')시 header가 문서 객체! document 객체를 사용한걸 이제 안다!) 마지막으로 노드 란... HTML 페이지는 위 그림처럼 트리 모양으로 나타낼 수 있다. 이 때 그림 속 각 요소들을 노드 라고 부른다! 노드는 요소 노드와 텍스트 노드로 구분할 수 있는데, 요소 노도는 .. 2021. 2. 5. 이전 1 2 다음 728x90 반응형
