JavaScript (6) 썸네일형 리스트형 [npm/yarn] package.json 스크립트 명령어 예시 들어가며package.json의 scripts 필드는 단순한 명령어 모음이 아닌, 개발 생산성을 크게 높여주는 강력한 도구입니다.오늘은 실무에서 바로 활용할 수 있는 유용한 스크립트 팁들을 알아볼게요. 😊기본적인 스크립트 활용1. 기본 스크립트 구조{ "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }}실용적인 스크립트 팁들 🚀1. 병렬 실행과 순차 실행{ "scripts": { // 순차 실행 (&&) "build:sequence": "npm run clean && .. [JavaScript] 디바운스와 쓰로틀링 구현하고 활용하기 들어가며안녕하세요! 오늘은 프론트엔드 개발자라면 반드시 알아야 할 디바운스(Debounce)와 쓰로틀링(Throttling)에 대해 알아볼게요.스크롤 이벤트나 검색 입력 등에서 성능 최적화가 필요하다면, 이 두 기법은 여러분의 강력한 무기가 될 거예요! 😊디바운스와 쓰로틀링이 필요한 이유먼저, 문제 상황을 한번 볼까요?// 😱 이런 코드는 성능 저하의 지름길입니다!window.addEventListener('scroll', () => { // 스크롤할 때마다 실행되는 무거운 작업 doSomethingHeavy();});// 🤔 검색창에서도 문제가 발생해요searchInput.addEventListener('input', () => { // API 호출이 입력할 때마다 발생! searchAPI.. [JavaScript] axios 인터셉터로 전역 에러 처리하기 들어가며API 요청 시 발생하는 에러를 각 컴포넌트에서 개별적으로 처리하다 보면 코드가 중복되고 관리가 어려워집니다. axios 인터셉터를 활용하면 이러한 에러 처리를 전역적으로 깔끔하게 관리할 수 있습니다.axios 인터셉터 설정하기1. 기본 인스턴스 생성// src/api/axios.tsimport axios from 'axios';export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, timeout: 5000, headers: { 'Content-Type': 'application/json', },});2. 요청(Request) 인터셉터instance.interceptors.request.use( (.. [JavaScript] sort() 숫자 정렬 안되는 문제 해결법 - 숫자 정렬 / 비교 함수 문제 발생 함수 입력으로 들어오는 숫자들을 정렬하려는 상황이었다. [11, 1, 8]을 예를 들어보자. 내가 원하는 대로 정렬을 한다면 결과는 [1, 8, 11]과 같다. Javascript에 배열을 정렬해주는 내장 함수 sort()가 있어서 아무 생각 없이 사용하였다. 그런데 원하는 대로 결과가 잘 나오지 않았다. let arr = [11, 1, 8]; arr.sort(); console.log(arr); // [1, 11, 8] 왜 그럴까? sort() 함수를 사용할 일은 코딩 테스트뿐만 아니라도 꽤 있을것 같으니 이번 기회에 제대로 알아보려고 한다. 원인 사실 sort() 함수에는 비교 함수를 파라미터로 넣어줄 수 있다. 위 예시에서는 옵션을 아무 것도 주지 않아서 기본 동작대로 실행이 된 것으로 .. [JavaScript] a 태그의 href="javascript:void(0)"는 무엇인가? - intent scheme a 태그 href 속성 값의 javascript:void(0)는 왜 사용할까? 계기 Javascript 강의를 듣던 중 소스 코드를 보며 궁금한 것이 생겼다. 바로 a태그의 주요 속성 중 href의 값으로 이상한 것이 있는 것이었다. 렌더링된 페이지에서 해당 a 태그 버튼을 누르면 아무 동작도 하지 않는다. 아직 구현하지 않은 버튼인 것은 알겠지만 보통은 그냥 "#"만 넣거나 그래서 관련 내용을 좀 더 찾아보게 되었다. 그런데 생각보다 새롭게 알게 된 내용들이 많았다. a 태그의 목적과 특징 우선 a 태그에 대해서 확실하게 짚고 가야했다. a 태그(Anchor)는 주로 href 속성을 통해 다른 페이지나 같은 페이지의 어떤 요소의 위치로 이동할 수 있는 하이퍼 링크를 만들 때 사용한다. 다시 말하면 hr.. [JavaScript] DateTime 을 AM/PM 포맷으로 변환하는 법 / AMPM 시간 변환 JavaScript로 DateTime 을 AM/PM 포맷으로 변환하는 방법 환 / 오전, 오후 포맷 / time format 1. 문제 발생 채팅 기능을 구현할 때 신경 써주어야 할 부분들이 정말 많았다. 익숙하게 써오던 카카오톡을 다시 보게 되는 나날이다. 이번에 발생한 문제는 채팅 메세지를 전송한 시점 표시이다. 목표는 위와 같이 오전, 오후 (혹은 AM, PM)로 표현하고 싶었다. 하지만 서버로부터 받아오는 데이터는 당연하게도 이렇게 생기지 않았다. 주로 "1663244470791"와 같은 밀리세컨드 단위 timestamp나 혹은 이번 경우처럼 "2022-09-15 01:23:13"와 같이 전달받을 때도 있다. 다음부터는 당황하지 않도록 기록해두려고 한다. 함수로 만들어 보자. 2. 문제 해결 과정.. 이전 1 다음
